Develop Reference

Hide div on date-time picker click

In this image when i select value from drop down and select dates then container is displayed and then when i select row from table data then cont and sumdata div is displayed now i want when i select again dates from date picker then want to hide all divs ... and when click on search then want to display container
<script type="text/javascript">
$(function () {
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
var currentDay = (new Date).getDate();
$('#fromdate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
//minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: new Date(currentYear, currentMonth, currentDay),
//maxDate: new Date((currentYear + 1), 12, 1),
onSelect: function (selectedDate) {
// Start Date
var startDate = $(this).datepicker('getDate');
//startDate.SetHours(0);
//startDate.setMinutes(0);
//startDate.setSeconds(0);
$('#todate').datepicker('option', 'minDate', startDate);
$('#todate').datepicker('setDate', startDate);
// End Date
var enddate = $(this).datepicker('getDate');
enddate.setDate(enddate.getDate() + 60);
// endDate.setMonth(endDate.getMonth() + 2);
$('#todate').datetimepicker('option', 'maxDate', enddate);
}
});
$('#todate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: '+30',
//maxDate: endDate.setMonth(endDate.getMonth() + 2)
});
$('#fromdate').on('click', function () {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
});
$("#todate").datepicker({
onSelect: function (dateText) {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
}
});
});
</script>

Use the onselect option to execute any JavaScript transformations
e.g.:
$(".datepicker").datepicker({
onSelect: function(dateText) {
// hide your divs
$('.mydivs').hide();
}
});
http://api.jqueryui.com/datepicker/#option-onSelect
working fiddle:
https://jsfiddle.net/7dy0wduc/

Jquery Datepicker - prevent select in range unavailable dates

I have 2 datepickers (From date, to date) or when a people arive at my hotel and when he leaves. What i want to achieve is not to let the user select a range that includes unavailable dates.
For example:
Today is 13.02.2015, a people want to reserve from 15.02.2015 to 23.02.2015 but the dates 19-02-2015, 20-02-2015 are already reserved. So i want to disable all the fields starting from 19.02.2015 meaning that he can select only from 15.02.2015 to 18.02.2015. It depends on what date he picks and he can book only to the first unavailable date, not next to that.
How can I achieve this?
This is my html code:
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
This is the javascript code
var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And here is my jsfiddle working example

Here you go...
I have created a function which convert string to Date
function compareDate(str1, sep){
var dt1 = parseInt(str1.split(sep)[0], 10);
var mon1 = parseInt(str1.split(sep)[1], 10);
var yr1 = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
Next I have created a function which gives the maxDate for #to Smartly.
function setMaxDate()
{
var date = $("#from").val();
for(var i=0; i<unavailableDates.length; i++)
{
if(compareDate(date, "/")<compareDate(unavailableDates[i], "-"))
return compareDate(unavailableDates[i], "-");
}
return null;
}
and doing some modifications in datepicker init
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
maxDate: setMaxDate(), // Added This
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
And it worked.. Here is the working jsFiddle

how to set minimum and maximum value of date picker in jquery?

I am using jquery date picker .I want to set max and minimum value of calendar ? how to set this value
Example minimum value is 1990 and maximum is 2050
$( "#inputBirthDate" ).datepicker({
changeMonth: true,
changeYear: true
});
<input class="span6 date_h nativedatepicker" id="inputBirthDate" type="text" style="pointer-event:none; width:240px;" readonly>

You need to use min-date and max-date option to set the min and max selectable date.
$("#inputBirthDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(2007, 1 - 1, 1),
maxDate: new Date(2012, 1 - 1, 1),
});

Try this
$("#inputBirthDate" ).datepicker( { minDate: -0, maxDate: new Date(2020, 1,18) });
Min Date
Max Date

Plz read the documentation before going to use it: Link
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});

try it..
<script>
$(function(){
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function() {
var date = $(this).datepicker('getDate');
if (date){
date.setDate(date.getDate() + 1);
$( "#to" ).datepicker( "option", "minDate", date );
}
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
$( "#from" ).datepicker( "option", "maxDate", date );
}
}
});
})

just use minDate / maxDate attribute like this:
$( "#datepicker" ).datepicker({
minDate: 'some value',
maxDate: 'some other value',
});

try :
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
minDate: new Date(1990-01-01),
maxDate: new Date(2050-01-01),
inline: true
});

this one worked for me, with date format
$( "#from_date" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function() {
var date = $(this).datepicker('getDate');
if (date){
date.setDate(date.getDate() + 1);
$( "#to_date" ).datepicker( "option", "minDate", date );
}
}
});
$( "#to_date" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function() {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
$( "#from_date" ).datepicker( "option", "maxDate", date );
}
}
});

