Class: DateTimePicker

DateTimePicker

The Date Picker control allows for the specification of a date (only, no time) thru an entry field or a Calendar widget. A DateTimePicker control provides the following configuration properties in Process Designer:

Appearance

Date Picker Type: Set whether the datepicker should have a textbox which when clicked shows a calendar, or simply be an inline calendar
{Text Input | Inline}
string
Width: Width of the DatePicker string
Size: Set the size style of the control
{Default | Large | Small}
string
Label Placement: Set the label placement for the control
{Top | Left}
string
Label Width: The width of the label in px, % or em. For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed. string
Format: Set the formatting used when displaying/typing dates, using a combination of d, dd, D, DD, m, mm, M, MM, yy, and yyyy. Applies to the display of the date associated with the control and to the Available Start Date and Available End Date configuration options of the Behavior group. Default: "mm/dd/yyyy". - d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05. - D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday. NOTE Ignored when setting date - m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07. - M, MM: Abbreviated and full month names, respectively. Eg, Jan, January - yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012. Please NOTE the following: Accepted delimeters are "-", "/", and " ". When using a numeric format WITH NO delimeters you must specify: 2 digits for day (i.e. dd), 2 digits for month (i.e. mm), and 4 digits for year (i.e. yyyy). string
Week Start: Select day to use to start each week
{Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday}
string
Disabled Week Days: Select days of the week that should be disabled (if any) DatePickerDisabledWeekDays
Sunday Disable Sundays boolean
Monday Disable Mondays boolean
Tuesday Disable Tuesdays boolean
Wednesday Disable Wednesdays boolean
Thursday Disable Thursdays boolean
Friday Disable Fridays boolean
Saturday Disable Saturdays boolean
Show Today Button: Display button to set date to today boolean
Show Clear Button: Display button that clears date value boolean
Orientation: The position of the calendar when clicked
{Auto | Top Auto | Bottom Auto | Auto Left | Top Left | Bottom Left | Auto Right | Top Right | Bottom Right}
string
Color Style: Color-based styling for this control (default, primary, success, warning, danger)
{Default | Info | Success | Warning | Danger}
string
Show Week Number: Shows the number of week it is in the year boolean
Highlight Today: Set to true to highlight today's date in the calendar boolean
Hide header: boolean

Behavior

Custom picker only: Check this option to always display the custom date time picker. On mobile devices attempt will be made to display native date time picker, if non-supported configuration options are specifed then custom date time picker will be displayed. Non-supported configuration options include "Disabled Week Days", "Blackout Dates", "Blackout date start", "Blackout date end", "Week Start", "Calendar type" as hebrew/islamic and "DatePicker Type" as "Inline" boolean
Include time picker: boolean
Calendar type: Select the type of calendar
{Gregorian | Hebrew | Islamic}
string
Tab Index: Form control tabbing sequence index. Tab indices start at 1, and may be set sparsely. string
Placeholder Text: Placeholder text to use when no date has been entered string
Available Start Date: Dates before the start date will be blocked out. The format for this date is specified by the Appearance, Format configuration option. Date
Available End Date: Dates after the end date will be blocked out. The format for this date is specified by the Appearance, Format configuration option. Date
Blackout Dates: Set a date that the user cannot select. To set a range of blackout dates, create a variable containing the list of dates and use that variable for this configuration option Date[]
Blackout date start: Dates after the start date, including the selected date, will be blocked out Date
Blackout date end: Dates before the end date, including the selected date, will be blocked out Date
Start View: Level of granularity calendar should start at
{Month | Year | Decade}
string
Minimum View Mode: Minimum date granularity level to use in the calendar
{Days | Months | Years}
string
No Auto-close: When set to true, calendar will not close when a date is selected (calendar will close when control loses focus) boolean

Events

On Load:
Description: This event is triggered the datepicker control is loaded.
Example:
var workerStart = ${StartDate}.getDate();  me.setStart(workerStart);
On Change:
Description: This event is triggered when there is a change detected.
Example:
return confirm("Are you sure you want to change date?")
On Day Cell Render:
Description: This event is triggered before the date shows on the control.
Example:
me.setDate("01/01/2015")
Context Variables date {object}
Articles
Datepicker

new DateTimePicker()

This constructor is never used explicitly.

Extends

Members

Methods

Add/replace CSS class(es) for this control
Name Type Description
name string CSS class name(s) to add to the control. Separate class names by a space if more than one class.
replaced string optional CSS class name(s) to be replaced by the first argument. Separate class names by a space if more than one class.
Example
Button.addClass("green");
Clear selected date on this control
Set focus on this control

getColorStyle(){string}

Gets color style of DatePicker control. NOTE: This always returns the color as set, to avoid ambiguity always set the color using "D"|"I"|"S"|"W"|"G"
Returns:
Type Description
string

getDate(){date}

Get date for DatePicker control
Returns:
Type Description
date

getEnd(){string}

Get the end date of the calendar that is currently set, if available.
Returns:
Type Description
string
Example
me.getEnd();

getLabel(){string}

Get label associated with DatePicker control
Returns:
Type Description
string

getLabelPlacement(){string}

