rc-calendar detect month change in date calendar - javascript

rc-calendar: https://github.com/react-component/calendar
Is there a way to detect the change of month on clicking the next/previous buttons as labeled in the image below:
My use case: I need to fetch all the available dates in a month on clicking next month and disable the unavailable dates in that month.
Code: https://codepen.io/sachiv/pen/WBNXLp
PS: There is a prop onChange which detects change only on the selection of a date and not just month change.

Related

How to CalendarView on click date show same schedule for every Mon,Tue,Wed.ect... throughout the year

I can not display a specific schedule on click Monday (example Mondays: "Rice with Chicken") or any other day if it is not that day....
i would like to set a calendar view which shows a month and on any click it shows the specific Schedule for that day in a separate Textfield. I manage to show dates i+i1+i2 at any day on click, but does not work with days like Mon,Tue,Wed ect.

preventing Date-picker from auto-select a date

I am using and readonly datepicker (bootstrap) with disabled weekends and public holidays. When selecting a month/ year however it always selects the first day of the month or year and only moves on to the date selection if this first day is an invalid. The datepicker modal opens initially with the current day (which is also an invalid day ..on purpose) so it let me select an day but ones i go to month or even years before selecting a day of the current month, it populates it with the default of the first day of the month/year. is there a way to prevent this from happing and only updates the date ones day, month and year has been selected by the user.
Use setDate method you can clear input field state this way:
$("#datepicker").datepicker();
$("#datepicker").datepicker('setDate', null);
Try this code:
$('#datepicker').val('').datepicker('update');
Or
$('.datepicker').datepicker('update', '');
Source

Highlight a Calendar date on a Text Date Hover

I was wondering if it would be possible to show a date selected for example on a jquery date picker if a user hovers over a texted based date.
I have a list of dates in spans
<span>8-21-2014</span>
<span>9-1-2014</span>
<span>10-2-2014</span>
The goal would be the datepicker (or any other method of showing a calendar ie:keithwood ) would be off to the side and would highlight / change month when the span is hovered giving the user a visual idea of where that date lands in the month.
Note: I already have a calendar page, the list based view just gets more views.

jQuery FullCalendar select next day?

Using the jQuery plugin FullCalendar, I want the selected date on the calendar to be incremented(by only one day) on a button click event.
This is the code I have been trying using the incrementDate() method:
$('#coolButton').click(function(){
$('#calendar').fullCalendar('incrementDate', 0, 0, 1);
});
This will only work if I increment the year or the month, but never if I increment the day. Any idea how to get the calendar to select the next day?
Thanks
Actually It does increase the selected date by a given amount of time. (in your example by a single day). The thing is you can't see it.
if you click that button may be 30+ times you can see the calender will move to the next month.
(If you change the CSS of the selected date, then you can see it increment)

Restrict and change select lists values used along jQuery UI's datepicker

I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/

Categories