We Keep Coding

How to validate date in Javascript?

I have a textbox which allows users to choose a date from a calendar in mm/dd/yyyy format. I used the pikaday and moment libraries to achieve this. Now, if the user selects a date that is not in the future, I want to show an error in a label saying that the date is invalid. What is the 'best' way to achieve this? Working with dates in Javascript turned out to be quite a headache.I have provided my current approach:
textbox:
<asp:TextBox ID="txtDepartureDate" runat="server" ForeColor="Gray" onfocus="txtOnFocusDeparture(this)" onblur="txtOnBlurDeparture(this)" oninput="oninputDeparture()" AutoPostBack="True">DEPARTURE DATE</asp:TextBox>
script:
<script type="text/javascript">
function oninputDeparture() {
var inputDate = moment(document.getElementById('txtDepartureDate').value, 'DD/MM/YYYY');
var todayDate = moment().format('DD/MM/YYYY');
var lblError = document.getElementById('lblError');
var daysDiff = todayDate.diff(inputDate, 'days');
if (daysDiff <= 0) {
lblError.innerText = "Departure Day should be after today";
}
else {
lblError.innerText = "";
}
}
</script>

var todayDate = moment().format('DD/MM/YYYY');
var lblError = document.getElementById('lblError');
var daysDiff = todayDate.diff(inputDate, 'days');
moment.diff requires a moment object. todayDate is assigned as string in this case.
Also consider quick exit when the user is still typing
Have a look at the example.
var dateInput = document.getElementById('txtDepartureDate');
var lblError = document.getElementById('lblError');
function setError(text) {
lblError.innerText = text
}
function oninputDeparture() {
var value = dateInput.value;
var dateValue = moment(value, 'DD/MM/YYYY');
if (value.length < 10 || !dateValue.isValid()) {
return;
}
var todayDate = moment();
var daysDiff = todayDate.diff(dateValue, 'days');
if (daysDiff >= 0 && !dateValue.isAfter(todayDate, 'days')) {
setError("Departure Day should be after today");
} else {
setError("");
}
}
setTimeout(() => {
dateInput.value = moment().add(1, 'days').format('DD/MM/YYYY')
oninputDeparture()
}, 1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<input id="txtDepartureDate" type="text" oninput="oninputDeparture()" />
<div id="lblError"></div>

Jquery find if date is between date range

So I am trying to find if a certain date is between two other dates and then display the correct div text. I have it working to a point, but it doesn't seem to work checking multiple divs. Heres what I have below, basically it uses the 'date-selected' div and runs through each 'date' div to find the date match.
It seems to work if the date is 02/01/2019, but if I set the date to 02/01/2020 it will not find the correct div, which should be 02/01/2020-01/01/2021. Does anyone know what the problem is?
// on click
$(".check").click(function() {
// foreach date div
$(".date").each(function() {
var firstdate = $(this).text().split('-')[0];
var lastdate = $(this).text().split('-')[1];
var fDate, lDate, cDate;
fDate = new Date(firstdate); // firstdate
lDate = new Date();
lDate.setDate(lDate.getDate(lastdate)); // lastdate
cDate = new Date($('.date-selected').text()); // date to check if between
if (Date.parse(cDate) <= Date.parse(lDate) && Date.parse(cDate) >= Date.parse(fDate)) {
// output matched date
$('.correct-date').text('Date between: ' + $(this).text());
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-selected">02/01/2020</div>
<div class="date">01/01/2019-01/01/2020</div>
<div class="date">02/01/2020-01/01/2021</div>
<div class="correct-date"></div>
<button class="check">check</button>

not need to new Date,
only use Date.parse:
$(".check").click(function() {
// foreach date div
$(".date").each(function() {
if (
dateCheck(
$(this).text().split('-')[0],
$(this).text().split('-')[1],
$('.date-selected').text()
)
) {
// output matched date
$('.correct-date').text('Date between: ' + $(this).text());
return true;
}
});
});
function dateCheck(from,to,check) {
var fDate,lDate,cDate;
fDate = Date.parse(from);
lDate = Date.parse(to);
cDate = Date.parse(check);
if((cDate <= lDate && cDate >= fDate)) {
return true;
}
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-selected">02/01/2020</div>
<div class="date">01/01/2019-01/01/2020</div>
<div class="date">02/01/2020-01/01/2021</div>
<div class="correct-date"></div>
<button class="check">check</button>

You can use getTime() for compare date:
// on click
$(".check").click(function() {
// foreach date div
$(".date").each(function() {
var firstdate = $(this).text().split('-')[0];
var lastdate = $(this).text().split('-')[1];
var fDate, lDate, cDate;
fDate = new Date(firstdate); // firstdate
lDate = new Date(lastdate);
//lDate.setDate(lDate.getDate(lastdate)); // lastdate
cDate = new Date($('.date-selected').text()); // date to check if between
if (cDate.getTime() <= lDate.getTime() && cDate.getTime() >= fDate.getTime()) {
// output matched date
$('.correct-date').text('Date between: ' + $(this).text());
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-selected">02/01/2020</div>
<div class="date">01/01/2019-01/01/2020</div>
<div class="date">02/01/2020-01/01/2021</div>
<div class="correct-date"></div>
<button class="check">check</button>

HTML - How do I add days to an input date using javascript?

I'm trying to make an alert to user when choose a date. For example, when user choose 2018-09-13, then the alert will show message "7 days later will be 2018-09-20". But instead, the alert message shows 2018-09-137.
<input type="date" name = "date" id = "date" onchange="javascript:var chooseDate=(this.value)+7; alert('7 days later will be '+chooseDate);" >
How should I add days into the date ?? please help, thank you.

this.value will return the date as string using the format YYYY-MM-DD, so if you "add" 7, it will be YYYY-MM-DD7. What you could do is create a new Date object, and then add the days you want, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getDate()+7);
alert('7 days later will be '+chooseDate);
This will give you the complete date, though, which is something you probably don't want, so you would have to get the values you actually need, like this:
var chooseDate=new Date(this.value);
chooseDate.setDate(chooseDate.getUTCDate()+7);
var futureDate = chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);
alert('7 days later will be '+chooseDate);
Here you have a working example:
<input type="date" name = "date" id = "date" onchange="var chooseDate=new Date(this.value);chooseDate.setDate(chooseDate.getUTCDate()+7);var futureDate=chooseDate.getFullYear()+'-'+('0'+(chooseDate.getMonth()+1)).slice(-2)+'-'+('0'+(chooseDate.getDate())).slice(-2);alert('7 days later will be '+futureDate);" >

How about this in :
addDays = function(input_date, days) {
var date = new Date(input_date);
date.setDate(date.getDate() + days);
return date;
}
You then call do addDays(this.value, 7) in onchange().
And, please reference on getDate() and setDate().

You are working with string instead of a date object:
function lPad(val) {
return ((10 > val ? '0' : '') + val);
}
function add(input, unit, value) {
var cur = input.value;
var byValue = Number(value);
if (!/^\d{4}\-\d{2}\-\d{2}$/.test(cur) || !/day|month|year/.test(unit) || isNaN(byValue)) {
console.warn('invalid parameters!');
return false;
}
var dt = new Date(cur.replace(/\-/g, '/'));
if (!dt || isNaN(dt)) {
console.warn('invalid date!');
return false;
}
if ('day' === unit) {
dt.setDate(dt.getDate() + byValue);
} else if ('month' === unit) {
dt.setMonth(dt.getMonth() + byValue);
} else {
dt.setFullYear(dt.getFullYear() + byValue);
}
input.value = [dt.getFullYear(), lPad(1 + dt.getMonth()), lPad(dt.getDate())].join('-');
console.log(cur, value, unit, '=', input.value);
return true;
}
<input type="date" onchange="add(this,'day','+7');" title="+7 days" />
<input type="date" onchange="add(this,'month','-1');" title="-1 month" />
<input type="date" onchange="add(this,'year','+2');" title="+2 year" />

try this one ...
<input type="date" name = "date" id = "date" onchange="ggrr(this)" >
<script>
function ggrr(input){
var dateString = input.value;
var myDate = new Date(dateString);
var d = new Date(Date.parse(myDate));
var y = d.getFullYear();
var da = d.getDate() + 7;
var m = d.getMonth();
console.log(y+':'+m+':'+da);
}
</script>

How do I reference the index of an array without knowing what it is in Javascript?

I'm making a calendar app where I'm trying to validate if the date entered is during the current semester, and then see if it is a holiday that we don't have class. I have an index of all of the dates that we are out with the names of the respective holidays, but when I tried to use indexOf, the code broke.
this is the html:
<form onsubmit="holiday()" method="post">
<fieldset>
Enter Date: <input type='date' id="dat"><p>
<input class="ubmit" type=submit >
</fieldset>
</form>
<p id="output"></p>
this is the js:
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
}
else function validate(dvalue){
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
if (holidayz.includes(dvalue)){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= asList(holidayz).indexOf(dvalue);
console.log(holival)
}
}
console.log(txt)
document.getElementById("output").innerHTML = txt;
}

Try this,
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
} else {
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
holidayz[15]=["Test Day",1476921600000];
for(var i=0; i<holidayz.length; i++){
if ((holidayz[i][1])==dvalue){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= i; //asList(holidayz).indexOf(dvalue);
console.log(holival);
break;
}
}
}
console.log(txt);
}

Displaying time difference with javascript/jquery

I'm using a datepicker to choose dates, I want to calculate difference between dates choosen & then alert the difference.I'm not able see the code work
HTML datepicker
<input type="date" size="8" name="advDurFrom" />
<input type="date" size="8" name="advDurTo"/>
Javascript
$('input[name=advDurFrom]').click(function() {
var x=$('input[name=advDurFrom]').val();
var date1 = new Date(x);
});
$('input[name=advDurTo]').click(function() {
var y=$('input[name=advDurTo]').val();
var date2 = new Date(y);
});
$('input[name=advDurTo]').focusout(function() {
var diffDays = date2.getTime() - date1.getTime();
alert(diffDays);
});

Html:
<input type="date" name="startdate">
<input type="date" name="enddate">
<button id="calculate">Calculate</button>
<h2 id="result"></h2>
Script:
var startdateInput = document.querySelector('input[name="startdate"]'),
enddateInput = document.querySelector('input[name="enddate"]'),
calculateButton = document.getElementById('calculate'),
resultElement = document.getElementById('result');
calculateButton.addEventListener('click', function(e) {
if( startdateInput.value && enddateInput.value ) {
result.textContent = new Date(enddateInput.value) - new Date(startdateInput.value);
}
});
Or see the JSFiddle http://jsfiddle.net/zJTfM/
The result is the number of milliseconds between the start and end date.

$('input[name=advDurFrom]').live('change', function(e) {
var x=$(this).datepicker( "getDate" );
date1 = x.getTime();
});
$('input[name=advDurTo]').live('change', function(e) {
var y=$(this).datepicker( "getDate" );
date2 = y.getTime();
});
$('input[name=advDurTo]').live('blur', function(e) {
if(date2 && date1){
var diffDays = date2 - date1 ;
alert(diffDays);
} else {
alert("date is not selected.")
}
});

In my project I use this function to calculate difference day between 2 date,I modify some for you. see demo in jsfiddle
HTML:
<input type="text" size="8" name="advDurFrom" />
<input type="text" size="8" name="advDurTo"/>
difference days: <span class="diff"><span>
JS:
function CalendarDays(startDate, endDate) {
if (endDate < startDate)
return 0;
// Calculate days between dates
var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
startDate.setHours(0, 0, 0, 1); // Start just after midnight
endDate.setHours(23, 59, 59, 999); // End just before midnight
var diff = endDate - startDate; // Milliseconds between datetime objects
var days = Math.round(diff / millisecondsPerDay);
return days;
}
function common_getDateFromUI(str) {
var arr = str.split("/");
var returnDate = new Date(arr[2], arr[1] - 1, arr[0], 0, 0, 0, 0);
return returnDate;
}
$().ready(function(){
$('input[name="advDurFrom"],input[name="advDurTo"]').datepicker( {
showOn : "both",
dateFormat : "dd/mm/yy",
changeMonth : true,
changeYear : true,
buttonImageOnly : true,
onSelect : function(dateText, inst) {
var day1 = common_getDateFromUI($('input[name="advDurFrom"]').val());
var day2 = common_getDateFromUI($('input[name="advDurTo"]').val());
$(".diff").html(CalendarDays(day1,day2));
}
});
});

I think you need to declare the variable globally. Try this code. This is working perfectly for me.
var date1 = "";
var date2 = "";
$('#advDurFrom').click(function () {
var x = $(this).val();
date1 = new Date(x);
});
$('#advDurTo').click(function () {
var y = $(this).val();
date2 = new Date(y);
});
$('#advDurTo').focusout(function () {
var diffDays = date2.getTime() - date1.getTime();
alert(diffDays);
});
And Change the HTML to
<input type="date" size="8" id="advDurFrom" />
<input type="date" size="8" id="advDurTo" />

getTime returns millisecond, you just need to convert into the correct unit. Here an example with days difference. Also use blur event not click or you will end up assigning the value before the user actually inputs it
var isOK = false;
var isOK2 = false;
$('input[name=advDurFrom]').blur(function () {
var x = $('input[name=advDurFrom]').val();
try {
date1 = new Date(x);
isOK = !isNaN(date1);
} catch (e) {
isOK = false;
}
printDiff();
});
$('input[name=advDurTo]').blur(function () {
var y = $('input[name=advDurTo]').val();
try {
date2 = new Date(y);
isOK2 = !isNaN(date2);
} catch (e) {
isOK2 = false;
}
printDiff();
});
function printDiff(){
if (isOK && isOK2) {
var one_day = 1000 * 60 * 60 * 24;
var diff = Math.ceil((date2.getTime() - date1.getTime()) / (one_day));
console.log(diff + ' days');
}
}
Fiddle here