I need to disable multiple dates for the calendar, not just past or future dates, some dates that i provide to the calendar. For example i want to disable, let's say 29 of june, 27 of june and 4 of july.
I understand that you can pass it through shouldDisableDates, although im not so sure how to do this.
im getting dates in this format
const disabledDates = () => {
console.log(exludedDates)
return moment(exludedDates[0].pickup_date);
};
that's the code, it gets data from the screenshot
shouldDisableDates accepts a function in which date is passed.
You could create a function which accepts date as an argument and use that date as per your conditions and returns either true or false from the function. The returned value if true will disable date and vice-versa. I hope you understands and give it a try.
Related
I've been trying to change the format of the dates that appear in the day column headers on the Fullcalendar week/timegrid view:
I'm using V5 in conjuction with moment.js.
Searching through the docs, I ended up here: https://fullcalendar.io/docs/v5/day-header-render-hooks
This is the code I've tried when initialising the calendar:
dayHeaderFormat: function(date){
return moment(date.weekday).format('ddd');
}
This results in showing today (Thu) for every header, rather than the correct days.
My next issue is that I'm not sure how to format the rest of the date accordingly - this targets the 'weekday' element of the date object, but I couldn't figure out how to format the whole date in one go (if that's possible). I'm looking to simply display 'Thu 14th', for example.
Any help or advice appreciated!
dayHeaderContent: (args) => {
return moment(args.date).format('ddd Do')
}
The new function supplies args instead of date object. So you access them with args.date and then format using moment
I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.
I do let fullcalendar initialize normally. So it represents current date. (Midnight->midnight, 1day, 1h slots)
From some other datasource I get data with timestamps. The format is "YYYY-MM-DD HH:mm" (transmitted as a string, no timezone information)
So I convert that string to a moment object and test against fullcalendar.start and .end to see if it is within.
moment("2016-04-07 00:00") == $('#calendar').fullCalendar('getView').end
This results in false though the following command
$('#calendar').fullCalendar('getView').end.format("YYYY-MM-DD HH:mm")
returns
"2016-04-07 00:00"
I also tried to compare with diff
moment("2016-04-07 00:00").diff( $('#calendar').fullCalendar('getView').end,"minutes")
which returns
120
Some research on the calendars.end object in Chrome Dev Tools revealed that it internally is represented as
2016-04-07 02:00 GMT+0200
This looks strange to me. I am in timezone 2h ahead of GMT. So it should correctly say 2016-04-07 00:00 GMT+0200, should it not?
This also explains why the diff test above resulted in 120 minutes.
Can someone help? I do not get where the conversion problem comes from. I am using only dates with no timezone information. And as said above, fullcalendar initalizes with no gotodate information and shows a time bar from 00:00 to 00:00. So why does it come that there is this 2h difference?
Thanks a lot. I do understand things a lot better now.
Some of the dates I tried to compare were 'now'. I got 'now' by
var n = moment()
That turned out to be a date time including my timezone.
E.g. moment().format() resulted in '2016-04-07 00:00 GMT+0200' and I now see how this went wrong excepting a comparison against full calendar.end to be true but it was false as '2016-04-07 00:00 GMT+0200' is '2016-04-06 22:00' at UTC.
As
moment.utc()
does not work, I know ended up with using
moment.utc(moment().format('YYYY-MM-DD HH:mm'))
This now seems to work as this treats my local time as it would be the 'numerical same time' at UTC.. thus matching with how fullcalendar handles times internally (ambiguously-zones moments).
Thanks
A few things:
The timezone parameter controls how FullCalendar works with time zones.
By default, FullCalendar uses "ambiguously-zoned moments". These are customizations to moment.js made within fullCalendar. The docs state:
The moment object has also been extended to represent a date with no specified timezone. Under the hood, these moments are represented in UTC-mode.
Thus, to compare dates in this mode, treat them as if they were in UTC.
moment.utc("2016-04-07 00:00")
To compare moments, use the moment query functions, isSame, isBefore, isAfter, isSameOrBefore, isSameOrAfter, and isBetween.
In this case, since FullCalendar's start is inclusive but the end date is exclusive, you probably want to compare like this:
var cal = $('#calendar').fullCalendar('getView');
var start = cal.start;
var end = cal.end;
var m = moment.utc("2016-04-07 00:00"); // your input
var between = m.isSameOrAfter(start) && m.isBefore(end);
Note that there's an pending enhancement to moment's isBetween functionality for a future release that will give you control of exclusivity, but currently isBetween is fully inclusive, so you have to use the combination of functions shown here.
How to get the difference between two bootstrap date with time picker using PHP?
I used bootstrap date with time picker in my web application. I tried to get the difference between two dates. If I take the difference in hours it will print correctly but if I take difference in minutes its not printing correctly.
For example - Assume that From date is 18-12-2015 04:00 and To date is 18-12-2015 04:15. In this case, I need to get the difference as "00.15". I also need to insert it into MySQL database and while inserting it needs to show "0.25" (Float (10,2)) format.
Use
$diff = date_diff(datetime1,datetime2,absolute);
Here,
absolute is optional. Specifies a Boolean value. TRUE indicates that the interval/difference MUST be positive. Default is FALSE
You can specify the format of the output as well:
echo $diff->format("%R%a days"); // will echo +7days
I have created a jQuery date range picker. I am able to select the dates ranges and show them in a textbox. Now what I need is, I need to disable certain dates and assign different classes to those dates.
E.g. I must be able to give class A to April 2, class B to April 4 etc.
I have tried the results I got while I googled but nothing helped. What I am trying to do is to pass some dates and classes that should be assigned to those dates. That class should be assigned to those dates plus I must have option to enable or disable those dates.
The next thing I am trying to do is if there is a disabled date in between 2 dates, then that range cannot be selected.
E.g. Suppose I want to select April 2 to April 7 and April 5 is a disabled date.
Then I could be able to select either April 2 to April 4 or April 6 to April 7.
That means only one range should be selectable. Please help to solve this.
Please find the fiddle here:
You have to create two arrays, one that maps the css Class with each Date you want to be disabled class:date, and one that maps the css class with the date you want to give a special class, and then:
Inside beforeShowDay, check if the date is in the disabled dates array, and if you find it, use the associated class and return false, example: [false,"classA"], if not , check in the special array and return the class with true, else just do whatever you are doing right now.
Inside onSelect, check if the selected range includes any of the dates in the array and act accordingly
Then In the class:date array, you can add any class:date you desire to be disabled with its own class, and the code will handle it
Full working solution here.
Notes:
The code disables the 22nd of April and the 15th of May (try playing with the dates)
The code gives a special class to the 15th of April and the 10th of May.
The css class is applies as a background-color on the td, it does't show properly, you will have to modify the picker's css for it to do
Reference that hepled me provide this answer is here
You need to implement beforeShowDay and onSelect functions as shown in the following demo:
http://jsfiddle.net/salman/H3ra3/
The code may look daunting but it is not. The basics are as follows:
The dateConfig variable
The date information is stored in an associative array in which we store whether a date is selectable AND/OR its CSS class name.
beforeShowDay
Let date be the date for which the function was called
Let date1 be the date inside start date textbox
Let date2 be the date inside end date textbox
If the date is unselectable then
return [false, date_class or ""]
If user has chosen date1
If user has chosen date2 and date is between date1 ...date2 then
return [true, selected_class]
If date is less than date1 then
return [false, date_class or ""] (do not allow second date to be less than first date)
If date is equal to date1 then
return [true, selected_class] (allow second date to be same as first)
return [true, date_class or ""]
onSelect
Let date1 be the date inside start date textbox
Let date2 be the date inside end date textbox
If user has chosen date1 and date2 then
Iterate over all unselectable dates
If an unselectable date is between date1 ...date2 then throw an error