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()

DateTimePicker.js, line 42
This constructor is never used explicitly.

Extends

Members

uibpmext.ui.View

Methods

inherited addClass(name, replaced)

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 2466
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()

DateTimePicker.js, line 484
Clear selected date on this control

focus()

DateTimePicker.js, line 477
Set focus on this control

getColorStyle(){string}

DateTimePicker.js, line 453
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}

DateTimePicker.js, line 381
Get date for DatePicker control
Returns:
Type Description
date

getEnd(){string}

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

getLabel(){string}

DateTimePicker.js, line 323
Get label associated with DatePicker control
Returns:
Type Description
string

getLabelPlacement(){string}

DateTimePicker.js, line 340
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}

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

getPlaceholder(){string}

DateTimePicker.js, line 405
Get placeholder text associated with DatePicker control
Returns:
Type Description
string

getSizeStyle(){string}

DateTimePicker.js, line 437
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}

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

getTabIndex(){integer}

DateTimePicker.js, line 469
Get tab index for DatePicker control
Returns:
Type Description
integer

getType(){string}

DateTimePicker.js, line 491
Get descriptive string representing the type of control
Returns:
Type Description
string

getWidth(){string}

DateTimePicker.js, line 421
Get configured width for DatePicker control (including unit)
Returns:
Type Description
string

inherited hide(collapseFlag)

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 1861
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();

inherited isBound(){boolean}

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 2088
Indicates bound status of control.
Returns:
Type Description
boolean True if the control is bound to coach data.

inherited isEnabled(){boolean}

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 2034
Checks if the view is enabled or not
Returns:
Type Description
boolean Enabled status
Example
var enabled = MyView.isEnabled();

isLabelVisible(){boolean}

DateTimePicker.js, line 365
Get label visibility for DatePicker control
Returns:
Type Description
boolean

inherited isVisible(){boolean}

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 1943
Checks whether or not view is visible
Returns:
Type Description
boolean Visibility status
Example
var visible = MyView.isVisible();

inherited propagateUpValueChange(event){boolean}

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 2403
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)

DateTimePicker.js, line 445
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)

DateTimePicker.js, line 389
Set date for DatePicker control
Name Type Description
date date Sets the date

inherited setEnabled(enabled, required)

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 1959
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

setEnd(end)

DateTimePicker.js, line 510
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)

DateTimePicker.js, line 315
Set label associated with DatePicker control
Name Type Description
label string Date picker label

setLabelPlacement(placement)

DateTimePicker.js, line 331
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)

DateTimePicker.js, line 373
Set label visibility for DatePicker control
Name Type Description
flag boolean Sets the visibility of the label {true | false}

setLabelWidth(labelWidth)

DateTimePicker.js, line 357
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)

DateTimePicker.js, line 397
Set placeholder text for DatePicker control
Name Type Description
text string Placeholder text

setSizeStyle(style)

DateTimePicker.js, line 429
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)

DateTimePicker.js, line 499
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)

DateTimePicker.js, line 461
Sets tab index of DatePicker control
Name Type Description
tabIndex integer Tab indices start at 1 and may be set sparsely

inherited setVisible(visible, collapse)

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 1887
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)

DateTimePicker.js, line 413
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

inherited show()

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 1849
Show this view/control
Example
MyView.show();

inherited triggerFormulaUpdates(phase)

BPMExt-Core/com/salientprocess/bpm/views/bpmext.js, line 4229
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();