• download
  • documentation
  • forums
  • demo
  • contact
  • blog

meteora

javascript widgets

Documentation

  • Autocomplete
  • Bubble
  • Calendar
  • Carousel
  • Datagrid
  • Dialog
  • Editor
  • Effect
  • Filebrowser
  • Form
  • Jsonrpc
  • Menu
  • Notebook
  • Picbox
  • Popup
  • Searchlist
  • Selection
  • Spinbutton
  • Tablesort
  • Toolbox
  • Treeview

What does this control do?

Displays a calendar which can be used to fill a form's input.

For an usage example check out the Meteora.Calendar demo.

How to use it

In order to be able to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Meteora.Calendar');

An external input tag is required to attach the control:

<input type="text" name="name_of_the_input" id="test-input" />

You may then be able to invoke the Calendar

new Calendar(
 
  // ELEMENT
  // This is the element you want to attach the Calendar to.
  // The calendar will be shown when the user clicks the
  // specified element.
  'test-input',
  // OPTIONS
  {
    'format':         '%Y-%m-%d %H:%i',
    'minYear':        2005,
    'maxYear':        2010,
    'showHour':       true,
    'showMinute':     true,
    'showMeridiem':   true
  }
);

The format option is important, it defines the way the date will be shown by using format codes.

The table below containts the currently supported format codes:

Format CharacterDescriptionReturned Values
%dDay of the month with leading zeros01 up to 31
%jDay of the month without leading zeros1 up to 31
%yTwo digit representation of a year00 up to 99
%nNumeric representation of a month, without leading zeros1 up to 12
%g12-hour format of an hour without leading zeros1 up to 12
%kMinutes without leading zeros0 up to 59
%zSeconds without leading zeros0 up to 59
%aLower case Ante meridiem and Post meridiemam/pm
%G24-hour format of an hour without leading zeros0 up to 24
%mNumeric representation of a month, with leading zeros01 up to 12
%H24-hour format of an hour with leading zeros00 up to 23
%h12-hour format of an hour with leading zeros0 up to 23
%iMinutes with leading zeros00 up to 59
%sSeconds with leading zeros00 up to 59
%AUpper case Ante meridiem and Post meridiemAM/PM

Options

variant

Possible values are 1 or 0, each value will produce some cosmetic variations on the control.

blank

Set to true if you want the input to be empty as default.

displayFormat

Date format that will be shown to the user. Default falls to %Y-%m-%d.

storeFormat

Date format that will be stored in the (invisible) input. Default falls to %Y-%m-%d.

format

A quick shortcurt for having identical storeFormat and displayFormat.

showHour

If true, an hours picker will be shown.

firstWeekDay

First day of the week. 0 for Sunday, 6 for Saturday. Defaults to 1.

showMinute

If true, a minutes picker will be shown.

showSecond

If true, a seconds picker will be shown.

showMeridiem

If true, a meridiem picker will be shown (am/pm).

minYear

Minimum year to show.

maxYear

Maximum year to show.

Methods

close()

Closes the calendar.

Copyright © 2007-2009 Astrata Software.