ss:ajax:delayedload ss:ajax:event ss:ajax:region ss:data:calendar ss:data:column ss:data:repeater ss:data:table ss:data:template ss:data:tree ss:forms:captcha ss:forms:checkbox ss:forms:codeeditor ss:forms:combobox ss:forms:datepicker ss:forms:dialogbox ss:forms:editbox ss:forms:fileupload ss:forms:form ss:forms:galleryupload ss:forms:hidden ss:forms:money ss:forms:officeuseregion ss:forms:option ss:forms:password ss:forms:paymentmethod ss:forms:radiobutton ss:forms:row ss:forms:searchbox ss:forms:signature ss:forms:slider ss:forms:spinbox ss:forms:submitbutton ss:forms:submitimage ss:forms:submitlink ss:forms:textarea ss:forms:timepicker ss:layout:gallery ss:layout:rotator ss:layout:stepper ss:layout:stepperpanel ss:layout:tablist ss:layout:tablistitem ss:logic:dependency ss:logic:parse ss:logic:if ss:logic:else ss:logic:include ss:logic:variable ss:navigation:breadcrumbs ss:navigation:item ss:navigation:primary ss:navigation:secondary ss:personalisation:firstname ss:personalisation:fullname ss:personalisation:lastname ss:personalisation:other ss:regions:content ss:regions:contentadditional ss:regions:security ss:regions:togglable ss:standard:audio ss:standard:embed ss:standard:icon ss:standard:image ss:standard:label ss:standard:link ss:standard:script ss:standard:video ss:templates:card ss:templates:column ss:templates:faq ss:templates:row ss:templates:section ss:templates:teammember ss:thirdparty:googlemap ss:thirdparty:googlemapmarker

<ss:forms:datepicker />

Creates a date picker widget, allowing the user to select a date / time. The value returned is a MYSQL-compatible datetime string, in the UTC timezone. When an end-user submits a date, it will be converted from their local timezone to UTC.

Attributes

disableDays

string

Specify a list of 3 character days (comma separated) to disable

disabledays="mon,wed" - Disables Monday and Wednesday disabledays="fri" - Disables Friday

focusOnLoad

bool

If true, this control will attempt to focus itself after the page has loaded. Note that only one element may be focused on the page at a time. Default = false.

hasTime

bool

Whether or not the date picker has a time part (HH:SS PM/AM)

height

mixed

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.

string

(Required) Most form items need a unique id so that they can submit data to the server. No two form items may have the same id. For situations where multiple form items submit to the same field, see the name attribute. Id's that begin with contact_ will automatically save Contact information to the Contact database as long as the user has entered enough identifying information (ideally Name and Email). Check the Contact Fields page for correct field names.

name

string

Sets the name of the form item. Most of the time, the id attribute will suffice. However with form items that post multiple values into an array, each item will need to have the same name, followed by []. For example three controls with name="data[]", will all post into 'data'. Radio buttons belonging to the same group will have to share the same name.

showWrapping

bool

Whether or not the date picker shows the days wrapping from the current month

valueDefaultNow

bool

Whether or not to default the value to the current time

valueMin

string

Is there a max limit? Accepted values: yyyy-dd-mm, today

width

mixed

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Examples

Standalone

Standalone date picker.

XML Code:

Run Example

Birthday

Demonstrates a birthday form row using edit boxes.

XML Code:

Run Example

Using collecting date information

Demonstrates a Date Picker control embedded in a form.

XML Code:

<ss:ajax:event id="ajaxevent1" updatecontrols="ajaxregion1" />

<ss:forms:form id="form1" method="ajax" onsubmitajax="ajaxevent1">
	<ss:forms:row label="First and Last Names">
		<ss:forms:editbox id="contact_first_name" width="80" validations="mandatory" />
		<ss:forms:editbox id="contact_last_name" width="110" validations="mandatory" />
	</ss:forms:row>
	<ss:forms:row label="Custom Date" validations="mandatory">
		<ss:forms:datepicker id="custom_date" />
	</ss:forms:row>
	<ss:forms:row type="one_column" align="center">
		<ss:forms:submitbutton value="Submit" />
	</ss:forms:row>

<ss:ajax:region id="ajaxregion1">
		<ss:logic:if test="$form1.isSubmitted()">
			<ss:forms:row label="your name was:">
				[? $contact_first_name.value ?]
			</ss:forms:row>
			<ss:forms:row label="your last name was:">
				[? $contact_last_name.value ?]
			</ss:forms:row>
			<ss:forms:row label="your date was:">
				[? $birthdate.value ?]
			</ss:forms:row>
		</ss:logic:if>
	</ss:ajax:region>

</ss:forms:form>

Run Example