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;
}
Related
I am trying to open a datepicker that only allows months to be chosen, so I am trying to use the minViewMode option but it is not working. It allows me to view the days of each month.
$("#datepicker").datepicker({
format: "mm-yyyy",
minViewMode: 1,
changeMonth: true,
changeYear: true
});
This produces the below datepicker:
I am aiming for something similar to the following:
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
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..
How do we prevent the datepicker from picking a date in the past?
I used the following:
$("#Date").datepicker({ minDate: '0' });
$("#Date").datepicker({ minDate: new Date() });
but I can still select a date in the past.
aparently this is the way
$("#datepicker").datepicker({ minDate: 0 });
remove the quotes from the 0
Have you tried using the mindate and maxdate parameters?
JSFiddle here.
Take a look at the documentation and have a play with it.
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