Displaying month-to-month effects
When the datepicker selector is shown, we're typically displaying one month at a time for the user. If the user needs to navigate backward through time, they do so using the previous month button. Likewise, they can move forward through time using the next month button. The datepicker widget just empties out the datepicker div
when this happens, regenerates some HTML for the calendar and inserts that. This all happens very quickly, essentially instantaneously as far as the user is concerned.
Let's liven up this month-to-month navigation a little bit by injecting some effects into the datepicker internals.
Getting ready
We can use any datepicker widget for this experiment, but it's probably more straightforward to just use an inline datepicker display instead of using a text input
. That way, the datepicker is there when the page loads and we don't need to open it. Inline datepickers are created using a div
element.
<div class="calendar"></div>