Magic Icon Magic Calendar (): Magic JavaScript

Quick Jump ↵

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 where DATE_FORMAT is one from the list below…

  • 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

Add data-mjf_mcal_time_format="TIME_FORMAT" to your <input> tag (if you'd like to include the time) where TIME_FORMAT is one from the list below…

  • 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 building up your own!

Examples

<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_fld input_text_small" id="mcal_ex_1">

<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_fld input_text_small" id="mcal_ex_2">

<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_fld input_text_small" id="mcal_ex_3">

<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_fld input_text_small" id="mcal_ex_4">

<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_fld input_text_small" id="mcal_ex_5">

<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_fld input_text_small" id="mcal_ex_6">

<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_fld input_text_small" id="mcal_ex_7">

Notes

24 hour times are not supported - visitors can easily become confused when entering the hour.

To set the starting year of the dropdown, add <script type="text/javascript">$m.t.magic_calendar.earliest_year = YYYY</script> 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

14.6.3

  • Minor design freshen.

13.3.27

  • Fixed the bug in touch-based browsers where calendars didn't disappear when clicking outside the calendar.
  • Code optimization.

13.2.6

  • Invalid dates and times are now handled more gracefully.

12.12.13

  • Moved as much CSS as possible from magic_calendar.src.js to magic_calendar.src.css.
  • Added a box shadow (CSS class mcal_field_on) to the form field associated with the calendar while the calendar is visible.
  • Disabled the form field focus when picking a date/time for touch-based browsers.
  • Disabled opacity animation on touch-based browsers — too slow at the moment.

12.12.12

  • Removed the JavaScript alert when entering invalid date/times.

12.11.6

  • New toolbar icons.

12.10.30

  • Updated to use animation easing functionality added in Magic JS 12.10.2 when showing the calendar.

12.9.17

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

12.8.20

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

« Back to the main documentation