forms:datepicker
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker
DESCRIPTION
ATTRIBUTES
dataColumn
disableDays
disableWeekends
disabled
focusOnLoad
hasTime
height
id
name
saveState
showWrapping
transformations
validations
valueDefaultNow
valueMin
width
EXAMPLES
Standalone
Using collected date information
Birthday
forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<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

dataColumn
Sets the data column

The datacolumn links the form item to a key used when getting or saving from a component (as defined by the parent form).
disableDays
string
Specify a list of 3 character days (comma separated) to disable

disabledays="mon,wed" - Disables Monday and Wednesday disabledays="fri" - Disables Friday
disableWeekends
bool
Disable weekends

Whether to select a whole week
disabled
bool
Disable Input

Disables the input, preventing user interaction
focusOnLoad
bool
Focus On Load

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
Add a Time part to the Date

Whether the date picker has a time part (HH:SS PM/AM)
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
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.
saveState
bool
Restore state on reload

Whether the value of the input is persists when the page is revisited.
Default = false
showWrapping
bool
Wrap days from current month

Whether the date picker shows the days wrapping from the current month
transformations
Value Transformations

Sets the value transformations to be applied to the value of the form item as a comma separated string.
validations
Validations

Sets the validations to be applied to the value of the form item as a comma separated string.

Eg: validations="mandatory"
valueDefaultNow
bool
Default Value to current time

Whether to default the value to the current time
valueMin
string
Is there a max limit?
Accepted values: yyyy-dd-mm, today
width
string
Width

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

Examples

Standalone

Standalone date picker.

HTML:

<forms:datepicker id="custom_date" />

Run Example

Using collected date information

Demonstrates a Date Picker control embedded within a form.

HTML:

<ajax:event id="ajaxevent1" updateregions="ajaxregion1" /> <forms:form id="form1" method="ajax" onsubmitajax="ajaxevent1"> <forms:row label="First and Last Names"> <forms:editbox id="contact_first_name" width="80" validations="mandatory" /> <forms:editbox id="contact_last_name" width="110" validations="mandatory" /> </forms:row> <forms:row label="Custom Date" validations="mandatory"> <forms:datepicker id="custom_date" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton>Submit</forms:submitbutton> </forms:row> <ajax:region id="ajaxregion1"> <logic:if test="$form1.isSubmitted()"> <forms:row label="your name was:"> [? $contact_first_name.value ?] </forms:row> <forms:row label="your last name was:"> [? $contact_last_name.value ?] </forms:row> <forms:row label="your date was:"> [? $birthdate.value ?] </forms:row> </logic:if> </ajax:region> </forms:form>

Birthday

Demonstrates a birthday form row using edit boxes.

HTML:

<forms:row label="Date of Birth" description="Format: DD / MM / YYYY"> <forms:editbox id="contact_dob_d" width="40" /> / <forms:editbox id="contact_dob_m" width="40" /> / <forms:editbox id="contact_dob_y" width="80" /> </forms:row>

Run Example