Get label placement for control. NOTE: This always returns the label placement as set, to avoid ambiguity always set the label placement using "T"|"L"
Returns:
Type Description
string
Example
me.getLabelPlacement();

getLabelWidth(){string}

Get label width of DatePicker control (e.g. 50px, 20%, 2em - omitting the unit assumes px)
Returns:
Type Description
string

getPlaceholder(){string}

Get placeholder text associated with DatePicker control
Returns:
Type Description
string

getSizeStyle(){string}

Gets size style of DatePicker control. NOTE: This always returns the size style as set, to avoid ambiguity always set the size style using "D"|"S"|"L"
Returns:
Type Description
string

getStart(){string}

Get the start date of the calendar that is currently set, if available.
Returns:
Type Description
string
Example
me.getStart();

getTabIndex(){integer}

Get tab index for DatePicker control
Returns:
Type Description
integer

getType(){string}

Get descriptive string representing the type of control
Returns:
Type Description
string

getWidth(){string}

Get configured width for DatePicker control (including unit)
Returns:
Type Description
string
Hide this view/control
Name Type Description
collapseFlag boolean Set to true to collapse the view (equivalent to a view setting of "NONE")
Example
MyView.hide();
Indicates bound status of control.
Returns:
Type Description
boolean True if the control is bound to coach data.
Checks if the view is enabled or not
Returns:
Type Description
boolean Enabled status
Example
var enabled = MyView.isEnabled();

isLabelVisible(){boolean}

Get label visibility for DatePicker control
Returns:
Type Description
boolean
Checks whether or not view is visible
Returns:
Type Description
boolean Visibility status
Example
var visible = MyView.isVisible();
Propagates value change of control up through parent views
Name Type Description
event Event Value change event (usually an onchange event)
Returns:
Type Description
boolean True if a formula update was triggered on the control's parent, otherwise false
Example
MyView.propagateUp(event);

setColorStyle(style)

Sets color style of DatePicker control. NOTE: to avoid ambiguity always set the color using "D"|"I"|"S"|"W"|"G"
Name Type Description
style string "DEFAULT"|"DEF"|"D"=Default | "INFO"|INF"|"I"=Info | "SUCCESS"|"S"=Success | "WARNING"|"WARN"|"W"=Warning | "DANGER"|"ERROR"|"ERR"|"G"=Danger

setDate(date)

Set date for DatePicker control
Name Type Description
date date Sets the date
Enable/disable this view/control
Name Type Description
enabled boolean Enabled/read-only flag (true to enable view, false to disable/make read-only)
required boolean Enable/disable required field flag for control
Example
MyView.setEnabled(false); //Make MyView read-only
Set the available start date programmatically
Name Type Description
end string This sets the cut-off date, dates subsequent to this are disallowed . Must use the format specified in the Format configuration option.
Examples
me.setEnd("06/07/2015");
me.setEnd("6/7/2015");
me.setEnd("6-7-15");

setLabel(label)

Set label associated with DatePicker control
Name Type Description
label string Date picker label

setLabelPlacement(placement)

Set label placement for control. NOTE: to avoid ambiguity always set the label placement using "T"|"L"
Name Type Description
placement string "T"|"TOP"=Top | "L"|"LEFT"=Left
Example
me.setLabelPlacement("L");

setLabelVisible(flag)

Set label visibility for DatePicker control
Name Type Description
flag boolean Sets the visibility of the label {true | false}

setLabelWidth(labelWidth)

Set label width of DatePicker control (e.g. 50px, 20%, 2em - omitting the unit assumes px)
Name Type Description
labelWidth string Control's label width

setPlaceholder(text)

Set placeholder text for DatePicker control
Name Type Description
text string Placeholder text

setSizeStyle(style)

Sets size style of DatePicker control. NOTE: to avoid ambiguity always set the size style using "D"|"S"|"L"
Name Type Description
style string "DEFAULT"|"DEF"|"NORMAL"|"D"=Default | "SMALL"|"S"=Small | "LARGE"|"L"=Large

setStart(start)

Set the available start date programmatically
Name Type Description
start string This sets the start date, dates prior to this date are disallowed. Must use the format specified in the Format configuration option.
Examples
me.setStart("06/01/2015");
me.setStart("6/1/2015");
me.setStart("6-1-15");

setTabIndex(tabIndex)

Sets tab index of DatePicker control
Name Type Description
tabIndex integer Tab indices start at 1 and may be set sparsely
Show/hide this view/control
Name Type Description
visible boolean Visibility flag (true to show view, false to hide)
collapse boolean Set to true to collapse the control space when visible is set to false.
Examples
MyView.setVisible(false, false); //Equivalent to MyView.hide()
MyView.setVisible(false, true); // Sets visibility to "None"

setWidth(width)

Set width of DatePicker control (e.g. 50px, 20%, 2em - omitting the unit assumes px)
Name Type Description
width string sets the width of the control
Show this view/control
Example
MyView.show();
Broadcasts the expression trigger for the specified view
Name Type Default Description
phase int bpmext.ui.PHASE_NORMAL optional The phase we are currently in
Example
MyView.triggerFormulaUpdates();