I'm using two datetimepickers inputs and am trying to grey out and prevent users from selecting invalid start and end times based on previous input in the datepickers. For example end time should never be before start time and vice-versa.
For some reason the times correctly start off greyed out, but when I try to select an earlier start time, the minTime doesn't change for the #availibility_end_time datepicker.
I found a similar close solution but it hasn't seemed to work for me.
$('#availability_start_time').datetimepicker({
format: 'd/m/Y - H:i',
timepicker: true,
onShow: function( selected_time ){
this.setOptions({
value:$('#availability_end_time').val(),
maxTime: $('#availability_end_time').val()
});
}
});
$('#availability_end_time').datetimepicker({
format: 'd/m/Y - H:i',
timepicker: true,
onShow: function( selected_time ){
this.setOptions({
value: $('#availability_end_time').val(),
minTime: $('#availability_start_time').val()
});
}
});
Related
I am trying to update minTime of jquery time picker dynamically when I put meantime while page loading it works but when I do the same thing when user select start time it should update minTime of end time
here is my attempt to update minTime,
$('#datetimepicker5').timepicker({
timeFormat: 'HH:mm',
change: tmTotalHrsOnSite
// minTime: '15:00'
});
$('#datetimepicker4').timepicker({
timeFormat: 'HH:mm',
change: tmTotalHrsOnSite
// minTime: '15:00'
});
function tmTotalHrsOnSite () {
var picktime = jQuery('#datetimepicker4').val();
alert(picktime);
jQuery('#datetimepicker5').timepicker({
minTime: picktime
});
};
I am able to detect time on change and also getting inside the function but not being successful to update minTime to disable users to see the previous time.
The thing that worked for me is adding minTime option in onChange event, and passing time value in format specified in timePicker.
$('.startTP').timepicker({
timeFormat: 'hh:mm p',
startTime: '07:00',
interval: 5,
dynamic: false,
dropdown: true,
scrollbar: true,
change: function (time) {
var time = $(this).val();
var picker = $(".endTP");
picker.timepicker('option', 'minTime', time);
}
});
on change event of datepicker set your desired min time
$('#dateFrom, #dateTo').timepicker({
timeFormat: 'HH:mm',
change: function(){
if ($(this.element).is("#dateFrom"))
{
$("#dateTo").timepicker('option',{'minTime': new Date()});
}
else
{
$("#dateFrom").timepicker('option',{'maxTime': new Date()});
}
// minTime: '15:00'
});
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
}
Demo and full code like this :
https://jsfiddle.net/oscar11/yfjvd200/
I want the datepicker and timepicker not filled when loaded the first time. I want the datepicker or timepicker to filled when the user clicks on the input text of each. Eg user click on timepicker text input then time will be filled
I try use this :
$('#datepicker').val("");
$('#timepicker').val("");
But it does not work
How can I do it?
You found the right trick!
$('#datepicker').val("");
$('#timepicker').val("");
But you are not doing it at the right moment. Place that AFTER the pickers have been instanciated.
To fill the time on focus, add this .on() to timepicker:
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
})
.on('focus', function(e){
if( $(this).val() == "" ){
$(this).data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
Fiddle
You just need to write these lines to end of your function :
$('#datepicker').val("");
$('#timepicker').val("");
You can use this code :
$(function () {
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
minDate: moment().add(300, 'm'),
});
$('#datepicker').val("");
$('#timepicker').val("");
});
Have a look at this fiddle https://jsfiddle.net/lamp03/yfjvd200/9/. I have commented some lines
$(function () {
//$('#datepicker').val("");
//$('#timepicker').val("");
console.clear();
$('#datepicker').datetimepicker({
minDate: moment().add(300, 'm').startOf("day")
})
//.val(moment().add(300, 'm').format("DD-MM-YYYY")) // To set correct "valid" date from start
.on('dp.change', function(e){
var now = moment().format("X");
//console.log(e.date.format("X"));
//console.log(now);
// Comparing selected date (moment object) in milliseconds
if(e.date.format("X")+(300*60*1000) > now ){
console.log("above 5 hours, unlocking time.");
$('#timepicker').data("DateTimePicker").minDate(false);
}else{
console.log("below 5 hours, locking time (and probably resetting the value to min...)");
$('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));
}
});
$('#timepicker').datetimepicker({
//minDate: moment().add(300, 'm'),
}).on('dp.change', function(e){ $('#timepicker').data("DateTimePicker").minDate(moment().add(300, 'm'));});
});
My question is the same as the one here:
Highstock date input jquery ui datepicker position changes
But I'm using Bootstrap datepicker instead of jQuery. I noticed it has on("show", ... ), on("hide" ...) instead of beforeShow, onClose respectively. But then I don't really know how to change their bodies to work with my datepicker.
try this
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker({
format: "dd/mm/yyyy",
todayBtn: "linked",
orientation: "auto left",
autoclose: true,
todayHighlight: true
});
}, 0);
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.