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
})
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
}
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
I would like to set the initial month to an arbitrary month when I call the function to display the calendar.
Say for example the user selects a date last june (June 2011) somewhere else and I want fullcalendar to show up with a month display of April before (April 2010). And yes, this is just to make a case, not to make sense ;-) )
I tried to call 'gotodate' before I then subsequently call the display function but this doesn't seem to work
$('#calendar').fullCalendar( 'gotoDate', currentdate);
$('#calendar').fullCalendar({
header: {left: 'prevYear,prev,today,next,nextYear',
center: 'title', right: 'month,basicWeek,basicDay' etc...}
Could someone eventually please provide an example how to do this properly?
You should use the options 'year', 'month', and 'date' when initializing to specify the initial date value used by fullcalendar:
$('#calendar').fullCalendar({
year: 2012,
month: 4,
date: 25
}); // This will initialize for May 25th, 2012.
See the function setYMD(date,y,m,d) in the fullcalendar.js file; note that the JavaScript setMonth, setDate, and setFullYear functions are used, so your month value needs to be 0-based (Jan is 0).
UPDATE: As others have noted in the comments, the correct way now (V3 as of writing this edit) is to initialize the defaultDate property to a value that is
anything the Moment constructor accepts, including an ISO8601 date
string like "2014-02-01"
as it uses Moment.js. Documentation here.
Updated example:
$('#calendar').fullCalendar({
defaultDate: "2012-05-25"
}); // This will initialize for May 25th, 2012.
UPDATE: in the V5, defaultDate parameter has been renamed to initialDate.
You have it backwards. Display the calendar first, and then call gotoDate.
$('#calendar').fullCalendar({
// Options
});
$('#calendar').fullCalendar('gotoDate', currentDate);
As per machineAddict's comment, as of version 2 and later, year, month and day have been replaced by defaultDate, which is a Moment, supporting constructors such as an ISO 8601 date string or a Unix Epoch.
So e.g. to initialize the calendar with a given date:
$('#calendar').fullCalendar({
defaultDate: moment('2014-09-01'),
...
});
You can just pass a Date object:
For current date:
$('#calendar').fullCalendar({
defaultDate: new Date()
});
For specific date '2016-05-20':
$('#calendar').fullCalendar({
defaultDate: new Date(2016, 4, 20)
});
For v5 please use initialDate instead of defaultDate. Simply renamed option
eg
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
initialDate: '2020-09-02',
...
});
I've had better luck with calling the gotoDate in the viewRender callback:
$('#calendar').fullCalendar({
firstDay: 0,
defaultView: 'basicWeek',
header: {
left: '',
center: 'basicDay,basicWeek,month',
right: 'today prev,next'
},
viewRender: function(view, element) {
$('#calendar').fullCalendar( 'gotoDate', 2014, 4, 24 );
}
});
Calling gotoDate outside of the callback didn't have the expected results due to a race condition.
In version 2.1.1 this works :
$('#calendar').fullCalendar({
// your calendar settings...
});
$('#calendar').fullCalendar('gotoDate', '2014-05-01');
Documentation about moment time/date format : http://fullcalendar.io/docs/utilities/Moment/
Documentation about the upgrades in version 2 : https://github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2
This can be used in v5.3.2 to goto a date after initialization
calendar.gotoDate( '2020-09-12' );
eg on datepicker change
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
...
initialDate: '2020-09-02',
...
});
$(".date-picker").change(function(){
var date = $(this).val();
calendar.gotoDate( date );
});
If you don't want to load the calendar twice and you don't have a version where defaultDate is implemented, do the following:
Change the following method:
function Calendar(element, options, eventSources) {
...
var date = new Date();
...
}
to:
function Calendar(element, options, eventSources) {
...
var date = options.defaultDate ? options.defaultDate : new Date();
...
}
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
initialView: 'dayGridMonth',
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
nowIndicator: true,
dayMaxEvents: true, // allow "more" link when too many events
editable: true,
selectable: true,
businessHours: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [{
title: 'All Day Event',
start: '2020-09-01',
}]
});
calendar.render();
});
Just simply add that particular date to initialDate key.