Develop Reference

Highlight current date

My function displays the current date along with the next 60 days however I want the current date to be highlighted. What would be the best approach?
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 60; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var cellText = document.createTextNode(day);
var date = ('0' + date.getDate()).slice(-2) + ' '
+ monthNames[date.getMonth()] + ' '
// + date.getFullYear();
cell.innerHTML = date;
dateRange.appendChild(cell);
}

Since you're always showing the next 60 days, the current date is always the first date in the list, so it's easy to target with a CSS selector. For example:
#calendar-table-range li:first-child {
background-color: yellow;
}

Another way to go about it is to create a timestamp in the same format as the dates in the range then search for it.
E.g. the following, which puts formatting into a separate function and removes code that wasn't being used:
function formatDate(d){
let monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return ('0 ' + d.getDate()).slice(-2) + ' '
+ monthNames[d.getMonth()];
}
function highlightToday() {
let today = formatDate(new Date());
let cells = document.querySelectorAll('#calendar-table-range > li');
for (var i=0, iLen=cells.length; i<iLen; i++) {
if (cells[i].textContent == today) {
cells[i].style.color = 'red';
return;
}
}
}
var date = new Date();
var dayInt = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var dateRange = document.getElementById('calendar-table-range');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.getElementById("month").innerHTML = monthNames[month];
document.getElementById("year").innerHTML = year;
for(var day = 0; day < 6; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
var cell = document.createElement("li");
var date = formatDate(date);
cell.innerHTML = date;
dateRange.appendChild(cell);
}
<div id="month"></div>
<div id="year"></div>
<input type="button" onclick="highlightToday()" value="highlight today">
<ol id="calendar-table-range">
</ol>

Javascript Date.getTime() returns NaN in internet Explorer 11 only

I have a below JavaScript function which returns time from the full date.
function f() {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
];
d = new Date();
var utcOffset = -6;
var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
var localDate = new Date(utc + (3600000 * (utcOffset + 1)));
var fullDate = localDate.getDate() + ' ' + monthNames[localDate.getMonth()] + ' ' + localDate.getFullYear() + ' ' + localDate.toLocaleTimeString();
var now = new Date(fullDate).getTime();
return now;
}
In all browsers it returns expected output but not for Internet Explorer 11, as it returns NaN.
Please suggest changes to get the expected output.

Logic to add random time next to date using Jquery

My code returns date in the format dd-MMM--YYYY (example: 13-Jan-2014). I want to add a random time next to it. Something like: 13-Jan-2014 03:00 PM or 13-Jan-2014 03:00 AM. What can I add to get the desired output? Thanks.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
return date.getDate() + '-' + monthNames[(date.getMonth() + 1)] + '-' + date.getFullYear();
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)

You can check this-
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
var hours = date.getHours();
var t = hours >= 12 ? 'pm' : 'am';
var hour = (hours % 12).toString().length == 1 ? '0' + (hours % 12) : (hours % 12);
var minutes = date.getMinutes();
var minute = minutes.toString().length == 1 ? minutes + '0' : minutes;
return date.getDate() + '-' + monthNames[(date.getMonth())] + '-' + date.getFullYear() + ' ' + hour + ':' + minute + ' ' + t;
}
var datewithformate = DateAndTimeFormate(randomDate(new Date(0000, 0, 0), new Date()));
//Start date
$("#time").val(datewithformate)
https://jsfiddle.net/Luhtfzxj/3/

You already have a method which produces a random date time, it is only a question of formatting.
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var date = new Date(date);
// get the time
var time = date.toLocaleString('en-US', { hour: 'numeric', hour12: true });
// to fulfill your requirements some further manipulations
var ampm = time.slice(-2);
time = parseInt(time);
if (time < 10) { time = '0' + time }
time += ':00 ' + ampm;
return date.getDate() + '-' +
monthNames[(date.getMonth())] + '-' +
date.getFullYear() + ' ' +
time;
}
Example is here.

function DateAndTimeFormate(date) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
var date1 = new Date(date);
date1.setTime(1332403882588);
return date1.getDate() + '-' + monthNames[(date1.getMonth() + 1)] + '-' + date1.getFullYear() + ' ' + date1.getHours() + ':' + date1.getMinutes();
}

