We Keep Coding

Javascript - Show and Add image based on date

I would like to create a landing page where I gradually show our winnings for the advent calendar. For this I have prepared images, which will then be revealed in a DIV.
So until 01 December you will not see any pictures.
On 01 December one sees then picture 01
On 02. December one sees picture 01 & picture 02
and so on
I have found the following code so far. Unfortunately only the DIV with today's date is shown to me. What do I have to do so that the images stay with?
Here is my fiddle: https://jsfiddle.net/bkoenig/m2pzqjrs/14/
<div class="imageClass image1">
1
</div>
<div class="imageClass image2">
2
</div>
<div class="imageClass image3">
3
</div>
var now = new Date().toDateString();
var october1 = new Date("November 22, 2022").toDateString();
var october2 = new Date("November 23, 2022").toDateString();
var october3 = new Date("November 24, 2022").toDateString();
if(now != october1) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image1').hide();
}
if(now != october2) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image2').hide();
}
if(now != october3) // today is after Christmas
{
// an id of a div that holds your images?
$('#div_id').hide();
// or a class of images
$('.image3').hide();
}
.imageClass {
display: ;
}

I have an example for your problem, hope it helps you
(function () {
const now = new Date();
$("#imageDate img").each(function () {
const el = $(this);
const date = new Date(el.attr('data-date'));
console.log(now, date)
if (date <= now) {
el.show();
}
});
})();
#imageDate img {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDate">
<img src="" data-date="November 22 2022" alt="22/11/2022" />
<img src="" data-date="November 23 2022" alt="23/11/2022" />
<img src="" data-date="November 24 2022" alt="24/11/2022" />
</div>

Sort divs by date / time with JS

I have a script which creates a lot of divs with the a data-date attribute and has a time format of Tue Aug 16 2016 12:27:21 GMT+0100 (BST)
An example set could be:
<div class="socialBox" data-date="Tue Aug 10 2016 12:30:21 GMT+0100 (BST)" data-type="twitter">
<div class="socialBox" data-date="Tue Aug 14 2016 12:10:21 GMT+0100 (BST)" data-type="facebook">
<div class="socialBox" data-date="Tue Aug 13 2016 15:27:21 GMT+0100 (BST)" data-type="youtube">
<div class="socialBox" data-date="Tue Aug 03 2016 18:27:21 GMT+0100 (BST)" data-type="instagram">
The divs are appended to a blank div from a variety of different functions and then I run the JS to sort the divs and append it to the original blank div again but I can't seem to get it to work.
Here is the script
loadTwitter(twitter);
loadFacebook(facebook);
loadYoutube(youtube);
loadInstagram(instagram);
// DOESN'T WORK YET (THE BELOW)
var board = $("#social-board");
var boards = board.children('.socialBox');
boards.sort(function(a, b) {
var an = $(a).data("date").getTime();
var bn = $(b).data("date").getTime();
if(an > bn) {
return 1;
}
if(an < bn) {
return -1;
}
return 0;
});
boards.detach().appendTo(board);
Could anyone help me out? I'm not sure if its the appending to the div element or the JS sort function itself.

You can do this by:
Detaching them up front and then using .get to get a real array instead of a jQuery object.
Sorting them (which can be a lot simpler)
Appending that array back to #social-board
so:
var boards = board.children('.socialBox').detach().get();
// --------------------------------------^^^^^^^^^^^^^^^
// A bit shorter :-)
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards); // <== switched this to append
Live example:
// Wait a sec so we can see the old order...
setTimeout(function() {
// Now sort them
var board = $("#social-board");
var boards = board.children('.socialBox').detach().get();
boards.sort(function(a, b) {
return new Date($(a).data("date")) - new Date($(b).data("date"));
});
board.append(boards);
}, 600);
<div id="social-board">
<div class="socialBox" data-date="2016-08-10T11:30:21.000Z" data-type="twitter">2016-08-10T11:30:21.000Z</div>
<div class="socialBox" data-date="2016-08-03T17:27:21.000Z" data-type="instagram">2016-08-03T17:27:21.000Z</div>
<div class="socialBox" data-date="2016-08-14T11:10:21.000Z" data-type="facebook">2016-08-14T11:10:21.000Z</div>
<div class="socialBox" data-date="2016-08-13T14:27:21.000Z" data-type="youtube">2016-08-13T14:27:21.000Z</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note: You cannot rely on the JavaScript Date object parsing dates in the string format you've used. Note the ISO format I've used in the snippet instead.
Side note: Unless you're using the features of data, you may want to use attr instead. data is not just an accessor for data-* attributes. It's both more and less than that.

