Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
General Purpose
ButtonUploadButtonSectionHeadingFlexBoxResizerIconProgressBarTextHighlightedSearchText
General Purpose
Collections
GridTree GridList
Collections
Form
TextFieldNumberFieldDateFieldLookupFieldCheckboxRadioSelectTextAreaDateTimeFieldCalendarMonthFieldMonthPickerColorFieldColorPickerSlidersSwitchesLabelsLabeledContainerFieldGroupValidationGroupValidator
Form
Navigation
MenuTabHScrollerLinkLinkButton
Navigation
Containers
PureContainerHtmlElementContentResolverIsolatedScopeDetachedScope
Containers
Overlays
OverlaysWindowsMsgBoxToastTooltipsFlyweight TooltipsContextMenuDropdown
Overlays
Report Edit

DateTimeField

import { DateTimeField } from 'cx/widgets';

DateTimeField control is used for selecting date, time or date time values. It supports textual input and picking from a dropdown.

DateTimeField
<div layout={LabelsLeftLayout}>
    <DateTimeField label="Date & Time" value-bind="$page.date" />
</div>
Copied!Cx Fiddle

DateTimeField can be used to select only time or date segment of the date.

DateTimeField
<div layout={LabelsLeftLayout}>
    <DateTimeField label="Time" value-bind="$page.time" segment="time" />
    <TimeField label="Time" value-bind="$page.time" />
    <TimeField label="Time" value-bind="$page.time" picker="list" step={20} />
</div>
Copied!Cx Fiddle

It's shorter to use TimeField alias which is more readable and sets segment="time".

It's possible to combine DateField and TimeField to edit the same value. Use partial flag to indicate that the field affects only one segment of the selected date.

Selected:
DateTimeField
<div layout={LabelsTopLayout}>
    <DateField label="Date" value-bind="$page.datetime" partial />
    <TimeField label="Time" value-bind="$page.datetime" partial />
</div>
<div text-tpl="Selected: {$page.datetime:datetime}" />
Copied!Cx Fiddle

Configuration

PropertyDescriptionType
format

Date format used to display the selected date. See Formatting for more details.

string
partial

Preserves date or time segment set by some other field. Useful in Date/Time combos.

string
picker

Modifies the appearance of dropdown into a list format. In this case step is also configurable.

string
value

Selected date. This should be a Date object or a valid date string consumable by Date.parse function.

string/Date
alwaysShowClear

Set to true to display the clear button even if required is set. Default value is false.

boolean
autoFocus

Set to true to automatically focus the field, after it renders for the first time.

boolean
autoOpen

Set to true to auto open the time picker. Commonly used in cell-editable grids.

boolean
baseClass

Base CSS class to be applied to the field. Defaults to datefield.

string
class
className

Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.

string/object
disabled

Defaults to false. Set to true to disable the field.

boolean
disabledDaysOfWeek

Defines which days of week should be displayed as disabled, i.e. [0, 6] will make Sunday and Saturday unselectable.

array
emptyText

Text to be rendered in view mode when the field is empty.

string
enabled

The opposite of disabled.

boolean
encoding

Sets the function that will be used to convert Date objects before writing data to the store. Default implementation is Date.toISOString. See also Culture.setDefaultDateEncoding.

function
error

Used for validation. If error evaluates to non-null, the field is marked in red.

string
focusInputFirst

Set to true to focus the input field instead of the picker first.

boolean
help

Additional content to be displayed next to the field. This is commonly used for presenting additional information or validation errors.

string/config
helpPlacement

Set to material to use custom help placement instruction. Used in Material theme to implement absolutely positioned validation messages.

string
helpSpacer

Indicates that help should be separated from the input with a whitespace. Default is true.

boolean
hideClear

Set to true to hide the clear button. It can be used interchangeably with the showClear property. Default value is true.

boolean
icon

Name or configuration of the icon to be put on the left side of the input.

string/object
id

Id to be used on rendered input.

string
inputAttrs

Additional attributes that should be rendered on the input element. E.g. inputAttrs={{ autoComplete: "off" }}.

object
inputClass

Additional CSS class applied to the input element. Used for setting visual elements, such as borders and backgrounds.

string/object
inputStyle

Style object applied to the input element. Used for setting visual elements, such as borders and backgrounds.

string/object
label

Field label. For advanced use cases, see Labels.

string/config
labelClass

Additional CSS class to be passed to the label object.

string
labelPlacement

Set to material to use custom label placement instruction. Used in Material theme to implement animated labels.

string
labelStyle

Additional CSS styles to be passed to the label object.

string/object
maxExclusive

Set to true to disallow the maxValue. Default value is false.

boolean
maxValue

Maximum date value. This should be a Date object or a valid date string consumable by Date.parse function.

string/Date
minExclusive

Set to true to disallow the minValue. Default value is false.

boolean
minValue

Minimum date value. This should be a Date object or a valid date string consumable by Date.parse function.

string/Date
mod

Appearance modifier. For example, mod="big" will add the CSS class .cxm-big to the block element.

string/array
mode

Either view or edit (default). In view mode, the field is displayed as plain text.

string
onParseInput

Callback used for parsing custom input, e.g. 'today'. Returns Date object.

function
outerLayout

Defines the outer layout which wraps the widget.

widget
placeholder

Default text displayed when the field is empty.

string
putInto
contentFor

Used with outer layouts. Specifies the name of the content placeholder which should render the widget.

string
readOnly

Defaults to false. Used to make the field read-only.

boolean
required

Defaults to false. Used to make the field required.

boolean
segment

Defines which segment of the date/time object is affected by this field. Allowed values are date, time and datetime.

string
showClear

Set to false to hide the clear button. It can be used interchangeably with the hideClear property. Default value is false.

string
style

Style object applied to the wrapper div. Used for setting the dimensions of the element.

string/object
tabIndex

Custom tab index to be set on the field.

string
tabOnEnterKey

Set to true to move focus to the next field if Enter key is pressed.

boolean
tooltip

Tooltip configuration. For more info see Tooltips.

string/object
trackFocus

If set to true top level element will get additional CSS class indicating that input is focused. Used for adding special effects on focus. Default is false.

boolean
validationMode

Defines how to present validation errors. Default mode is tooltip. Other options are help and help-block. See Validation Options for more information.

string
validationParams

An structured binding for additional validation parameters. Useful if validation depends on values from other fields, e.g. confirm password. Calculated value is passed as the third argument to onValidate.

structure
vdomKey

Key that will be used as the key when rendering the React component.

string
viewMode

Set to true to switch into view mode. Same as mode="view".

boolean
visible
if

Visibility of the widget. Defaults to true.

boolean
visited

Validation errors are not shown until the user visits the field. Setting this field to true will cause that validation error indicators become visible immediately.

boolean