Develop Reference

Block a specific date on a Javascript date selector

I would like to request assistance on how can I block a specific dates on my date selector.
Specific dates are:
December 24, 25, 30, 31 - 2020 and January 1, 2021 ONLY.
Note: We need to remain the current function where the selected available dates are 2 days advanced from today. Weekends are also blocked. This functions are already in the script
<style>
select {
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#000;
}
</style>
<select name="APPOINTMENTDATE" id="date-range" data-field-type="Text">
<option value="" selected="selected">Select date</option>
</select>
<script>
var dateRange = document.getElementById('date-range'),
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for(var day = 2; day < 30; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
if(!(date.getDay()==6|| date.getDay()==0))
dateRange.options[dateRange.options.length] = new Option([monthNames[date.getMonth()], date.getDate(), date.getFullYear()].join(' '));
}
</script>

You can do something like this.
var dateRange = document.getElementById('date-range'),
monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var day = 2; day < 30; day++) {
var date = new Date();
date.setDate(date.getDate() + day);
if (!(date.getDay() == 6 || date.getDay() == 0)) {
dateRange.options[dateRange.options.length] = new Option(
[monthNames[date.getMonth()],
date.getDate(),
date.getFullYear()
].join(' '));
}
}
//define dates to be blocked.
var arr = ["Dec 24 2020", "Dec 25 2020", "Dec 30 2020", "Dec 31 2020", "Jan 01 2021"];
//loop through dateRange.options
for (var i = 1; i < dateRange.options.length; i++) {
//when date to be blocked found, mark it as disabled
arr.includes(dateRange.options[i].value) ? dateRange.options[i].disabled = true : dateRange.options[i].disabled = false;
}

Want to get the name of month in form of Jan, Mar, .... Dec. using JS

var today = new Date();
//$('#timeStampID').val(today.getFullYear() + '-' +
('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' +
today.getDate()).slice(-2));
$('#timeStampID').val(String(('0' +
today.getDate()).slice(-2)) + ' ' +
String(('0' + (today.getMonth() + 1)).slice(-2)) + ' ' +
String(today.getFullYear()));
Here i'm getting output on input filed as : 23 04 2018 but i want to show Apr in place of 04 i.e name of the month

Unfortunately, there isn't a method for this built into the Date object. But you can do something like this:
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var monthName = months[today.getMonth()];

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.

JavaScript - List of last 12 Months

I have an Angualr service that lists out 12 months and year from the current month:
JS:
app.factory('12months', function() {
return {
getMonths: function() {
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);
}
return months;
}
};
});
Which output is:
Oct 2014, Sep 2014, Aug 2014 etc etc
How can i modify this to display the day too, so:
21 Oct 2014, 21 Sep 2014, 21 Aug 2014 etc etc

How about using the date filter
var app = angular.module('my-app', [], function() {
})
app.controller('AppController', ['$scope', '12months',
function($scope, tmonths) {
$scope.tmonths = tmonths.getMonths();
}
])
app.factory('12months', ['dateFilter',
function(dateFilter) {
return {
getMonths: function() {
var date = new Date();
var months = [];
for (var i = 0; i < 12; i++) {
months.push(dateFilter(date, 'dd MMM yyyy'));
date.setMonth(date.getMonth() - 1)
}
return months;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<pre>{{tmonths | json}}</pre>
</div>

append date to string:
app.factory('12months', function() {
return {
getMonths: function() {
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(date.getDate()+ ' ' +monthNames[date.getMonth()] + ' ' + date.getFullYear());
}
return months;
}
};
});

You can just concatenate the day to the string in the months array:
So instead of this:
months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
Do this:
months.push(date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear());

You can date in jquery
var date = new Date();
date.getDate() //output:- 21

Add Total days in the days Array:
app.factory('twelvemonths', function() {
return {
getMonths: function() {
var date = new Date();
var months = [],
monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
days=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
for(var i = 0; i < 12; i++) {
months.push(days[date.getDate()]+ ' ' +monthNames[date.getMonth()] + ' ' + date.getFullYear());
}
return months;
}
};
});

If you want to use your function you could change the line to
months.push(date.getDate() + ' ' monthNames[date.getMonth()] + ' ' + date.getFullYear());