Develop Reference

Pikaday bug with a disableDayFn array to remove specific days

I am using Pikaday datepicker. All works well but for some complicated date manipulation I need to add/remove multiple dates.
<code>
var start_date = new Pikaday({
disableDayFn: function(date) {
var enabled_dates = ["06/11/2019","06/17/2019","06/24/2019"]; // dates I want to enable.
var disabled_dates = ["06/15/2019", "06/22/2019"]; // dates I want to disable.
if ((date.getDay() === 1 || date.getDay() === 2 || ($.inArray(moment(date).format("MM/DD/YYYY"), disabled_dates) === 0)) && $.inArray(moment(date).format("MM/DD/YYYY"), enabled_dates) === -1) {
return date;
}
},
format: 'MM/DD/YYYY',
field: document.getElementById('start_date'),
});
</code>
In this example above:
[this works fine] I am using an enabled_dates array to enable multiple dates I need to display on calendar.
[this works fine] I am removing ALL mondays and tuesdays using the actual day value '1' and '2' example: date.getDay() === x
[not working] when I try pass multiple dates in an array the first date is removed but the subsequent dates are not actioned.
In this example all good except for the date "06/22/2019" not removed as appears only removes the first date in array not subsequent
Fiddle demo:
http://jsfiddle.net/netfast/k36nhacz/18/

Javascript yyyy-mm-dd converting to incorrect date (mm/dd/yyyy)

Here is the code where the user enters a date: (it has to be a date picker on my end, but the form has to submit the date field as text – don’t ask)
On submit, I call validation logic in javascript. I’ve attached a screenshot of what it looks like when I try to enter 01/01/2001 as the users birthday. It looks like when I’m converting the value string to a Date object, it’s converting to the wrong date and time. If it would just convert correctly, I could adjust the month and day and year and build a string to send in my second object.
Attaching the picture…
I’ve messed around with UTC and timezones, but to no avail.
I need my output to be a text string "01/01/2001" which I can build as long as I have the correct date going in..but it seems to calculate wrong no matter what I try.

When you construct the Date it is assumed that the string represents a time in UTC since no timezone was provided. The string is parsed as UTC, but the Date object uses your browser's local timezone.
One way to fix that is to use getUTCDay instead of getDay. Same applies to month and year.

Using a jquery datapicker library did the trick.
function initDatePickers() {
jQuery('.om-datepicker-trigger').click(function () {
var defaultDatePickerOptions = {
showOtherMonths: true,
changeMonth: true,
changeYear: true,
defaultDate: '-45y',
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var widget = jQuery(inst).datepicker('widget');
widget.css('margin-left', jQuery(input).outerWidth() + 3 -
widget.outerWidth());
},
//buttonImage: "/img/button_calendar.png",
//buttonImageOnly: true,
showOn: "both"
};
var $input = jQuery(this).parent().find('.om-input-date').first();
if ($input.hasClass('om-min-date-today')) {
var minDateTodayOptions = defaultDatePickerOptions;
minDateTodayOptions.defaultDate = 0;
minDateTodayOptions.minDate = 0;
$input.datepicker(minDateTodayOptions);
$input.datepicker('show');
} else {
$input.datepicker(defaultDatePickerOptions);
$input.datepicker('show');
}
});
jQuery('.om-input-date').click(function () {
jQuery(this).next('.om-datepicker-trigger').trigger('click');
});
// Datepicker
// --------------------------------------------------------
jQuery('.om-input-date').keyup(function () {
var inputDOBBox = jQuery(this);
var dateValue = inputDOBBox.attr('value');
if (dateValue.length == 3 || dateValue.length == 6) {
var first = dateValue.substring(0, dateValue.length - 1);
var last = dateValue.substring(dateValue.length - 1);
if (last != "/" && last != "-") {
inputDOBBox.attr('value', first + "/" + last);
}
}
});

Javascript Date validation for mm/dd/yyyy format in asp.net [duplicate]

This question already has answers here:
Regex to validate date formats dd/mm/YYYY, dd-mm-YYYY, dd.mm.YYYY, dd mmm YYYY, dd-mmm-YYYY, dd/mmm/YYYY, dd.mmm.YYYY with Leap Year Support
(27 answers)
Closed 6 years ago.
I want to validate BirthDate, which should be in "mm/dd/yyyy" format, on the client side.
I have tried it as following, but it is not working properly:
$("#btnUpdateEditCB3").click(function(event) {
var txtBirthDate = $('#<%= txtBirthDateCB3.ClientID %>').val();
var txtNickName = $('#<%= txtNickNameCB3.ClientID %>').val();
if (txtBirthDate != "") {
if (txtBirthDate.match(/^(?:(0[1-9]1[012])[\/.](0[1-9][12][0-9]3[01])[\/.](1920)[0-9]{2})$/)) {
alert("Please enter date in mm/dd/yyyy format");
$('#<%= txtBirthDateCB3.ClientID %>').focus();
return false;
}
}
});

