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()
});
Related
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!
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.
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));
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('/'));
}
});
Is there any jQuery datepicker plugin to display as Buddhist date?
Currently I use the jQuery UI datepicker to display it, but it's not actually I want. Here is the code:
$(document).ready( function() {
$("#datepicker").datepicker( {
appendText: ' yyyy-mm-dd',
autoSize: true,
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
showOn: 'both',
onSelect: function(dateText, inst) {
year = dateText.substring(0, 4);
month = dateText.substring(5, 7);
day = dateText.substring(8);
_year = parseInt(year) + 543 + '';
$(this).val(_year + '-' + month + '-' + day);
},
beforeShow: function(input, inst) {
year = input.value.substring(0, 4);
month = input.value.substring(5, 7);
day = input.value.substring(8);
_year = parseInt(year) - 543 + '';
$(this).datepicker("setDate", new Date(_year, month - 1, day, 0, 0, 0, 0));
}
});
});
What I want is when #datepicker has no value, the calendar pop up is displaying the current date + 543 years. When #datepicker has a value, the calendar pop up is displaying the date in the #datepicker value.
The problem is when the selected year is a leap year, for example, 2008-02-29 AD is valid but we can't display 2551-02-29 (Buddhist date) (which is the same date) on that pop up.
Update 2010-07-30
According to Add support for Thai year format in datepicker module and Datepicker: Support non-Gregorian calendars it seems they plan to create support for non-Gregorian calendars.
Currently I try to use the plugin jQuery Calendars by Keith Wood.
You can find my modified version of jQuery DatePicker here:
http://www.anassirk.com/articles/1
The blog is in Thai so I'll briefly explain it below:
Download the plugin here:
http://www.anassirk.com/files/DatePicker.zip
The usage is quite similar to the standard jQuery DatePicker with one extra boolean option named "isBuddhist" which you can set it to true to render the Buddhist calendar.
$("#datepicker-th").datepicker({ dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay });
important: in Buddhist mode you have to set the "defaultDate" option to a date string of the format specified in the "dateFormat" option. Like '19/3/2554' for 'dd/mm/yy'
Cheers!
I've created plugins for jQuery UI datepicker to make it support the Buddhist Era format.
More details in jQuery UI datepicker extension for the Buddhist era