I'm using this code to set a time interval in two inputs (start time and end time). It works great, but I want to allow the user to create any number of time picker pairs. Can I send the current timepicker with tpStartSelect(this) or similar to re-use tpStartSelect/tpEndSelect for every time picker pair? If that makes any sense.
$('.start_time.timepicker').timepicker({
onSelect: tpStartSelect
});
$('.end_time.timepicker').timepicker({
onSelect: tpEndSelect
});
function tpStartSelect( time, endTimePickerInst ) {
$('.end_time.timepicker').timepicker('option', {
minTime: {
hour: endTimePickerInst.hours,
minute: endTimePickerInst.minutes
}
});
}
function tpEndSelect( time, startTimePickerInst ) {
$('.start_time.timepicker').timepicker('option', {
maxTime: {
hour: startTimePickerInst.hours,
minute: startTimePickerInst.minutes
}
});
}
(The actual plug-in code for timepicker() is on this page and I'm using example 4 from the bottom https://fgelinas.com/code/timepicker/)
Thank you!
It ain't pretty, but this is doing what I want (row_no ticks up as the user adds more). Thanks all.
$('.start_time-'+row_no).timepicker({
onSelect: tpStartSelect
});
$('.end_time-'+row_no).timepicker({
onSelect: tpEndSelect
});
function tpStartSelect( time, endTimePickerInst ) {
$('.end_time-'+row_no).timepicker('option', {
minTime: {
hour: endTimePickerInst.hours,
minute: endTimePickerInst.minutes
}
});
}
function tpEndSelect( time, startTimePickerInst ) {
$('.start_time-'+row_no).timepicker('option', {
maxTime: {
hour: startTimePickerInst.hours,
minute: startTimePickerInst.minutes
}
});
}
It seems you already have the tool necessary. If every element that has a class of timepicker then you only need to do this once.
$('.timepicker').each(function(el)
{
el.timepicker({
onSelect: tpStartSelect
});
}
Related
i got the label of errore when i excute this as i use a time picker with a form field sharepoint control so
this is my code of jquery validation
$("input[id*='ffEnTime']").focusout(function () {
if ($("input[id*='ffEnTime']").val().trim() == "") {
$("span[id*='lblEntTime']").show();
$("span[id*='lblEntTime']").text("Write Entry Time");
}
else {
$("span[id*='lblEntTime']").hide();
}
});
and the code of timepicker that i use
$(document).ready(function () {
//Start Validation at the after form loaded
$("input[id*='ffPltNo']").attr("maxlength", "4");
$("input[id*='ffIDNumber']").attr("maxlength", "10");
$("input[id*='ffEnTime']").attr("autocomplete", "off");
$("input[id*='ffEnTime']").attr("readOnly", "true");
$("input[id*='ffEnTime']").timepicker({
timeFormat: 'hh:mm p',
minTime: '06:30:00', // 11:45:00 AM,
maxHour: 24,
maxMinutes: 30,
startTime: new Date(0, 0, 0, 06, 0, 0), // 3:00:00 PM - noon
interval: 30
});
so it's look like this
See pic
the errore is come because when i click on any time to choose it'll first focus out then the validation will execute finally it'll choose the time in that case i have to chose again to let the label disapper
any suggestions to replace focus out with something better?
I tried on change but doesn't work with me.
Did u try
$("input[id*='ffEnTime']").on('input',function () {
//your validation function here
})
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'
});
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'));});
});
I'm trying to crate a datepicker from jQuery.
Users will allow to choose only June to September in each year from 2016-2020.
(So I don't think minDate and maxDate will work here)
I tried using the "beforeShowDay" as mentioned in
Disable specific months JqueryUI datepicker
The code was successfully disable users from picking the date outside from June to September but they can still choose January-December from the month dropdownlist (of datepicker).
What I want to do is limit the datepicker month-drop-down-list to show only June to September.
$(document).ready(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays
});
var monthsToDisable = [0,1,2,3,4,9,10,11];
var endMonth=[8];
function disableSpecificWeekDays(date) {
var month = date.getMonth();
if ($.inArray(month, monthsToDisable) !== -1) {
return [false];
}
return [true];
}
$("#datepicker").datepicker("setDate",'06/01/2016');
});
I don't see any options that would allow you to adjust this. I have a hacky solution that will probably do the job for most use cases, but that's your call. What I have done here is remove the unwanted select items from the datepicker list each time it gets updated. I had to add a short delay as jQuery UI takes a second to generate its code.
var removeDisabledMonths = function() {
setTimeout(function() {
var monthsToDisable = [0,1,2,3,4,9,10,11];
$.each(monthsToDisable, function(k, month) {
var i = $('#ui-datepicker-div select.ui-datepicker-month').find('option[value="'+month+'"]').remove();
});
}, 100);
};
//datepicker
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays,
// Added this --
onChangeMonthYear: function(year, month, obj) {
removeDisabledMonths();
}
});
//initial hide
setTimeout(function() {
removeDisabledMonths();
}, 1000);
Note that I had to call the function with a 1 second delay after the datepicker was initialized in order to get the months to hide the first time. Hacky, but if you are only looking to adjust the UI for the user, it just may do the job.
Well, Christ's code will activate itself after you choose some month/date.
If you don't, the January,Feb..... still being shown.
Therefore I add "beforeShow:" and connect it to removeDisabledMonths();
Now it works better.
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange:'2016:2020',
minDate:0,
beforeShowDay: disableSpecificWeekDays,
onChangeMonthYear: function(year,month,obj){
removeDisabledMonths();
}
});
var monthsToDisable = [0,1,2,3,4,9,10,11];
function disableSpecificWeekDays(date) {
var month = date.getMonth();
var day=date.getDate();
if ($.inArray(month, monthsToDisable) !== -1) {
return [false];
}
return [true];
}
$("#datepicker").datepicker("setDate",'06/01/2016');er code here
$( ".selector" ).datepicker( "option", "defaultDate", "2019-09-01" );
$( ".selector" ).datepicker( "option", "minDate","2019-09-01");
$( ".selector" ).datepicker( "option", "maxDate","2019-09-30");
This displays only the month of September in the calendar and stops the user from accessing other months.
I have a question, quite similar to the one at: year/month only datepicker inline
The difference is that I am using the input version, rather than the div.
In the div case, the ui-datepicker-calendar is inside the outer div, and so can be accessed uniquely.
But with the input, there is no relation between the input and the ui-datepicker-calendar (or, not that I've found...)
Just to be clear, I cannot use the "global" .ui-datepicker-calendar { display: none;}, as I have other datepicker that is a full one (i.e., uses the days as well).
My code looks as follows:
$("#monthsYearInput").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "mm/yy",
onClose: function(dateText) {
if (dateText != "") {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
beforeShow: function() {
var dateText = $(this).val();
var isPopulated = dateText.length > 0;
if (isPopulated) {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("option", "defaultDate", selectedDate);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
onChangeMonthYear: function(year, month) {
if (changingDate) {
return;
}
changingDate = true;
$(this).datepicker("setDate", new Date(year, month - 1, 1));
$(this).datepicker("refresh");
changingDate = false;
}
});
$("#monthsYearInput").focus(function () {
$(".ui-datepicker-calendar").hide();
};
$("#monthsYearInput").blur(function () {
$(".ui-datepicker-calendar").hide();
};
It all looks OK as start, but then when the year/month has changed, the new date is populated in the input (desired), but now the calendar displays (not desired).
Any ideas on how to solve this issue?...
Thanks in advance.
JSfiddle: http://jsfiddle.net/OhadRaz/8z9M2/
I think that you could still do it with a css like in the solution that you've linked but targeting only that one datepicker
#monthsYearInput .ui-datepicker-calendar { display: none;}
Can you put your code on JSFiddle so we can see what it is doing? I may have done something familiar at Jquery Datepicket Supress Year, but can't tell without a JSFiddle demo...
OK,
I came up with some sort of a solution:
var superUpdateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
var ret = superUpdateDatepicker.apply(this, arguments);
if (inst.id == "monthsYearInput") {
$(".ui-datepicker-calendar").hide();
}
return ret;
}
While working, I am not happy with it.
It is too hacky, it is not clean, and I just don't like it.
Any better ideas?...