Simpltry Date Picker Widget

simpltry_widget="date_picker"

The date picker widget can be attached to a text field or any block level element (like div or p). If you choose to bind it to a text field it serializes the last selection a user makes to that field in the format "mm/dd/yyyy". To pre populate the date picker with a specific date just set the value on the text field in the same format. Here is a date picker bound to a text field click on the text field to display the date picker.

example markup:

<p><input type="text" name="oldDate" id="datefield2" simpltry_widget="date_picker" value="3/7/1979" /></p>

simpltry_widget="date_time_picker"

The Date Picker can also be a Date Time Picker. The format is MM/DD/YYYY at MI:SSPM. You can also choose an alternate handle for your popup instead of the textbox itself.

example markup:

<p><input type="text" name="oldDate" id="datefield2" simpltry_widget="date_time_picker" simpltry_options="handle: 'calendar'" value="3/7/1979 at 7:30PM" /> <img src="img/calendar.gif" id="calendar" /></p>

This demo does not have the date picker bound to any thing. It is not really that useful, when you select a date it alerts the selected date.

example markup:

<p simpltry_widget="date_picker" simpltry_options="onSelect: function(year, month, day){alert(month + '/' + day + '/' + year);}"></p>

css classes

The color picker is builds a dynamic table. Simpltry tries to put css classes on different parts of the widget. Here are a list of the classes that you can use. For any information about which element these classes get placed on there is two things you have to do. First use Firefox and second install the firebug extension. That allows your to inspect your DOM after it has been built, not just the page source that gets downloaded.

A good starting off point is the style sheet we used for this demo. demo style sheet