I am using jquery date time picker and using start date and end date.
When selecting same date for start date and end date I do not want it to allow the end date time to be less than start date time. How would I adjust my code?
$( "#fdate" ).datetimepicker({
dateFormat: 'yy-mm-dd',timeFormat: 'HH:mm:ss',
onClose: function( selectedDate ) {
$( "#tdate" ).datetimepicker( "option", "minDate", selectedDate );
}
}).attr('readonly', 'readonly');
$( "#tdate" ).datetimepicker({dateFormat: 'yy-mm-dd',timeFormat: 'HH:mm:ss',
onClose: function( selectedDate ) {
$( "#fdate" ).datetimepicker( "option", "maxDate", selectedDate );
}
}).attr('readonly', 'readonly');
});
here fdate is start date and tdate is end date and here is Fiddle of the issue
You need to use the 'setOptions' method for each timepicker:
$(document).ready(function(){
$("#fdate" ).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm:ss',
onShow: function () {
this.setOptions({
maxDate:$('#tdate').val()?$('#tdate').val():false,
maxTime:$('#tdate').val()?$('#tdate').val():false
});
}
}).attr('readonly', 'readonly');
$( "#tdate" ).datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm:ss',
onShow: function () {
this.setOptions({
minDate:$('#fdate').val()?$('#fdate').val():false,
minTime:$('#fdate').val()?$('#fdate').val():false
});
}
}).attr('readonly', 'readonly');
Here is the Modified Fiddle.
This is not perfect, but it will get you close, you may need to handle some of the formatting. I used the 'onShow' event, but you could easily do it in the onClose, as well. There is a small sample on their official page called Range between date#.
Related
How I can change the end date when the user selects the start time? I want to disable the days before the start time. It's homework, but I am new to jquery.
Thanks. Here is the code i managed to work, but i don't know what to change.
<script>
$(document).ready(function() {
$('#start').val(moment(start).format('YYYY-MM-DD'));
$('#end').val(moment().add(+1, 'days').format('YYYY-MM-DD'));
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#checkAllEdit").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#start, #end").datepicker('setDate', new Date());
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
THE WORKING VERSION:
$('body').on('focus', ".dpicker", function () {
$(this).datepicker();
});
$(function () {
$("#start").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate, instance) {
if (selectedDate != '') {
$("#end").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setMonth(date.getMonth() + 3);
var minDate2 = new Date(selectedDate);
minDate2.setDate(minDate2.getDate() + 1);
$("#end").datepicker("option", "minDate", minDate2);
$("#end").datepicker("option", "maxDate", date);
}
}
});
$("#end").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate) {
$("#star").datepicker("option", "maxDate", selectedDate);
}
});
});
you can try to add minDate: 0 to set min date today
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0 /* This will be today */
});
If you want to add minDate to some other day you can just use
new Date(2007, 1 - 1, 1) for example
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(2007, 1 - 1, 1)
});
EDIT to answer comment:
If you want to set end date, then you can use setDate
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
setDate: new Date(2016,10,03)
});
And it seems like you want end date to be 1 day after start date, then take start date value
var startDate = $('#start').datepicker('getDate') + 1; /* Get start date and add one day */
$('#end').datepicker({
dateFormat: 'yy-mm-dd',
setDate: startDate
});
For further reading: https://api.jqueryui.com/datepicker/#option-minDate
I'm using two jQuery datepickers, with disabled dates based on a generated array. When I put the $("#date") datepickers after the $('input') one, that works fine. However, I also need a mindate set to today, and a maxDate set to 1 year after that; it works when the order is the other way around. How can I manage to make them both work?
$(function() {
var array=[]; //disabled dates for the beforeShowDay go here
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
}
});
$( "#date" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
dateFormat: 'yy-mm-dd',
});
});
I would not try to apply two selectors ('input' and '#date') on the same DOM element because the second can override what the first configured. If you would like that both datepickers share the same beforeShowDay function you can declare it once and assign it to each datepicker.
It is not totally clear to me what you want to achieve. But maybe the following approach with a common beforeShowDay function could help. In any case the example below will show you how to insert a JSFiddle including datepicker into your question to clarify what you want.
$(function() {
var array=['2016-12-08']; //disabled dates for the beforeShowDay go here
var beforeShowDay = function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [$.inArray(string, array) == -1];
};
$( "#date" ).datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd',
minDate: new Date(),
maxDate: '+1y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#date1").datepicker( "option", "minDate", endDate );
$("#date1").datepicker( "option", "maxDate", '+1y' );
}
});
$("#date1").datepicker({
beforeShowDay: beforeShowDay,
dateFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="date">
<input id="date1">
I am very new to jquery. I made two jquery calendar. One is the departure and another one is the arrival calendar. When the user selects the date in first calendar ( departure ) , the next calendar should hide all the dates before departure date. Example : if the user selects Jan 13 in the departure calendar, the arrival calendar should automatically hide all the dates before Jan 13. How can I achieve this. My calendar code is below.
jQuery("#datepickerarr").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "both",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
minDate:0,
maxDate: '+3M',
numberOfMonths:2,
buttonText:"click here to expand the calendar"
});
jQuery("#datepickerdepone").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "both",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
minDate:0,
maxDate: '+3M',
numberOfMonths:2,
buttonText:"click here to expand the calendar",
});
You can use minDate in your departure script on onClose departure date selection popup
onClose: function( selectedDate ) {
$( "#datepickerarr" ).datepicker( "option", "minDate", selectedDate );
}
See:
http://jqueryui.com/datepicker/#date-range
on select of departure datepicker you can add:
onSelect: function (dateText, inst) {
jQuery("#datepickerdepone").datepicker('option', "minDate", dateText);
}
Here JSFiddle for the same
But you need to check another scenario where user change departure date
This question already has answers here:
jQuery datepicker- 2 inputs/textboxes and restricting range
(8 answers)
Closed 9 years ago.
I have two date pickers (arrival date and depart date) the user selects an arrival date and then, when the user selects a depart date it must disable (or grey out) all previous dates from which the arrival date has been chosen, i.e if arrival date is 4th July 2013, user can only select a depart date from 4th July 2013 and onwards.
I have used the following code to no success:
<script>
jQuery(function($){
$( "#input_2_5" ).datepicker({
onClose: function( selectedDate ) {
$( "#input_2_6" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#input_2_6" ).datepicker({
onClose: function( selectedDate ) {
$( "#input_2_5" ).datepicker( "option", "maxDate", selectedDate );
}
});
</script>
You'd normally do that like so :
$("#from_date").datepicker({
minDate : 0,
onSelect: function() {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate());
$("#to_date").datepicker( "option", "minDate", minDate);
}
});
$("#to_date").datepicker({
minDate: 0
});
FIDDLE
Please take a look at http://jsfiddle.net/4bML8/
Everything is working fine (i think) except the fact that the datepicker doesn't disappear when I pick a date. Can anyone tell me what is causing this?
You never declared the variable dates but you used it. Create a variable dates and check this code
var dates = $('#d_date, #a_date').datepicker({
numberOfMonths: 1,
minDate: +1,
dateFormat: 'd / m / yy',
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
If you want the datepicker to close after it enters a date, you need to tell it to move focus out of the current field. I do it this way:
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
firstDay: 1,
changeMonth:true,
changeYear: true,
onClose: function(dateText, inst) {
$(this).focus(); //set focus and then move to next field so validator will fire
$(this).focusNextInputField(); //causes datepicker to close
}
});