Develop Reference

Comparing two custom format dates jquery

I have tried to validate my dates if start date is less than end date it should alert but it only work with in same month, but when i compare dates of one month date to another month date it keeps stops me select less date even it is already.
here is what i have done so far,
$('#datepicker2').change(function () {
var startDate = new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (startDate < endDate){
alert("selected date is above pickup date, ");
}
});
here is my html
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
</div>
<div class="col-md-6">
<input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row ct-date-row">
<div class="col-md-6">
<input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
</div>
<div class="col-md-6">
<input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
</div>
</div>
</div>
my date format is d/m/y if this is making issue then how could i possibly define formate within new date and compare them. Thanks
I want when same date it hides previous time on time drop down of jquery.
$('#datetimepicker5').timepicker({
timeFormat: 'HH:mm',
});
$('#datetimepicker4').timepicker({
timeFormat: 'HH:mm',
});
format of my time i am not being to get time which is selected,
jQuery('document').ready(function(){
jQuery('#datetimepicker5').on('change paste keyup', function() {
var x = jQuery("#datetimepicker5").val();
alert(x);
});
});

So, you are using jQuery Ui DatePicker, there is native way to get date with getDate, here you go:
For compare your dates if equal or same you need to use Date.parse() , you need to do this:
if (Date.parse(startDate) === Date.parse(endDate))
$(function() {
$("#datepicker").datepicker({
dateFormat: "d/m/y"
});
$("#datepicker2").datepicker({
dateFormat: "d/m/y"
});
$('#datetimepicker5').timepicker({
timeFormat: 'HH:mm',
});
$('#datetimepicker4').timepicker({
timeFormat: 'HH:mm',
});
});
$('#datepicker2').on('paste keyup change', function() {
var startDate = $('#datepicker').datepicker("getDate");
var endDate = $('#datepicker2').datepicker("getDate");
if (startDate > endDate) {
alert("selected date is above pickup date, ");
} else if (Date.parse(startDate) === Date.parse(endDate)) {
alert("same");
var dt = new Date();
var phours = dt.getHours() + 3;
var time = phours + ":" + "00";
alert(time);
jQuery('#datetimepicker5').timepicker({
minTime: time
});
jQuery('#datetimepicker4').timepicker({
minTime: time
});
$('#datetimepicker4').val(time)
$('#datetimepicker5').val(time)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://www.jonthornton.com/jquery-timepicker/jquery.timepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha256-KM512VNnjElC30ehFwehXjx1YCHPiQkOPmqnrWtpccM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" integrity="sha256-zV9aQFg2u+n7xs0FTQEhY0zGHSFlwgIu7pivQiwJ38E=" crossorigin="anonymous" />
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<input type="text" id="datepicker" required name="pickupDate" placeholder="Pickup Date">
</div>
<div class="col-md-6">
<input class="" id="datetimepicker4" autocomplete="off" required name="pickupTime" placeholder="Pickup Time">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row ct-date-row">
<div class="col-md-6">
<input type="text" id="datepicker2" required name="dropDate" placeholder="Drop off Date">
</div>
<div class="col-md-6">
<input class="" autocomplete="off" id="datetimepicker5" required name="dropTime" placeholder="Drop Time">
</div>
</div>
</div>

You can convert your both dates to seconds and then compare it. then it will work like charm:
i.e.
var date1 = new Date("2015-08-25T15:35:58.000Z");
var seconds1 = date1.getTime() / 1000; //1440516958

Use Date.parse()
The Date.parse() method parses a string representation of a date and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC
$('#datepicker2').change(function () {
var startDate = new Date($('#datepicker').val());
var endDate = new Date($('#datepicker2').val());
if (Date.parse(startDate) < Date.parse(endDate)){
alert("selected date is above pickup date, ");
}
});

Getting difference from range of dtes in Jquery U.I Datepicker

I am working on date input fields which have jQuery UI datepicker in them. They are departure date and return date. After the user selects the departure date and return date, I need to find the difference between the date he/she departed and the date he/she returned and populate in another input field instantly.
Markup Code
<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>
<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>
<!--Output-->
<p>Your trip is<br/> <div>41 days</div></p>
JavaScript Logic
<script>
$(function() {
$("#departureDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: '+1',
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#returnDate").datepicker("option","minDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
$("#returnDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#departureDate").datepicker("option","maxDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
});
</script>
Logic to check difference
$(function() {
let $fromDate = $('#departureDate'),
$toDate = $('#returnDate');
$fromDate.datepicker().on('change', function(){
$toDate.datepicker('option', 'minDate', $(this).val());
});
$toDate.datepicker().on('change', function(){
$fromDate.datepicker('option', 'maxDate', $(this).val());
});;
});

Try this
$(function() {
$("#departureDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: '+1',
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#returnDate").datepicker("option", "minDate", selected);
//Remove required attribute
$(this).removeAttr('required');
calcDays();
}
});
$("#returnDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#departureDate").datepicker("option", "maxDate", selected);
//Remove required attribute
$(this).removeAttr('required');
calcDays();
}
});
});
function calcDays() {
let from = $('#departureDate').datepicker('getDate');
let to = $('#returnDate').datepicker('getDate');
if (!from || !to)
return;
let diffTime = Math.abs(to - from);
let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
$('p').show();
$('p span').text(diffDays);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' />
<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>
<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>
<!--Output-->
<p hidden>Your trip is
<span></span> days
</p>

Unable to select second date in datepicker

I have date field which select "Start date" and "End Date", What I wanted to do is to disable the previous date and show from today's date in "Start Date" field, and in "End Date" field, I want to show +3 days, not more than that. I have written my code but it is only working if I select today's date, if I select like 25th September, then it disables all the dates in "End Date". Here goes my code:
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>
JavaScript code:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", '+2d' );
}
});
});
$(function() {
$('#dob2').datepicker({changeMonth: true, changeYear: true,
yearRange: '2012:2020'});
});
</script>
Please help me where I am getting wrong, my code is working if I select today's date, but when I select advanced days, it disables the "End Date" field.

