The calendar control is a basic textbox that provides a visual way of selecting a date. The visual calendar will display when the user places focus on the textbox. The visual calendar will be removed once the user makes a selection on the calendar or removes focus from the textbox. Once a selection is made, the next input in the form receives focus. 

The visual calendar has navigation controls to quickly change the current month and displays the current year as well. If the user types a new date, the date will be highlighted in the visual calendar automatically. When the user changes months, the same data will be highlighted (if it exists). Using CSS you can style the look of the calendar and style the selected date.  It's important to note that the "calendar" class attached to the textbox will be removed from the textbox and applied to the visual calendar created.


Example code, GO:

<input type="text" class="calendar" effect="none" pad="true" padclass="pad" selectedclass="selected" />


Setting the class to "calendar" will declaratively create a new calendar control.


  • effect - default: none - How to display the visual calendar. Valid values include: none, vfold, fade.
  • pad - default: false - Whether or not to display the dates of the month before and after in the cell padding in the visual calendar.
  • padclass - default: pad - The class to apply to the padding cells.
  • selectedclass - default: selected - The class to apply to the currently selected date.

Working with Calendars in NinJa

Calendars can be accessed and created in your code.

  • new Calendar(id) - Creates a new calendar with the given id.
  • $Calendar(id) - Reference function for calendar controls.

Last edited Jun 15, 2012 at 6:57 PM by dahrkdaiz, version 3


No comments yet.