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
})
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'
});
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 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
});
}
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()
});
}
});
I'm currently using this awesome bootstrap-datetimepicker from (http://www.malot.fr/bootstrap-datetimepicker/). How to disable date on form2 based on form1 selected date??
here is my current javascript for the datetimepicker
$('.bookingfrom').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: '+0d',
forceParse: 0
});
$('.bookinguntil').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: '+0d',
forceParse: 0
});
I found 1 function on the documentation that I think can do the work. I just dont know how.
$('#date-end')
.datetimepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < date-start-display.valueOf()){
....
}
});
i've used it like this
//Set the date picker on the text boxes for Check Out Date
$(".checkOutDate").datetimepicker({
format: "dd M yyyy",
autoclose: true,
showMeridian: true,
startDate: minDateForCheckIn
}).on('changeDate', function (ev) {
//Parse the selected date string to date object.
var dateSelected = new Date(Date.parse(ev.date));
//Subtract 5 hours and 35 minutes (extra 5 minutes to prevent selection of same time in check in field) to adjust GMT timings.
dateSelected.setHours(dateSelected.getHours() +24, 0, 0, 0);
$(".checkInDate").datetimepicker('setEndDate', dateSelected);
});
//Set the date picker on the text boxes for Check In Date. [Once the check in date is selected, set the selected date as min date for check out]
$(".checkInDate").datetimepicker({
format: "dd M yyyy",
autoclose: true,
showMeridian: true,
startDate: minDateForCheckIn
}).on('changeDate', function (ev) {
//Parse the selected date string to date object.
var dateSelected = new Date(Date.parse(ev.date));
//Subtract 5 hours and 25 minutes (less 5 minutes to prevent selection of same time in check out field) to adjust GMT timings.
dateSelected.setHours(dateSelected.getHours() + 24, 0, 0, 0);
$(".checkOutDate").datetimepicker('setStartDate', dateSelected);
});
I am a bit late to the party, but this is definitely possible. I see you are also trying to disable dates before the current day. I've come up with the following solution that does exactly as asked:
First you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in this jsFiddle:
GO TO THE DEMO