I solved my question by adding a little change:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
var lastDate = new Date(selectedDate.getTime() + 2 * msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", lastDate );
}
});
});
</script>

$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
$("#dob2").datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000) );
$("#dob2").datepicker( "option", "maxDate", new Date(selectedDate.getTime() + (3*24*60*60*1000)) ); //where 3 is for 3 days.you can change it according to your need
}
});
$('#dob2').datepicker({changeMonth: true, changeYear: true, yearRange: '2012:2020'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>

Create dependent datepickers using bootstrap-datepicker

I need to create two date pickers using the datepicker by https://github.com/uxsolutions/bootstrap-datepicker so that date selected in the first datepicker will be used as start date of second. The dates before the date picker of first one disabled in the second.
The HTML for first date-picker:
<div class="col-sm-6 row-margin" id="div-last-day">
<div class="input-group date">
<input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
Second date-picker:
<div class="col-sm-6 row-margin" id="div-separation-day">
<div class="input-group date">
<input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
Here is some of my code:
$("#div-last-day .input-group.date").datepicker({
format: "dd-M-yyyy",
todayHighlight: true,
autoclose: true,
});
$('#div-last-day .input-group.date').datepicker()
.on('changeDate', function (e) {
var lastdate = $('#div-last-day .input-group.date').datepicker('getDate');
var date = new Date(lastdate);
var curr_date = date.getDate();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
perfect_date = curr_date + "-" + m_names[curr_month]
+ "-" + curr_year;
$("#div-separation-day .input-group.date").datepicker({
format: "dd-M-yyyy",
todayHighlight: true,
startDate: perfect_date,
autoclose: true,
});
});
Here is the fiddle I am working on https://jsfiddle.net/5tpn12L8/
The fiddle works for the first time but when I change the date in the first date-picker it doesn't update the second date-picker.

You can do it as below:
HTML:
<input class="form-control" id="txtFromDate" />
<input class="form-control" id="txtToDate" />
JQUERY:
$(document).ready(function () {
$("#txtFromDate").datepicker({
format: 'dd/mm/yyyy',
autoclose: 1,
//startDate: new Date(),
todayHighlight: false,
//endDate: new Date()
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#txtToDate').datepicker('setStartDate', minDate);
$("#txtToDate").val($("#txtFromDate").val());
$(this).datepicker('hide');
});
$("#txtToDate").datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
//endDate: new Date()
}).on('changeDate', function (selected) {
$(this).datepicker('hide');
});
});
jsfiddle DEMO

