We Keep Coding

Full Calendar - How to add leading zeros to the days in Month View of Full Calendar

I want to add leading Zeros to these single digit days in FullCalendar month view.
What I want is :
Means, 3 as 03, 4 as 04 and so on..

Years later I could not find an option to set the day-number format to one with a leading zero, i did it the same way but without JavaScript in Fullcalendar 5.4.0:
The classname in my case was .fc-daygrid-day-number, I think thats implements the type of the initialized view, whats in my case initialized with: {initialView: 'dayGridMonth'}
Array.prototype.forEach.call(
document.querySelectorAll('.fc-daygrid-day-number'),
function(el) {
if (el.innerText.length === 1) {
el.innerText = '0' + el.innerText;
}
}
)

There doesn't appear to be an option for this in the fullCalendar options curently. Without modifying the fullCalendar source, the best I could come up with is this. If you look at the rendered calendar HTML, you'll see that each day number is wrapped in a <td> with the CSS class fc-day-number. So we can modify the contents of the <td>. Put this code directly after your calendar initialisation code:
$('.fc-day-number').each(function() {
var day = $(this).html(); //get the contents of the td
//for any fields where the content is one character long, add a leading zero
if (day.length == 1)
{
$(this).html("0" + day);
}
});

I had the same problem with React and find this question equivalent. Then I come up with this solution at Fullcalendar 5.6.0:
I used a prop called "dayCellContent" and passed a function to return the formatted string.
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
dayCellContent={({ dayNumberText }) => (("00" + dayNumberText).substring(dayNumberText.length))}
/>

How to select a tab in a $watch function when changing array?

I tried to use the tabs in Angular Material to facilitate the navigation between dates (just slide tabs to change date) and I have also a date picker to jump quickly to another date.
The loading work fine; I initialized the date picker with the current date and load tabs with each day in the current month.
If I select a date in another month, I reload the tabs to show appropriate dates. To do this, I've add a $watch on the date picker. This work fine but at the end of $watch I set tabSelected who is the index of the tab to display. That part don't work because it's like the digest process is not finish.
I think about a solution: just rename the tabs with new value. But is there a way to reset the array and set the index like I do:
$scope.$watch('dateSelected', function (newValue, oldValue) {
if ((newValue.getMonth() != oldValue.getMonth())
|| (newValue.getFullYear() != oldValue.getFullYear())) {
$scope.tabs = initialiseGamesTabs($scope.dateSelected);
}
$scope.tabSelected = getTabSelected();
});

The variable $scope.dateSelected itself is unchanged, because changing date only changes the variable' property. You have to watch the variable recursively, by adding the third argument to $watch as true.
Code:
$scope.$watch('dateSelected', function (newValue, oldValue) {
if ((newValue.getMonth() != oldValue.getMonth())
|| (newValue.getFullYear() != oldValue.getFullYear())) {
$scope.tabs = initialiseGamesTabs($scope.dateSelected);
}
$scope.tabSelected = getTabSelected();
}, true); // <----------- add true here
Further reading:
$watch an object

Bootstrap DatePicker - Validate Date

I have a bootstrap datepicker set up such that the startDate = '1/1/1990', but if the user enters the date manually in the text box to something such as 1/1/201 (likely mistype of 1/1/2014), the date is just blanked out when they change focus. Is there a way such that if they attempt to leave the field with an invalid date that instead of having a blank field that I can specify something like today's date, or even change the background color and not allow for the user to leave that field?
Thank you for your help.

You can also set the date field to readonly, in this way user can only select correct date format from datepicker.
example:
http://www.w3schools.com/tags/att_input_readonly.asp

You can use the jquery validation plugin for the color, showing msg for the invalid date. And in that case for validating the date value with present date you have to add a custom validation method to it like :-
$.validator.addMethod("presentDate", function(value, element) {
if(new Date(value).getTime() >= new Date().getTime()){
return true;
} else {
return false;
}
});

I have figured out that I can simply detect when the value of the date has been set to '' and go from there with what I want to change:
$('#StartDate').change(function()
{
if (this.value === '')
{
alert('Start date is now set to empty string, do work here');
}
});

WordPress ContactForm7 datepicker field - disable/block specific dates?

I currently have a WordPress site installed where users can book a tour of our facility (we are a university). I have used the ContactForm7 plugin to create a form within a page where visitors can enter their contact information and then can use a datepicker field to select the specific date that they want to take their tour on.
My question is (I've searched high and low for a solution to this but to no avail) is there a way that I can disable or block specific dates from being selected in this datepicker field in the form? For example, there are a number of days when tours are not available (i.e. holidays and other days when tour staff are not on campus) so I don't want these dates to be selectable.
Is there a way to do this within the plugin, or is there any other way I can do it, whether it's using a script or through another plugin?
My colleague showed me a site that uses a jQuery/JS datepicker field in their tour booking form (this is NOT a WordPress/ContactForm7 form however) and they are able to block specific dates when tours aren't available, so I'm assuming it should be possible...somehow.
Any help would be greatly appreciated! :)
EDIT:
I found the code below and the website sounds like it'll do exactly what I'm looking for (using a method similar to one of the answers below it looks like) but I can't really figure out how to add it to my site so that it works. I've added it in the header.php file of my theme, and I've set the id to "#DisabledDates" - which is what I've set the datepicker field id to on the form as well...but the dates that I set for the "unavailableDates" are still selectable...any ideas?
<?php if ($post->ID==16) { ?>
<script type="text/javascript">
var unavailableDates = ["9-5-2013", "10-5-2013", "11-5-2013", "12-5-2013", "13-5-2013", "14-5-2013", "15-5-2013", "16-5-2013", "17-5-2013", "18-5-2013", "19-5-2013", "20-5-2013", "21-5-2013", "22-5-2013", "23-5-2013", "24-5-2013"];
jQuery(function($){
$( "#DisabledDates" ).datepicker({
minDate: 5,
beforeShowDay: function(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
});
});
</script>
Here's where I found it (it looks like a plugin that existed to extend CF7 with a datepicker field before the datepicker was added to the plugin...but I'm assuming it should still work similarly?): https://github.com/relu/contact-form-7-datepicker/issues/37

You will have to access FTP to put a function somewhere in the CF7 files.
OR You can possibly find the class Wordpress uses and filter those dates out.

it can be done by two types
set mindate and maxdate
when you open the datepicker and change month/year it will fire an event beforeShowDay with each date on that month and year, and you can check for each date in that function with your date range array or object and return true or false. If false return that date will be deactive and on true that date will be active
Check out this link: http://jqueryui.com/demos/datepicker/#inline http://jqueryui.com/demos/datepicker/#min-max
The description says this: "Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D')"

Call a function as soon as date is entered via Calender

I have 2 text box readonly for Start Date and End Date. Date can only be entered through calender. Cannot be entered Manually. So I want to call a function as soon as date is entered via Calender in Start Date.
How Can I do it .
onchange and onblur events are not working as calender.js does not give any focus while inserting the date.
For IE onchangeproperty is working, but it is not working for Chrome and other browsers.
Can anyone help in this matter.

If you cannot find a reliable event - this is a hacky workaround, you can kick off a function via setInteval to check the value every xxx milliseconds to see if it has changed:
var sStartDate = document.getElementById('StartDate').value;
var iTimer = setInterval(function() {
if (document.getElementById('StartDate').value != sStartDate) {
clearInterval(iTimer);
// Do here the stuff needed to do when the date changed
}
}, 500)