jqueryui datepicker - maintain offset between two dates

I am using the jqueryui datepicker (http://jqueryui.com/datepicker/#date-range) to select a range for scheduling an event. I am attempting to maintain the offset between the two dates when the start date is changed. I was able to find a reasonable solution in another post (Add a day with selected date using Jquery datepicker) but I found that when you pick a date that is before the currently selected start date (Example: change the start date from 10/20/2013 to 10/13/2013) it returns the last date that was selected instead of the offset date.
<script>
$(document).ready(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var stDate = $( "#curStartDate" ).val().split('-');
var enDate = $( "#date_end" ).val().split('-');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(stDate[0],stDate[1],stDate[2]);
var secondDate = new Date(enDate[0],enDate[1],enDate[2]);
var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
if(!isNumber(diffDays)) {
diffDays = 0;
}
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

I figured out the issue. I had the minDate set for the #date_end value to the current value of the #date_start. So it was auto correcting the date selection to the latest available date that was the last selected date in #date_start. So to fix the issue I simply change the minDate before attempting to change the #date_end.
New Code:
<script>
$(function() {
$( "#date_start" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
onSelect: function( selectedDate ) {
var diffDays = daydiff(parseDate($('#curStartDate').val()), parseDate($('#date_end').val()));
if(!isNumber(diffDays)) diffDays = 0;
var date2 = $('#date_start').datepicker('getDate');
date2.setDate(date2.getDate()+diffDays);
$( "#date_end" ).datepicker( "option", "minDate", selectedDate );
$('#date_end').datepicker('setDate', date2);
$( "#curStartDate" ).val(selectedDate)
}
});
$( "#date_end" ).datepicker({
changeMonth: true,
numberOfMonths: 1,
dateFormat: "yy-mm-dd",
showOn: "both",
buttonImage: "images/smCal.gif",
buttonImageOnly: true,
constrainInput: true,
minDate:$( "#date_start" ).val()
});
$( "#curStartDate" ).val($( "#date_start" ).val());
});
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function parseDate(str) {
var mdy = str.split('-');
return new Date(mdy[0], mdy[1]-1, mdy[2]);
}
function daydiff(first, second) {
return (second-first)/(1000*60*60*24);
}
</script>

How can I ensure that a "to" date is always later than the "from" date? [duplicate]

This question already has answers here:
Jquery datepicker restrict dates in second date field based on selected date in first date field
(3 answers)
Closed 9 years ago.
In the "From" field, the user selects one date and in the "To" field, the date should not be less than "From" field date.
How can I achieve this?
<script type="text/javascript">
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
changeMonth:false,
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});
</script>
Here is my code (so far) in action: http://jsfiddle.net/Mounika_Garrepalli/8z2UH/

You can compare the dates by passing them to a function
var dt1_temp = date1.split("-");
var ctdt1 = new Date(dt1_temp[2],dt1_temp[1],dt1_temp[0]); // Y/m/d format
var dt2_temp = date2.split("-");
var ctdt2 = new Date(dt2_temp[2],dt2_temp[1],dt2_temp[0]);
Now we can compare the dates
if(ctdt1>ctdt2) {
alert("To date should not be equal or before the from date");
}

Here's the FIDDLE
$(document).ready(function () {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function (selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
$('#datepicker').change(function () {
checkDate($(this), $('#datepicker1'));
});
$('#datepicker1').change(function () {
checkDate($('#datepicker'), $(this));
});
});
function checkDate(date1, date2) {
if (date1.val() > date2.val()) {
alert('Error');
date2.val(date1.val());
}
}

You can use the minDate option:
$("#datepicker1").datepicker({
yearRange: "-0:+0",
//Set the initial minDate
minDate: $("#datepicker").datepicker("getDate"),
dateFormat: "dd - M - yy"
});
And then react:
$("#datepicker").on("change", function() {
$("#datepicker1").datepicker("option", "minDate", $(this).datepicker("getDate"));
});
http://jsfiddle.net/8z2UH/5/

Once try this
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker").change(function() {
datepicker1_mindate = $(this).datepicker('getDate');
datepicker1_mindate = new Date(datepicker1_mindate.getTime());
$("#datepicker1").datepicker("option", "minDate", datepicker1_mindate);
});
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy",
});
});

Try this:
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onSelect: function(selectedDate) {
$("#datepicker1").datepicker("option", "minDate", selectedDate);
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});