I'm using the range date-picker of jQuery UI. When selecting the "from date", I want to open automatically the "to date" date-picker. So, I call the .datepicker("show"). The "to date" picker is showing for a second and immediately fade away. Surprisingly, if I go to another application and then come back and focus on the browser window, the "to date" picker is shown.
I also tried to add the $('#toDate').focus(); but it didn't help.
$( ".fromDatePicker" ).datepicker({
defaultDate: "+1w",
dateFormat: 'dd/mm/yy',
altFormat: 'yymmdd',
altField: "#fromDateFormatted",
numberOfMonths: 2,
showOn: "both",
buttonImage: "images/calender_icon_a1.jpg",
buttonText: "open calendar",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
$('#toDate').datepicker("show");
//$('#toDate').focus(); //commented cause it's not working
}
});
The reason for the flashing appearance is because show would be called before minDate finishes. This would confuse datepicker when triggering beforeShowDay event just before showing the picker.
One somewhat hacky workaround is to delay the call to show the datepicker. For example, something like the following would work:
onSelect: function( selectedDate ) {
$('#toDate').datepicker( "option", "minDate", selectedDate );
setTimeout(function() { $('#toDate').datepicker("show") }, 50);
}
See this in action: http://jsfiddle.net/william/PVuTC/2/.
Related
$('#altdate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_datetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altenddate" ).datetimepicker( "option", "minDate", selectedDate );
if (selectedDate < ($.datepicker.formatDate('yy-mm-dd', new Date())) ) {
start_in_past = true;
}
}
});
$('#altenddate').datetimepicker({
timeFormat: 'hh:mm:ss',
dateFormat: 'yy-mm-dd',
altField: "#Event_enddatetime",
altFormat: "yy-mm-dd",
altTimeFormat: 'hh:mm:ss',
altFieldTimeOnly: false,
onClose: function( selectedDate ) {
//alert(selectedDate);
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
}
});
The #Event_datetime field correctly gets filled with the value "2012-12-23 13:00:00" when I leave the datetimepicker field; however, when I close the enddate one, the line
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
only sets "2012-12-23" on the field! using "maxDateTime" as option also does not work, getting maxDateTime.getFullYear is not a function.
How to set the maxDate(Time) with the full string as requested by the client:
yy-mm-dd hh:mm:ss
So the problem really is that setting the "maxDate" option, the actual hidden field #Event_datetime gets reset to without time - no idea why.
So I solved it by saving temporarily the #Event_datetime variable before calling to set maxDate and resetting it again...
var current = $('#Event_datetime').val();
$( "#altdate" ).datetimepicker( "option", "maxDate", selectedDate );
$('#Event_datetime').val(current);
I had the same problem as you, only without using an alt field. Your solution worked for me as well, though I had to code it slightly differently.
var current = $("#startDate").datetimepicker("getDate");
$("#startDate").datetimepicker( "option", "maxDate", selectedDate );
$("#startDate").datetimepicker( "setDate", current);
(I realize I could have posted this as a comment, but I needed to format the code sample.)
I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: newDate
})
}
});
But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!
I just wanna the minDate of the second one will change as long as the selected date of the first one change.
You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.
http://jqueryui.com/demos/datepicker/#option-minDate
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
Full code:
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: 0
});
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
}
});
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
You can update secodn datepicker's mindate with following code :
$( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
$("#rdate").datepicker("option", "minDate", selectedDate);
},
minDate: 'today'
});
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
minDate: 'today'
});
I have multiple datepickers in one page.
I user class name to set the option for things like appears.
$('.datepickers').datepicker({
dateFormat: "yy-mm-dd",
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
showWeek: true
});
Then, I want to set onSelect event for two of them.
$('#to').datepicker({
onSelect: function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
}
});
Similar onSelect event setting for others.
However, this would not work. Any suggestion for how to fix this, besides setting all options individually by id?
did you try the following syntax? You don't want to _init the datepicker widget again. You just want to change an option. This is the way to do that with jquery ui widgets.
$('#to').datepicker('option', 'onSelect', function(selectedDate) {
$('#from').datepicker("option", "minDate", selectedDate);
});
i created a functional demo here to show a possible solution:
click for the jsfiddle
you don't have to create multiple datepicker methods. just use the "onSelect" method to:
test whether the current datepicker has "#to"
if so, use the "dateText" value from this datepicker to intialize the "#from" datepicker
use the current "inst" value to traverse the dom to the "#from" datepicker and set it's value.
these were the key lines:
onSelect: function(dateText, inst) {
if(inst.id === 'to'){
$('.datepickers').filter($('input#from')).datepicker("option", "minDate", dateText);
}
}
I´m trying to add some functionality to a form with JQuery UI´s Datepicker.
1. when i select a date in the start date picker it should show the next date in end datepicker.
2. when i select the end date as less than startdate it should show the previous date of enddate and show a start datepicker.
I have clear button in the datepicker when i click on the clear button in start datepicker it open the end datepicker. I do not want like this. I want to open the end date picker by selecting the date on start date
$( "#start").datepicker({
minDate: new Date(currentYear, currentMonth, currentDate),
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(addclearbutton, 1 );
},
beforeShowDay: highlightDays,
onChangeMonthYear: function( input ) {
setTimeout(addclearbutton, 1 );
},
onSelect: function (dateStr,input) {
daterangevalidation(dateStr,input);
},
onClose:function() {
$("#end").datepicker('show');
}
});
$( "#end").datepicker({
minDate: new Date(currentYear, currentMonth, currentDate),
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(addclearbutton, 1 );
},
beforeShowDay: highlightDays,
onChangeMonthYear: function( input ) {
setTimeout(addclearbutton, 1 );
},
onSelect: function (dateStr,input) {
daterangevalidation(dateStr,input);
}
});
I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});
Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line
try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());
$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});
From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.
Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});
Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>
Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.
$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}
Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});