We Keep Coding

rc-calendar detect month change in date calendar

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.

jQuery date[time] picker - how to save time range (+ modify date format)?

I am using the datetime picker library and it works nicely.
But now, I am I need to save a time range. When I click to the widget, I am able to save a date and time in this format:
2015/03/15 10:15
This works well. But I would need to add a time range and save the date+time in this format:
2015/03/15 10:15 - 12:00
How to do that? I already changed the MySQL column from datetime to string. Now I am facing the problem how to enter the value to the input. When I chose the date+time, then in the input will occur something like this:
2015/03/15 10:15
Then I click to the input and want to manually add this text: - 12:00. But when I type this text to the input and the click out of the input, the - 12:00 text will disappear and in the input stays only following: 2015/03/15 10:15.
How to solve this problem? Any thoughts?
Thank you.

I think there might be a slight problem in your design.
Ideally, if you need a datetime range (somewhat simliar to what you have on airline and hotel booking sites), you ought to have 2 datetime pickers. One for the start of the range and one for the end of the range. Even with the database. There would be one column for start date and another for end date.
In your case, you need the time range, so you could probably add the time using the DateTime.AddMinutes()

validation of selecting time of a date that had already been selected

I had dynamic number of drop downs of two type on for date another for time.They are use for booking classes.Now if a user select a particular time of a particular time,then he will not set same time for same date for next class.How to do it in jquery or javascript?

html5 input element "date" - how to show calendar element

I have a calendar picker working using jqueryUI but wanted to try to convert it to the native date picker.
i'd like to be able to have the following:
start with the "< input id="nativedate" type="date"/>" element being hidden from the view.
when the main page element is clicked, have the < input > element show, with the calendar opened
when the user selecs a date on the calendar, the element is hidden.
Right now when i get to step 2, the < input > item is showing but with the calendar hidden,
so the user must click to have the element appear and then click again to have the calendar show and then a third click to select the date.
EDIT: I've tried the following:
$('#nativedate').click(function(){
console.log('click logged');
})
and then in another method:
$(#nativedate).trigger('click');
which works in terms of my event handler i've set up, but it does not open the calendar

Some Questions:
i) Is the browser's native datetime element is Opening or your calender is opening on input decleration ?
ii) If the your item is not showing after some time then try some javascript to force it to keep open nearby that specific input tag?
These May Help
Disable native datepicker in Google Chrome
Remove background arrow from date input in Google Chrome v20
or Try Google Search
or You can edit the browsers native DateTime Picker using CSS.

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/