You can use .setSeconds(x) method to add a random time with x is random number falls in range of 0 <= x < 86400. For example:
var date = new Date('13-Jan-2014');
// date = Mon Jan 13 2014 00:00:00 GMT+0700 (SE Asia Standard Time)
var randomSeconds = Math.floor((Math.random() * 86400));
// randomSenconds = 53135
date.setSeconds(randomSenconds)
// date = Mon Jan 13 2014 14:45:35 GMT+0700 (SE Asia Standard Time)
I think this javascript library http://momentjs.com/ is helpful for you to manipulate/format/... dates that you don't need to write long/complicated code like the code in your question. For example:
moment().format('MMMM Do YYYY, h:mm:ss a'); // January 13th 2017, 2:17:37 pm

Stackoverflow style date format

How to format the javascript Date object the way stackoverflow does it.
For example. Aug 23 '10 at 23:35
This is what I tried.
new Date(val.replace(' ','T')+'Z').toString().split('GMT')[0]
This works cross browser. But doesn't look neat.

function formatDate(date) {
var monthNames = [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct",
"Nov", "Dec"
];
var day = date.getDate();
var monthIndex = date.getMonth();
var month = monthNames[monthIndex];
var year = date.getFullYear().toString().substring(2,3);
var hours = date.getHours();
var minutes = date.getMinutes();
return month+' '+day+" '"+year+' at '+hours+':'+minutes;
}

Try this:
var date = new Date();
var formattedDate =
(date.toLocaleString("en-us", { month: "long" })) + " " +
date.getDate() + " '" + (date.getFullYear() % 100);
var formattedTime = date.getHours() + ':' + date.getMinutes();
alert( formattedDate + " at " + formattedTime );
Here's a JSFiddle.

Show items in a box after clicking one by one using Javascript AngularJS

I have written a code, where it will show the next 12 months from current month. Suppose, now is Oct 2015, so it will show all next 12 months, that is upto Oct 2016. I am showing it in a list. But, I want to create a box with right-left arrow enabled. After clicking on left-right arrow it will show next item. After clicking on right arrow it will show next item and after clicking on left arrow it will show previous item. Data items will be shown in a box. Please check my below code, which will print next 12 months from current.
angular.module('picker', []).controller('pickercontroller', function($scope) {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
for(var i = 0; i <= 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.months = months;
});
<div ng-app="picker">
<div ng-controller="pickercontroller">
<li ng-repeat="currMonth in months">{{currMonth}}</li>
</div>
</div>
Also, check my fiddle :- http://jsfiddle.net/abhijitloco/cqbqow2L/

Check this code to see how you can change the selected month via ng-click
https://jsfiddle.net/jddg3som/
Controller
angular.module('picker', []).controller('pickerCtrl', function($scope) {
var date = new Date();
var months = [],
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
for (var i = 0; i < 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.changeMonth = function(steps) {
if ($scope.monthIndex + steps >= 0 &&
$scope.monthIndex + steps <= 11
) {
$scope.monthIndex = $scope.monthIndex + steps;
$scope.monthName = $scope.months[$scope.monthIndex];
}
};
$scope.monthIndex = 0;
$scope.months = months;
$scope.monthName = months[0];
});
View
<div ng-app="picker">
<div ng-controller="pickerCtrl">
<h1> {{monthName}} </h1>
<button ng-click="changeMonth(1);">Next Month</button>
<button ng-click="changeMonth(-1);">Previous Month</button>
<li ng-repeat="currMonth in months">{{currMonth}}</li>
</div>
</div>

Use ng-click to handle button event and for next month check whether next month is available in months array or not. If available then set next month from array.
Same for previous month
angular.module('picker', []).controller('pickercontroller', function($scope) {
var date = new Date();
var months = [],
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
for (var i = 0; i <= 12; i++) {
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
date.setMonth(date.getMonth() + 1);
}
$scope.months = months;
$scope.currMonth = months[0];
$scope.nextMonth = nextMonth;
$scope.prevMonth = prevMonth;
function prevMonth() {
var index = $scope.months.indexOf($scope.currMonth);
if (index != 0 && index < $scope.months.length) {
$scope.currMonth = $scope.months[index - 1];
}
}
function nextMonth() {
var index = $scope.months.indexOf($scope.currMonth);
if (index < $scope.months.length - 1) {
$scope.currMonth = $scope.months[index + 1];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="picker">
<div ng-controller="pickercontroller">
<p>{{currMonth}}</p>
<button ng-click="prevMonth()">Previous Month</button>
<button ng-click="nextMonth()">Next Month</button>
</div>
</div>