This is my code:
var $from = $("#fromDate").datepicker('getDate');
var $to = $("#toDate").datepicker('getDate');
if($from > $to)
alert("from date shouldn't greater than To date");
It is working if it is two dates in the same year. Otherwise, for example fromDate='1/12/2012'(dd/mm/yyyy) toDate='18/6/2013'(dd/mm/yyyy), while you check the condition, it is not working. It throws an alert, which is given.
Auto limit your dates instead. In this example the second combo box won't allow you to pick a lower date than the one you pick on the first one.
$(document).ready(function() {
$("#txtFromDate").datepicker({
numberOfMonths: 2,
onSelect: function(selected) {
$("#txtToDate").datepicker("option", "minDate", selected)
}
});
$("#txtToDate").datepicker({
numberOfMonths: 2,
onSelect: function(selected) {
$("#txtFromDate").datepicker("option", "maxDate", selected)
}
});
});
Here is a working demo.
txtFromDate field? Thanks!You need to use this to get the day/month/year:
var day1 = $("#datepicker").datepicker('getDate').getDate();
var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year1 = $("#datepicker").datepicker('getDate').getFullYear();
After that, you can compare the values.
Date.parse(fromDate) > Date.parse(toDate)
Example
var sDate = $('#EFT_FRM_DATE').val();
var eDate = $('#EFF_TO_DATE').val();
if (Date.parse(sDate) > Date.parse(eDate) || Date.parse(sDate) == Date.parse(eDate)) {
ShowMessage(CurrencySetupExchangeIndex.EndDateGreaterStartDate, 'Error');
//alert
return false;
return;
}
Simplified statement:
if (Date.parse(sDate) >= Date.parse(eDate)) {...
$(document).ready(function() {
$("#startdate").datepicker({
todayBtn: 1,
format: "dd-mm-yyyy",
startDate: '1d',
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
if($('#enddate').val() != "" && ($("#enddate").datepicker("getDate") == null || Date.parse($("#enddate").datepicker("getDate"))< Date.parse($("#startdate").datepicker("getDate")))) {
var date = new Date($("#startdate").datepicker("getDate")).toLocaleDateString();
date = date.split("/")
date = date[0] + "-" + date[1] + "-" + date[2]
$('#enddate').val(date)
}
});
$("#enddate").datepicker({
format: "dd-mm-yyyy",
autoclose: true,
})
});
Even though this person's issue was resolved, I still want to answer the question in the title, "How to compare two datepicker dates using jQuery"
I prefer getting the timestamps of the dates and then just comparing them since they're numbers, that way I don't have to mess around with comparing months, years, leap years, etc. I just want to see which date is chronologically first.
To do that, you can use the getTime() function on the datepicker object like this: $from = $("#fromDate").datepicker('getDate').getTime();
This function returns the number of milliseconds since January 1st, 1970, 00:00:00.000 GMT. If the number is smaller, that means it's closer to that date in the past. If it's bigger, then it's farther away (in the future).
See below for a working snippet.
// Init datepickers
$('.datepicker').datepicker();
$('button').on('click', compareDates);
function compareDates() {
var $from = $("#fromDate"),
$to = $("#toDate");
if ($from.val() && $to.val()) {
var from = $from.datepicker('getDate').getTime(),
to = $to.datepicker('getDate').getTime(),
response = 'These dates are the same, <strong><em>invalid!</em><strong>';
if (from > to) {
response = 'To happens first, <strong><em>invalid!</em><strong>';
} else if (from < to) {
response = 'From happens first, valid!';
}
$('#output').html(response);
}
}<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<p>From Date: <input type="text" id="fromDate" class="datepicker"></p>
<p>To Date: <input type="text" id="toDate" class="datepicker"></p>
<p><button>Compare Dates</button></p>
<p id="output">Enter Dates and then click the button to compare them</p>