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 in mindate and maxdate

I have this date time picker from jquery . here is my code. it's not working after adding some code for month and year only.
the problem is after selecting on the 2nd input. the first input disappears.. then also. make the validation of min and maxdate (e.g first input --- 5/2014 - 6/2014 the validation there is on the second input you can't select months before month of may.
$(function() {
$( "#dtp1" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
$(function() {
$( "#dtp2" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function( selectedDate, dateText, inst ) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
$( "#dtp1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
here is the link http://jsfiddle.net/wind_chime18/RUmCg/2/

I have done your validation for 2nd date picker you can copy it for 1st datepicker.
Check link
js fiddle link
//Php code
<input type="text" id="dtp1">
<input type="text" id="dtp2">
<!--<input type="text" id="dtp2" disabled>-->
//Javascript COde
$(function () {
$("#dtp1").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
//$( "#dtp2" ).datepicker( "option", "minDate", selectedDate );
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
//$("#dtp2").removeAttr('disabled');
}
});
});
$(function () {
$("#dtp2").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
onClose: function (selectedDate, dateText, inst) {
if($("#dtp1").val() == "") {
alert("Please select dpt1");
return false;
}
else {
var dtp1 = $("#dtp1").val();
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
var d1, d2;
d2 = (year *1 ) + ((month *1)/ 12);
d1 = (dtp1.split('/')[1] *1 ) + ((dtp1.split('/')[0] *1)/ 12);
if(d1 > d2) {
alert("dpt1 is greater then dpt2");
return false;
}
else {
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
}
});
});

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"
});
});