actually timepicker has it's own documentation you can use as
$('#timepicker_input').datetimepicker({
format: "dd-M-yyyy",
todayHighlight: true,
autoclose: true,
onSelect: function(dateText, inst){
//here perform the change you want
}
});

bootstrap datepicker validation not working

I am trying to use bootstrap-datetimepicker.min.js and I have successfully integrated it in my project. Yet, when I tryg to show today's date as a default value in the from input field, it is not working.
Javascript:
var d = new Date();
var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var dateStr = currDate + "-" + currMonth + "-" + currYear;
$('#from').datetimepicker({
pickTime: false,
defaultDate: dateStr
});
HTML:
<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>
<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>
AND with this I would also like to validate the date in from filed so that it should not be less than today's date and to date not less than tomorrow's date and not greater than 3 month date.
I have searched for an answer on google and Stackoverflow already. Please help me.

try this code working fiddle http://jsfiddle.net/KWvNe/
HTML
<div class="well">
<div id="from-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="to-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
JS
$(function() {
var d = new Date();
var today = d;
var dateThreeMonthLater = d.setMonth(d.getMonth() + 3);
$('#from-datepicker').datetimepicker({
language: 'pt-BR',
startDate: today,
endDate: dateThreeMonthLater
});
$('#to-datepicker').datetimepicker({
language: 'pt-BR'
});
});
Check working fiddle here http://jsfiddle.net/KWvNe/
do not forgot to include essential javascript and css check here http://tarruda.github.io/bootstrap-datetimepicker/
You can set following options for a datepicker
maskInput: true, // disables the text input mask
pickDate: true, // disables the date picker
pickTime: true, // disables de time picker
pick12HourFormat: false, // enables the 12-hour format time picker
pickSeconds: true, // disables seconds in the time picker
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximum date

use this jquery function
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$("#from").datepicker( "option", "dateFormat", "yy-mm-dd");
$("#to").datepicker( "option", "minDate", selectedDate );
}
});
$( "#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$("#to").datepicker( "option", "dateFormat", "yy-mm-dd");
$("#from").datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
HTML:
<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>
<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>

I got ur problem...This is a simple date validation
<input type="text" id="txtdate" />
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/>
<script>
function checkDate() {
var EnteredDate = document.getElementById("txtdate").value; //for javascript
var EnteredDate = $("#txtdate").val(); // For JQuery
var date = EnteredDate.substring(0, 2);
var month = EnteredDate.substring(3, 5);
var year = EnteredDate.substring(6, 10);
var myDate = new Date(year, month - 1, date);
var today = new Date();
if (myDate > today) {
alert("Entered date is greater than today's date ");
}
else {
alert("Entered date is less than today's date ");
}
}
</script>

include this script
// jQuery Date Picker
jQuery(".datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: false,
isRTL:false,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
});
jQuery('.datepicker').css('cursor', 'pointer');
jQuery('.datepicker').attr("readonly", "readonly");
jQuery('.datepicker').addClass('tooltip-info');
jQuery('.datepicker').attr('data-rel', 'tooltip');
jQuery('.datepicker').attr('data-placement', 'right');
jQuery('.datepicker').attr('data-original-title', 'Select a Date');
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown");
jQuery(".datepicker").each(function(){
jQuery(this).datepicker( "setDate", jQuery(this).attr('date-value'));
});
Use id="datepicker"