I want to disable dates before today.(i.e. say today's date is 04Oct17 and I would like all the dates before this disabled but still enabling user to go to previous months, years, etc.)
$(document).ready(function () {
var date_input = $('input[name="date"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
})
In your datepicker options add minDate
var dateToday = new Date(); // Today's Date.
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
minDate:dateToday // <--- this will disable all date less then dateToday
};
date_input.datepicker(options);
Related
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 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!
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