I am trying to disable specific times for specific dates using the jQuery DateTimePicker like this:
jQuery('#datetimepicker').datetimepicker({
disabledDates: ['27/04/2022 14:00'],
format:'d/m/Y H:i'
});
However, this does not work. I can either only disable specific times for every day, or disable specific dates.
That's because the jQuery plugin DateTimePicker's "disabledDates" only accepts and disables days.
https://xdsoft.net/jqplugins/datetimepicker/
It looks like there is no such option for disabling specific times, you could work with only enabling specific times with
https://xdsoft.net/jqplugins/datetimepicker/#allowTimes
jQuery('#datetimepicker').datetimepicker({
datepicker:false,
allowTimes:[
'01:00', '02:00', '03:00',
'04:00', ... , '15:00', '60:00'
]
});
If you would like to continue with jQuery DateTimePicker you would have to write your own function for it
e.g.
jQuery('#datetimepicker').datetimepicker({
format:'d.m.Y H:i',
timepicker: true,
lang: 'en',
onGenerate:function(ct,$i){
//some function here to disable certain times
});
}
}
});
or you could use Bootstrap Datepicker which has an option to do exactly what you want
https://getdatepicker.com/4/Options/#endisabledhours
try this Reference
$(function () {
var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
$('#datetimepickerDemo').datetimepicker({
disabledDates: disabledDate
});
});
Ok I actually managed to figure this out myself. I'm using PHP, but you can essentially just use any multidimensional array and JSON encode it.
$times[]=[
'2022-04-28'=>[
'hour' => 10,
'minute' => 30
]
];
$times[]=[
'2022-04-28'=>[
'hour' => 11,
'minute' => 15
]
];
$times[]=[
'2022-04-29'=>[
'hour' => 13,
'minute' => 30
]
];
$dates=json_encode($times);
Once you have your list of dates and times you can use the onGenerate() function to loop through your dates and add a disabled class to the specific times.
jQuery('#datetimepicker').datetimepicker({
lang:'en',
format:'Y-m-d H:i',
formatDate:'Y-m-d',
step:15,
onGenerate: function(ct, $i){
var date=moment(ct).format('Y-MM-D');
var datesArray=<?echo $dates;?>;
$.each(datesArray, function(i, dates){
if(date in dates){
var times=dates[date];
$.each(times, function(index, time){
var hour=times['hour'];
var minute=times['minute'];
var $object=$('[data-hour="' + hour + '"][data-minute="' + minute + '"]');
$object.addClass('xdsoft_disabled');
});
}
});
}
});
Please note: you will need to use the exact same date format for your array and jQuery function. Also, my step is set to 15 minute increments. So this only disables that exact step.
Related
I have a range date picker at the moment.
<input id="rangeDatepicker2" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper2" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>
I would like to reuse the dates but I am unable to select them for all scenarios. I tried the code below which works great if the date selected are in the same month. But my issue is this bit of code doesn't work if the dates span multiple months.
$("#rangeDatepicker2").change(function () {
var dates = $('.selected');
if (dates.length == 2) {
var start = dates[0].dateObj;
var end = dates[1].dateObj;
//interact with selected dates here
}
});
May I ask how do I properly grab selected date range of a flatpickr.
Many input plugins actually pass the values in a onChange handler. The values are available there.
Solution
Pass down an onChange handler when initializing flatpickr:
$("#rangeDatepicker2").flatpickr({
mode: 'range',
onChange: function(dates) {
if (dates.length == 2) {
var start = dates[0];
var end = dates[1];
// interact with selected dates here
}
}
})
Demo
onChange documentation:
https://flatpickr.js.org/events/#hooks
I am using FullCalendar jQuery plugin and I need to modify it. My goal is to automatically display hour in every single cell, in every single day as event. I am creating an online registration system for my application and I need this functionality. After user clicks any hour and confirms it, I want to disable clicks for that chosen hour.
You can see on the picture on Monday example what I want to achive(but for all days):
No need to alter the plugin itself. Just make good use of all of the options available.
If you are just trying to change the content of any event that is displayed on the calendar, pass a function to the eventRender callback that returns a new DOM element. Use the momentjs library to display a formatted string for the start property of the event. For example:
var calendarOptions = {
// ...other options
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
}
}
When you are done with calendarOptions, you'll obviously need to pass it to fullCalendar:
$(calElement).fullCalendar(calendarOptions);
If you want to display an event in every single cell, then first make an array of events for every cell increment... something like this:
var myEvents = [];
var timeCursor = moment(startTime);
while (+timeCursor < +moment(endTime)) {
var start = +timeCursor;
timeCursor = timeCursor.add(timeIncrement,'minutes');
var end = +timeCursor;
myEvents.push({
start: start,
end: end
});
}
(where you've previously set startTime, endTime, and timeIncrement!)
Then the events property of the calendar options to this array before passing to fullCalendar:
calendarOptions.events = myEvents;
Finally, to handle clicks on an event, pass a function to the eventClick callback option that does whatever you want. For example, if you are keeping track of which events have been clicked, you might want to push their start times to an array:
var clickedEvents = [];
calendarOptions.eventClick: function(calEvent, jsEvent) {
if (clickedEvents.indexOf(calEvent.start) < 0) {
clickedEvents.push(calEvent.start);
} else {
return false;
}
}
Then of course you might want to modify your eventRender callback again to have your event display reflect this status by changing the style of the element, adding a line like this before returning the altered element:
if (clickedEvents.indexOf(calEvent.start) < 0) {
$(element).addClass('already-clicked');
}
(Be sure to set the style for .already-clicked in your CSS with something like cursor: not-allowed and opacity: 0.5.)
fullCalendar rocks!
I am trying to use #georgedyer code, but I have some issues :/
Firstly i will show You how it looks like in my MVC 4 application:
Here is my View(html) for display fullCallendar. The point of this is only to display events for every single cell:
//path to installed moment.js
<script src="~/Scripts/moment.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
events: myEvents,
eventRender: function(event, element) {
$(element).html(moment(event.start).format('h:mm'));
return element;
},
eventClick: function (calEvent, jsEvent, view) {
alert('You clicked on event id: ' + calEvent.start
+ "\nSpecial ID: " + calEvent.someKey
+ "\nAnd the title is: " + calEvent.title);
},
(...)
});
//HERE IS YOUR CODE ABOUT CREATING ARRAY
var myEvents = [];
var timeCursor = moment('2015-09-08');
while (+timeCursor < +moment('2015-10-01'))
{
myEvents.push { start: timeCursor }
timeCursor = timeCursor.add('15', 'minutes');
}
</script>
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
I have question about one line of code because VisualStudio display warning here about semicolon: myEvents.push { start: timeCursor }.
I tried to change it to this: myEvents.push ({ start: timeCursor }), error disappear, but still doesn't work :/
I don't know what is wrong in this. After run this code It just display empty FullCalendar. I know this code is a little different than your but I think this should work the same way. Please for some help here.
Edit: I think that eventRender: function works just fine because if I creating an event by myself,It displays hour like it should. So problem is only in creating events. I think in my code my myEvents array is in wrong place and when I invoke it in events: myEvents array has zero items.
I'm using the jquery plugin bootstrap datetimepicker and I want to set the full format of months in the calendar. How i can do that because I didn't any function that allow me to do this ?
<div id="datetimepicker"></div>
$('#datetimepicker').datetimepicker({
locale: 'fr',
dayViewHeaderFormat: 'YYYY',
viewMode: 'months',
format: "MMMM YYYY",
debug : true
});
Use moment.js to locate the language and get the list of full months, or alternatively, specify months manually as an array of all months.
Listen to the dp.show event and loop through the months text replacing it with corresponding full month's text.
moment.locale('fr');
var months = moment.months();
$('#datetimepicker10').datetimepicker({
viewMode: 'months',
locale: 'fr'
}).on('dp.show', function(e){
var $dp = $(e.target);
var $cal = $('.bootstrap-datetimepicker-widget', $dp);
$('.month', $cal).each(function(i){
$(this).text(months[i]);
});
});
DEMO: http://jsfiddle.net/nepek6u8/
I am using eternicode bootstrap-datepicker;
I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected. My point is, when some data is ready in a particular date. That date can be selected by user.
At the current point, I am restricting by 7 days from now. However, Saturday and Sundays are days which never have some data;
In this way, I can just show a range of dates, but no "holes" between those ranges. So, I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected from user.
Bootstrap itself does not have a built in datepicker last i checked. If however you are talking about the bootstrap-datepicker third party library that eternicode wrote.. I believe it supports the same events as the jquery datepicker.. so:
beforeShowDay
Function(Date). Default: $.noop
A function that takes a date as a parameter and returns one of the following values:
undefined to have no effect
A Boolean, indicating whether or not this date is selectable
A String representing additional CSS classes to apply to the date’s cell
An object with the following properties:
enabled: same as the Boolean value above
classes: same as the String value above
tooltip: a tooltip to apply to this date, via the title HTML attribute
usage something like this (below example only allows weekends and the two dates in the custom array below to be selected):
// use this to allow certain dates only
var availableDates = ["15-1-2014","16-1-2014"];
$(function()
{
$('#txtDate').datepicker({
beforeShowDay:
function(dt)
{
// use dt.getDay() to restrict to certain days of the week
// or a custom function like "available" below to do more complex things
return [dt.getDay() == 0 || dt.getDay() == 6 || available(dt), "" ];
}
});
});
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return true;
} else {
return false;
}
}
Lastly, a working FIDDLE to show above in action.. using jquery datepicker, but same difference...
Make as following:
var available_Dates = ["23/03/2014","21/03/2014"];
$('.datepicker').datepicker({
language: "pt-BR",
autoclose: true,
format: "dd/mm/yyyy",
default: 'dd/mm/yyyy',
beforeShowDay: function(date){
var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'dd/mm/yyyy', 'pt-BR');
if ($.inArray(formattedDate.toString(), available_Dates) == -1){
return {
enabled : false
};
}
return;
}
});
I am working on a simple textbox that has Dojo datepicker. The code below parses the date correctly with locale en-gb (dd/mm/yyyy). However the date that is picked from the datepicker is still in locale en-us (mm/dd/yyyy). So, it cannot parse the date that if it exceeds the 12th of the month.
require(["dojo/date/locale","dijit/form/Button", "dojo/dom", "dojo/domReady!"],function(locale,Button,dom){
var myButton = new Button({
label: "Submit Date",
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb'
});
alert(date);
}
}, "submit");
});
How do I fix this?
I solved this problem by mentioning the date format explicitly.
onClick: function(){
var date = locale.parse(dom.byId("date1").value,{
formatLength:'short',
selector:'date',
locale:'en-gb',
datePattern:'dd/MM/yyyy'
});
alert(date.toLocaleString());
}
And, mentioned the pattern inline as well.
constraints="{datePattern:'dd/MM/yyyy', strict:true}"