Magic Calendar (): Magic JavaScript

Save the date in a pop-up you can actually see

Usage

Add
<link href="/PATH/TO/magic/tricks/magic_calendar/magic_calendar..css" rel="stylesheet"> <script type="text/javascript" src="/PATH/TO/magic/tricks/magic_calendar/magic_calendar..js" charset="UTF-8"></script>

below your <script type="text/javascript" src="/PATH/TO/magic/wand..js" charset="UTF-8"></script>
Add data-mjf_mcal_date_format="DATE_FORMAT" to your <input> tag.
Valid Date Formats:
- MM-dd-yyyy – 09-15-2011
- MM/dd/yyyy – 09/15/2011
- yyyy-MM-dd – 2011-09-15
- yyyy/MM/dd – 2011/09/15
- MMM dd, yyyy – Sep 15, 2011
- MMMM dd, yyyy – September 15, 2011
Optional:
- Add data-mjf_mcal_time_format="TIME_FORMAT" to your <input> tag.
- Valid Time Formats:
  - H:mm:ss ampm – 2:30:00 pm
  - H:mm ampm – 1:00 pm
Add <script type="text/javascript">$m.trick.magic_calendar = true;</script> inside your <body> tag.
Use the examples below as a guide for setting up your own calendars!

Example 1

<input type="text" name="mcal_ex_1" value="09-15-2011" size="10" data-mjf="magic_calendar" data-mjf_mcal_date_format="MM-dd-yyyy" class="input_text_small" id="mcal_ex_1">

Example 2

<input type="text" name="mcal_ex_2" value="09/15/2002 2:30:00 pm" size="25" data-mjf="magic_calendar" data-mjf_mcal_date_format="MM/dd/yyyy" data-mjf_mcal_time_format="H:mm:ss ampm" class="input_text_small" id="mcal_ex_2">

Example 3

<input type="text" name="mcal_ex_3" value="2002-09-15" size="10" data-mjf="magic_calendar" data-mjf_mcal_date_format="yyyy-MM-dd" class="input_text_small" id="mcal_ex_3">

Example 4

<input type="text" name="mcal_ex_4" value="2002/09/15 1:00 pm" size="25" data-mjf="magic_calendar" data-mjf_mcal_date_format="yyyy/MM/dd" data-mjf_mcal_time_format="H:mm ampm" class="input_text_small" id="mcal_ex_4">

Example 5

<input type="text" name="mcal_ex_5" value="Sep 15, 2002" size="15" data-mjf="magic_calendar" data-mjf_mcal_date_format="MMM dd, yyyy" class="input_text_small" id="mcal_ex_5">

Example 6

<input type="text" name="mcal_ex_6" value="September 15, 2002 9:30:10 am" size="30" data-mjf="magic_calendar" data-mjf_mcal_date_format="MMMM dd, yyyy" data-mjf_mcal_time_format="H:mm:ss ampm" class="input_text_small" id="mcal_ex_6">

Example 7

<input type="text" name="mcal_ex_7" value="" size="30" data-mjf="magic_calendar" data-mjf_mcal_date_format="MMMM dd, yyyy" data-mjf_mcal_time_format="H:mm:ss ampm" class="input_text_small" id="mcal_ex_7">

Notes

The data-mjf_mcal_date_format and data-mjf_mcal_time_format formats can be mixed and matched - the above are only examples.
24 hour times are not supported - visitors can easily become confused when entering the hour.
To set the starting year of the dropdown, add $m.t.magic_calendar.earliest_year = YYYY inside your <head> tag. It defaults to 100 years in the past.
To set the ending year of the dropdown, add <script type="text/javascript">$m.t.magic_calendar.furthest_year = YYYY</script> inside your <head> tag. It defaults to 50 years in the future.

Change Log

→ 12.9.17

Now displays a JavaScript alert() when the calendar encounters an invalid date/time format.

→ 12.8.20

Now more reliable when using Predefined JSON parsing.

→ 12.7.20

Calendar pop-up will now position itself horizontally so it's always visible.
Added the ability to set the earliest and furthest years in the dropdown.

→ 12.1.9

Calendar pop-up will now position itself vertically so it's always visible.
Original date field is now focus'ed after choosing a date.
Fixed tab key navigation - the selected date is now focused by default and visitors can use the tab/shift+tab key(s) to navigate the various fields and dates.
Fixed Opera font colors.

→ 11.12.18

Initial Release

→ 11.12.2

Initial Build

To Do

Add Darkroom - Free Range Title Drag so visitors can move the Darkrooms around.
Possibly add day <select> drop down in between month and year.

« Back to the main documentation

Magic Calendar (document.write($m.versions.tricks.magic_calendar);): Magic JavaScript