Below links explains the same...see if it helps you.
Validate date using jquery
Validate date format using jquery

I recommend that you use the JavaScript Date() object along with regular expressions to validate a date. You can use a variant of this code as follows:
function ValidateCustomDate(d) {
var match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(d);
if (!match) {
// pattern matching failed hence the date is syntactically incorrect
return false;
}
var month = parseInt(match[1], 10) - 1; // months are 0-11, not 1-12
var day = parseInt(match[2], 10);
var year = parseInt(match[3], 10);
var date = new Date(year, month, day);
// now, Date() will happily accept invalid values and convert them to valid ones
// therefore you should compare input month/day/year with generated month/day/year
return date.getDate() == day && date.getMonth() == month && date.getFullYear() == year;
}
console.log(ValidateCustomDate("1/01/2011")); // false
console.log(ValidateCustomDate("01/1/2011")); // false
console.log(ValidateCustomDate("01/01/2011")); // true
console.log(ValidateCustomDate("02/29/2011")); // false
console.log(ValidateCustomDate("02/29/2012")); // true
console.log(ValidateCustomDate("03/31/2011")); // true
console.log(ValidateCustomDate("04/31/2011")); // false

Is there any specific reason for not using datepicker formatting? Suggest using a jquery datepicker where you can set the formats.
jquery date picker date time formatting

If you want to validate date in mm/dd/yyyy format using javascript you can use the following snippet of code.
txtdate is having textbox id
Consider the below code.
function isValidDate(txtdate) {
var txtDate = "#" + txtdate;
var dateString = $(txtDate).val();
var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
if (!(date_regex.test(dateString))) {
alert("Date Must Be in mm/dd/yyyy format");
}}

Date comparison in Jquery

I want to compare the selected date and current date. Iam using jquery date picker. While using the following code only the date field comparison is takes place... How can i compare with month and year also... Advance thanks..
$(document).ready(function() {
var objDate = new Date();
var selectedDate = document.getElementById("<%=txtRqstDate.ClientID %>").value;
var currentDate = $.datepicker.formatDate('dd/mm/yy', new Date());
if (Date.parse(selectedDate) > Date.parse(currentDate )) {
alert("Invalid date range!\n Please choose a date that is not later than today!")
return false;
}
else {
return true;
}

Pls use this.I thing it will solve ur problem
function ChDate(){
var objDate = new Date();
var selectedDate = document.getElementById("<%=txtRqstDate.ClientID %>").value;
if (selectedDate > objDate ) {
//do
}
else
{
//do
}
}
Pls chk the following link to get more functions
http://www.w3schools.com/jsref/jsref_obj_date.asp
It is possible to take split an do checking by using string.split(separator, limit)

jQuery datepicker onChangeMonthYear doesn't fire on current month

I'm using the datepicker inline, highlighting the dates that has events. Every time the month changes, it has to load the new events from the server. The problem is, the onChangeMonthYear only fires on months different from the current month. For instance, if the is august, it fires on all previous months (july, june, may...) and all following months (september, october...), but not when I change back to august. This is my code:
function highlightDates(date) {
for ( var i = 0; i < agenda.length; i++) {
var start = agenda[i].start.toShortDate();
var end = agenda[i].end.toShortDate();
if (start >= date && end <= date) {
return [ true, 'dateHasEvent' ];
}
}
return [ true, '' ];
}
Date.prototype.toShortDate = function() {
var date = new Date(this.getFullYear(), this.getMonth(), this.getDate());
return date;
};
function monthChanged(year, month, instance) {
var date = new Date(year, month - 1);
$.getJSON('json.do', {
time : date.getTime()
}, updateCalendars);
}
function updateCalendars(data, status) {
agenda = data;
$('#calendar').datepicker('refresh');
}
var agenda = [];
$(function() {
$('#calendar').datepicker( {
beforeShowDay : highlightDates,
onChangeMonthYear : monthChanged,
changeMonth : false,
changeYear : false,
showButtonPanel : false
});
});
Does anybody know if this is a bug or expected behaviour?

Well, that was stupid on my part. The problem was the getJSON method. It is apparently very picky about what json it accepts. So after I produced correct json, everything worked as it should.