We Keep Coding

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

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.

Add Day Before Cut Off Time To jquery.ui.datepicker

What I Have
In jquery.ui.datepicker I have changed the value minDate to +1 so todays date or any historical date cannot be selected.
All good so far.....However.....
What I Want
I want to stop anyone selecting tomorrows date after 8pm today, so, after 8pm tomorrows date should no longer be available for selection.
I cannot see an option to do this in the default values or any of the examples on the datePicker website.
What is the best or easiest way I can achieve this?
Thanks in advance of a hopefully good suggestion

Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.
You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.
So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
}
Here is the working demo.
P.S
I haven't tried this yet but you should look into this
DateTimePicker plugin
if you want a more subtle approach

jQuery: retrieve datepicker date, check if inside date range, display/hide fields

I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)

You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});

The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});

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

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..