jquery UI - datepicker - setting a second one based on selection from first - javascript

Using jQuery 1.9.1 & jQuery-ui 1.10.3. I have a page that will have 2 datepickers on it. They will be used as a filter in selecting from a SQL table. I'm reading a table row that has in it the min and max dates on the table.
datepicker1 is the start date, datepicker2 is the end date. Using the min and max above, the calendar should begin in datepicker1 with that date as the default, and datepicker2 should have max as the most recent selectable date. Those 2 dates serve as a hard beginning & end to the selectable dates on my calendar. No date though has been set in the input box for either date.
What I need to do is that once the user makes a selection (in either of the datepicker controls), to enforce rules on the other datepicker based on that selection, but only if the other datepicker hasn't already been selected.
Once a date has been selected from one, the other (unselected) datepicker would have a pre-determined window of 14 days from the selected one (>= if datepicker1 was selected first, <= if datepicker2 was selected first) as its max (or min) date. For example:
Page loads, and minDate of 2012-12-10 & maxDate of 2013-10-22 is
returned from query. datepicker1 has the 12/10 date as it's
"beginning" (farthest day back that can be selected). datepicker2
has 10/22/2013 date as its "end" (newest day that can be selected).
User clicks on calendar control in datepicker1 and selects
2013-02-14.
Now, datepicker2 would re-calculate its new maxDate, to
be 14 days after 2013-02-14.
User then can select any date >= 2013-02-14 through 2013-02-28 as
an end date.
Process would be reversed if datepicker2 was selected first.
The options on each datepicker are pretty much the same for both:
$(function(){
$("#datepicker1").datepicker({
dateFormat: "yy-mm-dd",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
changeMonth: true,
changeYear: true,
buttonImage: "calendar-blue.png",
buttonImageOnly: true,
buttonText: "Choose Start Date",
showOn: "both",
numberOfMonths: 1,
beforeShow: function(input, inst) {
$(".ui-datepicker").addClass("resizeDP");
},
onClose: function(selectedDate) {
$(".ui-datepicker").removeClass("resizeDP");
}
});
});
I can enforce the max and min dates on the calendars when the page is loaded, but can't make the "new" 14 day one apply when it is selected. I've tried several different ways (mostly in the onClose) but can't make any of them work.

Have you tried something like this?
$("#datepicker2").click(function(){
if($("#datepicker1").val() != ""){
$(this).datepicker("destroy");
$(this).datepicker({
//initialize datepicker2 based on datepicker1 value
});
$(this).datepicker("show");
}
});
And vice versa.
Note i'm not sure if the date picker opens up before the on click event. But you could always do it on the mouse down or even blur event of Datepicker1 to set Datepicker2 etc..

Related

Show only past years with bootstrap datetimepicker

I have Bootstrap 3 Datepicker input for selection of a birth day. I found a great feature viewMode: 'years', when selection dialog starts from years, but Datapicker shows years from -5 to +5 from current, obviously nobody still was born in the future, so I restricted dates by maxDate: moment(), but future years are still shown though are disabled, moreover - this added initial value of current day to the input, and defaultDate: false doesn't fix this!
So, at least I could set maxDate as today-5 years to avoid future years, but it would set current value which is undesired.
ADDED: future years still shown, still looking for method to avoid them.
How could I restrict dates and avoid initial value in the same time?
https://codepen.io/zzmaster/pen/KQmdrJ
$(document).ready(function(){
$('#datetimepicker4').datetimepicker({
format: 'DD-MMM-YYYY',
viewMode: 'years',
maxDate: moment(),
defaultDate: false
});
});
$(document).ready(function(){
$('#datetimepicker4').datetimepicker({
format: 'DD-MMM-YYYY',
viewMode: 'years',
maxDate: moment(),
useCurrent: false
});
});
Credit: NiK648
Unfortunately there is not solution to prevent picker from showing future years, the workaround is to hide them:
#datetimepicker .disabled {
display: none;
}

Datepicker jquery - How to skip next 5 days

I create delivery order, when user select the date
Don't show next 5 days & Weekends
Here is code for don't show Weekends, how to hide next 5 days?
<script>
jQuery(function() {
jQuery("#date").datepicker( {
minDate: +1,
maxDate: '+2M',
beforeShowDay: jQuery.datepicker.noWeekends
});
});
minDate: "+6D", will hide the next 5 days from the current date. It does take into account weekends already being hidden though, I don't believe. If that is your desired outcome, this gets a whole lot deeper.
Min/Max Date Docs