Your idea is right, but your logic is slightly off in your sort function. This is the code I use to sort dates:
var reverse = false; // ascending/descending flag
var board = $("#social-board");
var boards = board.children('.socialBox');
var orderedBoards = boards.slice().sort(function (elem1, elem2) {
var value1 = new Date($(elem1).data("date")).getTime(),
value2 = new Date($(elem2).data("date")).getTime();
if (reverse) {
// descending
return -(value1 > value2) || +(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
}
// ascending
return +(value1 > value2) || -(value1 < value2) || (isNaN(value1)) - (isNaN(value2));
});
board.empty().append(orderedBoards);

I have a solution:
HTML:
<ul class="sort-list">
<li class="sort-item" data-event-date="2018-06-30 22:00">3</li>
<li class="sort-item" data-event-date="2018-06-29 21:00">2</li>
<li class="sort-item" data-event-date="2018-06-27 22:00">1</li>
<li class="sort-item" data-event-date="2018-07-01 22:00">4</li>
<li class="sort-item" data-event-date="2018-07-02 22:00">5</li>
</ul>
<button onclick="chat_order()">
test
</button>
JS:
function chat_order() {
var container = $(".sort-list");
var items = $(".sort-item");
items.each(function() {
// Convert the string in 'data-event-date' attribute to a more
// standardized date format
var BCDate = $(this).attr("data-event-date");
/*console.log(BCDate);
var standardDate = BCDate[1]+" "+BCDate[0]+" "+BCDate[2];*/
var standartDate = new Date(BCDate).getTime();
$(this).attr("data-event-date", standartDate);
console.log(standartDate);
});
items.sort(function(a,b){
a = parseFloat($(a).attr("data-event-date"));
b = parseFloat($(b).attr("data-event-date"));
return a>b ? -1 : a<b ? 1 : 0;
}).each(function(){
container.prepend(this);
});
}
JSFIDDLE: http://jsfiddle.net/2fr0vmhu/294/

CLNDR - How to get Today, Tomorrow and Current Month event list and count and print that information to separate div

Hi I'm using CLNDR and trying to get today, tomorrow and this month event list and event count information into separate div, I did try various things but couldn't find a better solution, can anyone, please help me with this. below code is for reference.
doneRendering: function() {
// make a moment object representing today
var target = moment();
var tommorow = target.add(1,'days');
var eventsTommorow =[];
if(this.options.multiDayEvents) {
eventsTommorow = $.makeArray( $(this.options.events).filter( function() {
// filter the dates down to the ones that match.
return ( ( tommorow.isSame(this._clndrStartDateObject, 'day') || tommorow.isAfter(this._clndrStartDateObject, 'day') ) &&
( tommorow.isSame(this._clndrEndDateObject, 'day') || tommorow.isBefore(this._clndrEndDateObject, 'day') ) );
}) );
} else {
eventsTommorow = $.makeArray( $(this.options.events).filter( function() {
// filter the dates down to the ones that match.
return this._clndrDateObject.format('YYYY-MM-DD') == dateString;
}) );
}
if(eventsTommorow.length) {
console.log(eventsTommorow.length);
var newNum = eventsTommorow.length < 10 ? "0" + eventsTommorow.length : eventsTommorow.length;
return $('.td-emp-count.tdTommorow').text(newNum);
}
}
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Actually, my problem is I can not filter events and print them into separate div, I tried moment.js validation to get today event. but it didn;t work as expected. but finally I tried a simple method to get today, tomorrow and this month event count and it worked. but the problem is if a recurring event happens, let's say maternity leave start on 24th April to 30th may then I can not get between event counts. because I'm capturing CLNDR date, startDate, endDate there is no way to get between events count. please find the code
doneRendering: function() {
// make a moment object representing today
var _self = this;
function todayCount() {
var totalDate = _.filter(_self.options.events, {
date: moment().format('YYYY-MM-DD')
});
var totalStartDate = _.filter(_self.options.events, {
startDate: moment().format('YYYY-MM-DD')
});
var totalEndDate = _.filter(_self.options.events, {
endDate: moment().format('YYYY-MM-DD')
});
var newNum = (totalDate.length + totalStartDate.length + totalEndDate.length) < 10 ? "0" + (totalDate.length + totalStartDate.length + totalEndDate.length) : (totalDate.length + totalStartDate.length + totalEndDate.length);
return newNum;
}
$('.td-emp-count.tdToday').text(todayCount());
},
This is a simple hack and I'm using underscore.js. but this way I cannot get actual today count, the reason is if a recurring leave happens it cannot get middle leave day as a count
eg:
Sick leave
startDate = 24th April 2016
endDate = 28th April 2016
when I apply my simple hack to this, I can only get 24th April (Monday) as one count and 28th April (Friday) as another count but when I try to print Wednesday leave counts, it cannot get this day as a leave count,
I'm new to underscore.js but I really need to know how to print these variables into underscore.js template,
Within template event count.
I can get the today (actual leave) count by using _.each() method and print them on into day itself like this one
<% _.each(days, function(day) { %>
<div class="<%= day.classes %>" id="<%= day.id %>">
<div class="num"><%= day.day %></div>
<% if (day.events.length) { %>
<div class="eventsTitles">Leave : <strong><%= day.events.length %></strong></div>
<% } %>
<ul class="dayLeaveTypes">
<% _.each(day.events, function(event) { %>
<li title="<%= event.type %>" id="<%= event.type %>" style="color:<%= event.color %>;">●</li>
<% }); %>
</ul>
</div>
<% }); %>
but I need to get this actual count (only specific day today or tomorrow) and print them into separate div, not within the calendar.
this is the whole idea i'm trying to solve. :)

Date conversion using Ractive.js

How do I convert this Epoch time value returned by a JSON end point to a time string like "Tue 19 Jan 11:14:07 SGT 2038"?
var ractive = new Ractive({
el: '#container',
template: '#template',
data: {
lastUpdated: 2147483647
}
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<pre>$ date --date='#2147483647'
Tue 19 Jan 11:14:07 SGT 2038
</pre>
<div id='container'></div>
<script id='template' type='text/ractive'>
<h1>Time: {{Date(lastUpdated)}}</h1>
</script>
I don't want to use additional libraries like moment.js. Thanks!

Ractive doesn't have an opinion about how to format dates, but you can very easily add a custom formatter to the data object:
var ractive = new Ractive({
el: '#container',
template: '<h1>Time: {{formatDate(lastUpdated)}}</h1>',
data: {
lastUpdated: 2147483647,
formatDate: function ( date ) {
// formatting code goes here...
}
}
});
Whenever lastUpdated changes, the formatter will be called again.

You can use MomentJS for this:
var ts = 2147483647;
var m = moment(ts);
var s = m.format("LLLL");
var ractive = new Ractive({
el: '#container',
template: '#template',
data: {
lastUpdated: s
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/locale/af.js"></script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<pre>$ date --date='#2147483647'
Tue 19 Jan 11:14:07 SGT 2038
</pre>
<div id='container'></div>
<script id='template' type='text/ractive'>
<h1>Time: {{lastUpdated}}</h1>
</script>

How do I uppercase part of a date format - angularjs

{{main.featured.date | date:'EEEE, MMMM d, yyyy'}}
//Wednesday, March 16, 2016
//But I want: WEDNESDAY, March 16, 2016
Is there any way to do this without writing my own filter?

You could use the built-in uppercase filter. All you need to do is split the date into two, like this: {{(vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy')}}
Here's an working example:
(function() {
angular
.module('myApp', [])
.controller('MainCtrl', function() {
var vm = this;
vm.myDate = new Date().getTime();
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl as vm">
Current date: {{ (vm.myDate | date : 'EEEE, ' | uppercase) + (vm.myDate | date : 'MMMM d, yyyy') }}
</div>
</div>