How to set the year using Materialize calendar? I'm aiming to have a range from 1990 up to current year.
This is the code I'm using
function bindDatePicker(){
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 50,
format: 'yyyy-mm-dd'
});
}
The range it showing is 1991 to 2041. How to set it to 1990 to 2016(curyear).
function bindDatePicker(){
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 50,
format: 'yyyy-mm-dd',
min: new Date(1990,1,1),
max: true // `true` sets it to today. `false` removes any limits.
});
}
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 have used zebra datepicker weekly calendar. My week starts from monday to sunday. I wanna enable the dates only when the week is complete. So only when sunday(24 Aug 2014) ends date 18(Monday) have to be enable. Below is my zebra weekly calendar code.
$(function () {
$(‘#weekdatepicker’).Zebra_DatePicker({
format: ‘m-d-Y’,
direction: -1,
first_day_of_week: 1,
disabled_dates: [''],
enabled_dates: ['* * * 1'],
show_other_months: true,
select_other_months: true,
onSelect: function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
Kindly tell me solution. Thanks in advance
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