Updating jQuery Datepicker restricted dates when a button is clicked

Is there a simple way to update a jQuery Datepicker when a button is clicked? The datepicker is displayed inline, and I would like it to always be visible.
The logic flow behind this is that the user would check off certain dates and click the 'Done' button, which would update the datepicker to restrick the dates they selected.
The code below just creates the datepicker when the program opens. Should I just create a new datepicker with the restricted dates every time the user clicks the 'Done' button?
$( "#calenderDiv" ).datepicker({
minDate: 0,
onSelect: function(dateText, obj){
$('#A12').val(dateText);
},
beforeShowDay: function(date) {
var day = date.getDay();
return [(day == 0)];
}
});
The jQueryUI documentation states that
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.
Is your #calenderDiv indeed a div or a span?
Edit
Save the selected date in a variable, and inside beforeShowDay you check if the date in the calender that is currently being added has the same weekday as the selected day.
You would then end up with the following code:
var curDate;
$("#calenderDiv").datepicker({
minDate:0,
onSelect:function(dateText, obj) {
$("#A12").val(dateText);
curDate = new Date($(this).val());
$(this).datepicker("refresh");
},
beforeShowDay:function(date){
return [(typeof curDate === 'undefined' || day != curDate.getDay())];
}
});
Alternatively, if you want to have multiple days crossed out, use an array instead, push the selected weekdays onto it and later check inside beforeShowDay if the date is in the array.

Display specific month on datepicker without changing selected date

i'm using two datepickers to select range of dates, and I have the following problem:
When i select "start date" on datepicker I, I update minDate on the second one (analogously when selecting "end date" I update maxDate on the first one).
The problem is, that updating maxDate or minDate causes refreshing of datepicker.
So, for example if someone was browsing months on datepicker II and then selects some date on datepicker I then datepicker II will refresh and display goes back to last selected date on datepicker II, instead of staying at month user was browsing.
I already know the way to find out which month was last displayed on datepicker - by using "onChangeMonthYear" option.
The question is how to force datepicker to navigate to month I want (without actually changing selected date).
I'd really appreciate any help or suggestions.
Code, as requested. I'm using AngularJS, but I guess you can easily see how this would be translated into JQuery:
scope.fromDate.onChangeMonthYear = function(year, month){
//saving info about date I
};
scope.toDate.onChangeMonthYear = function(year, month){
//saving info about date II
};
scope.fromDate.onSelect = function(selectedDate) {
element.find(".date-to").datepicker("option", "minDate", selectedDate);
};
scope.toDate.onSelect = function(selectedDate) {
element.find(".date-from").datepicker("option", "maxDate", selectedDate);
};
according to jquery ui datepicker api reference:
// getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
// setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
this should be used after the initialization, without reseting the datepicker

jquery datepicker year range default

Having a bit of an issue with the JQuery datePicker, I suspect it's just the matter of a setting I've overlooked or got wrong.
If you look at this simple fiddle: JS Fiddle
You'll see I've set the year range, so that the by default when you click on the input it will open it up on 1994, but if you then click on any of those dates, e.g. 3rd Sept, it'll actually put it in the input as 2012 still, rather than the year that is selected in the drop down menu.
How can I make it so that it uses the correct year without having to change the drop down and then change it back again?
Cheers.
As others have suggested, you have to set the defaultDate. However, unlike the other solutions, you don't want to hardcode the date since your dropdown list will be updating as the years pass since you're doing a relative list.
Try this instead...
function loadDatePicker() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
defaultDate:"-18y-m-d" // Relative year/month/day
});
}
Weird, but adding defaultDate:"1994-01-01" to the datepicker options seems to fix it.
Fiddle
I think I got the reason..
It is because yearRange: just restrict the range in dropdown menu only.
It just change the list nothing else.
They mansion this over here..
http://jqueryui.com/demos/datepicker/#option-yearRange
[Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.]
To Prove this .. set date picker as below and you will find all date disable.
because it sawing us the calander of 2012 not 1994
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
maxDate: new Date(2012,1-1,1)
});
To fix it you have to use defaultDate as well as minDate and maxDate
i hope i am clear

Categories