Develop Reference

How to enable year Before/After Specific year in Datepicker

I am showing only year in calender view using datepicker.
But I want to set maximum year range to current year and minimum year range to 1900 and disable year before/after range I want to set in Datepicker like the below image.
Here is my javascript code:
$("#datepicker").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
autoclose: true,
changeYear: true,
yearRange: '1900:' + new Date().getFullYear()
});
But year range is not working for me. Any help will be highly appreciated.
Thanks!

edit - different approach
try using the minDate and maxDate attributes:
let cur_year = (new Date).getFullYear();
$( "#datepicker" ).datepicker({
minDate: new Date(1900, 0, 1),
maxDate: new Date(cur_year, 11, 31)
});
you should convert the date back to string after you get the current year,
currently, you are trying to add a date to a string (that's not possible)
so it should look something like that:
$("#datepicker").datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
autoclose: true,
changeYear: true,
yearRange: '1900:' + new Date().getFullYear().toString()
});

How to disable range of time in Kendo datetime picker javascript

How to rage of time in kendo datetime picker exapmle:
disable time range 03.01.2019 10:00am - 03.01.2019 10:30am
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy HH:mm",
interval: 5,
timeFormat: "HH:mm",
min: new Date(yyyy, mm - 1, dd + 1, HH, MM, 0),
disableDates:[]
});

you might consider using DatePicker instead of DateTimePicker
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy"
});
});
Hope it helps!

Jquery datepicker display all days of month for a year

I'm using jquery datepicker on a textbox to enter user birth date.For validation purposes I set max year to be "-16Y" of the current year, for min year I set year range to yearRange: '1920:c'. The problem is when I display it in the browser datepicker doesn't show all days of the max year (which is 1999). I think jquery set it to the maximum day of the current day (6th of August).So to work around this problem?
Here is my code for the datepicker:
$("#YearOFBirth").datepicker({
maxDate: "-16Y",
//showOn: "both",
// buttonImage: "",
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
yearRange: '1920:c'
}).keydown(function (e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$(e.target).val("");
} else {
e.preventDefault();
return false;
}
});
As you can see here in this image all days after 6th is disabled which isn't correct for year 1999
Note: I made a search for this but I found nothing. I don't even know how to ask this question properly

Calculate the maxDate yourself:
var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
And then give the maxDate to your datePicker. Like this you have all days available of the year which was 16 years before now. As the last day of the year is ALWAYS YYYY-12-31, it's not bad practice to hardcode it.

jquery UI date time picker [duplicate]

This question already has an answer here:
jQuery datepicker change with maxDate range
(1 answer)
Closed 7 years ago.
I am using this jquery ui date time picker http://trentrichardson.com/examples/timepicker/
For two date time pickers where the first one gets the From date (the start of a date range) and the other gets the to date (the end of a date range). Code example Below:
var getTimeLapseFromTimestamp= $('#from');
getTimeLapseFromTimestamp.datetimepicker({
timeFormat: 'HH:mm:ss',
stepHour: 1,
stepMinute: 10,
stepSecond: 10,
showSecond: false,
showButtonPanel: false,
changeYear: true,
changeMonth: true,
onSelect: function(date) {
},
numberOfMonths: 1
});
and
var getTimeLapseToTimestamp = $('#to');
getTimeLapseToTimestamp .datetimepicker({
timeFormat: 'HH:mm:ss',
stepHour: 1,
stepMinute: 10,
stepSecond: 10,
showSecond: false,
showButtonPanel: false,
changeYear: true,
changeMonth: true,
onSelect: function(date) {
},
numberOfMonths: 1
});
What I would like is to that when a date is selected in the From datetime picker, the maxDate and MinDate properties of the To datetime picker are adjusted using the onSelect function so that the user cannot select a date range more than 3 months of the From timestamp. Anyone with some ideas, i have had trouble with this sadly.

You can insert the following in your onselect key,
$('#date').datepicker('option', 'maxDate', new Date(startDate.getMonth() + 3));

Work around the jQuery-ui Date-Range Bug?

I been using jquery-ui for my project, lately i found there is a bug in datepicker widget that doesn't take selected date if the date-range is not the current year. take a look at this example . But if you change the year and select some date it takes the correct value. I know there is BUG ticket in jquery they'll solve on next version v.1.11 bcoz jquery ui is big js i am little paranoid to go into the file and modify it. Is there hack or possible solution that i can use now
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true
});

A hackish workaround is to explicitly set the defaultDate to the one which is shown by the datepicker when it is opened; or to some other reasonable default value:
var defaultDate = new Date();
defaultDate.setHours(0, 0, 0, 0);
defaultDate.setYear(defaultDate.getYear() - 100);
console.log(defaultDate); // current month, current date, current year - 100
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true,
defaultDate: defaultDate
});
Demo here

Check this works
FIDDLE DEMO
$('#test').datepicker({
yearRange: '-100:-18',
changeMonth: true,
changeYear: true,
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var selectedYear = d.setFullYear(parseInt($('.ui-datepicker-year :selected').text())); // selected year
$('#test').val([d.getMonth()+1, d.getDate(), d.getFullYear()].join('/'));
}
});