How to overwrite datetimepicker enabledHours after initial load? - javascript

On page load I initialized datetimepicker to this:
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: someDate,
minDate: curentDate,
enabledHours: HoursArray(CurrentDayOpenTime, CurrentDayCloseTime)
});
but on new date selection I want to update/overwrite enabledHours (because on new date enabledHours are different) using below function.
$(document).on('dp.change', manipulateTime);
//function////
function manipulateTime(td){
if (!td.date.isSame(td.oldDate, "day")) {
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: SomeCloseDate,
minDate: SelectedDayOpenTime,
enabledHours: HoursArray(SelectedDayOpenTime, SelectedDayCloseTime)
});
}
}
I couldn't able to overwrite the previous enabledHours. It always shows enabled hours which is generated on page load.
Can someone help me on this?

You can try the below code to change enabledHours:
$(document).on('dp.change', manipulateTime);
function manipulateTime(td){
//Your code....
$('#txtdate').data('DateTimePicker').enabledHours([21,22,23]); //change the array of enabled hours here
}

Related

How to disable previous date on edit using datetime picker

I am using date time picker.on edit page the selected value is not displaying.
when I check the code element, I am seeing the result in value attribute.
my code is
$('#id').datetimepicker({
format: 'DD/MM/YYYY',
minDate:moment().millisecond(0).second(0).minute(0).hour(0),
ignoreReadonly: true,
useCurrent: false
});
Any idea?
Try this:
$('#id').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date(), // Or try minDate: 0
ignoreReadonly: true,
useCurrent: false
});
You may check this answer too.

JQUI datepicker changing month or year resets after selecting

I'm experiencing an issue using the JQUI datepicker where I have a from and to text field. Picking a from date, auto selects the next field using the onClose function.
When trying to change the month or year from the drop down boxes in the to text field the datepicker popup gets reset and the user has to re-select the month or year. This only appears to happen on the to field.
Am I doing something wrong in the code to cause this behaviour? I've noticed this in Chrome and Firefox on Windows.
JS FIDDLE DEMO
CODE
$('#sfd_start').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+2y",
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
$('#sfd_end').focus();
}
});
$('#sfd_end').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: "+2y"
});
EDIT: There doesn't seem to be an issue if the datepicker is not auto opened after selecting a from date if that helps narrow it down.
Seems to be a timing issue. Change your onClose function to:
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
setTimeout(function () {
$('#sfd_end').focus();
}, 100);
}
jsFiddle example

Jquery function not working on the first click

i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.
DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.
Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc
You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});

jquery datepicker daterange, specify start year

I'm using the date range with jquerydate picker.
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("form").validationEngine();
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75'
});
});
</script>
The problem is then that the drop down box starts at 1936, where as I would like it to start at the other end of the scale. Can anyone help
You can use the defaultDate option: http://jqueryui.com/demos/datepicker/#option-defaultDate
jQuery(document).ready(function() {
// binds form submission and fields to the validation engine
// jQuery("form").validationEngine();
var myDate = new Date("March 21, 1997");
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75',
defaultDate: myDate
});
});
See on this jsfiddle

jQueryUI datepicker - second instance flashes then disappears when show() is called

I have two jQueryUI datepickers on my page.
They're initialised as below:
jQuery("#departureDate").datepicker({
beforeShow: function() {
getDatesForCalendar("outbound");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show"); }
});
jQuery("#returnDate").datepicker({
beforeShow: function() {
getDatesForCalendar("return");
},
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});
Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.
My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn't appear to affect IE8.
I've tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker("show") I've tried calling focus() on the field it's tied to. Nothing has worked!
Any advice would be greatly appreciated.
Many thanks,
Jack
Instead of showing the datepicker in the onSelect use the onClose event.
jQuery("#departureDate").datepicker({
numberOfMonths: 3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
hideIfNoPrevNext: true,
onClose:function()
{
jQuery('#returnDate').datepicker('show');
}
});
jQuery("#returnDate").datepicker({
numberOfMonths:3,
constrainInput: true,
dateFormat: 'dd/mm/yy',
showButtonPanel: false,
showOn: "focus",
hideIfNoPrevNext: true,
defaultDate: +1
});​
Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)
http://jsfiddle.net/6haqv/3/
Possible bug in jquery ui 1.8
I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.
As work around to this problem I tried following and it works.
var checkin = $('#dpd1').datepicker({
minDate:now,
numberOfMonths:2,
showOn: "button",
buttonImage: "img/calender.png",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
var dateObject=new Date(selectedDate);
dateObject.setDate(dateObject.getDate()+1);
$( "#dpd2" ).datepicker( "option", "minDate", dateObject );
showSecond=true;
},
onClose: function( selectedDate ) {
if(showSecond===true){
$( "#dpd2" ).datepicker("show");
showSecond=false;
}
}
});
I just got the same bug in jQuery UI 1.11.0.
I found a workaround by calling a setTimeout in the onSelect datepicker method:
$('#arrival-date, #departure-date').datepicker({
showAnim: 'slideDown',
onSelect: function(dateText, inst){
if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
{
setTimeout(function() {
$('#departure-date').datepicker('show');
}, 100);
}
}
});
Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?
I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.

Categories