Reference Source
import {Datepicker} from '@adobe/coral-spectrum'
public class | source

Datepicker

Expression Extends:

class Datepicker extends BaseFormField(BaseComponent(HTMLElement))

A Datepicker component that can be used as a date and time selection form field. Leverages momentJS if loaded on the page.

See:

Example:

Markup
<coral-datepicker></coral-datepicker>
JS constructor
new Coral.Datepicker();

Static Member Summary

Static Public Members
public static

Returns Datepicker types.

public static

Returns Datepicker variants.

Member Summary

Public Members
public

Whether this field is disabled or not.

public

The format used to display the selected date(time) to the user.

public

The format used to display the current month and year.

public

invalid: *

Inherited from BaseFormField#invalid.

public

Inherited from BaseFormField#labelled.

public

Inherited from BaseFormField#labelledBy.

public

The maximum date that the Datepicker will accept as valid.

public

The minimum date that the Datepicker will accept as valid.

public

Name used to submit the data in a form.

public

Returns the inner overlay to allow customization.

public

Short hint that describes the expected value of the Datepicker.

public

Whether this field is readOnly or not.

public

Whether this field is required or not.

public

Defines the start day for the week, 0 = Sunday, 1 = Monday etc., as depicted on the calendar days grid.

public

The type of datepicker to show to the user.

public

The current value.

public

The value of the element, interpreted as a date, or null if conversion is not possible.

public

The format to use on expressing the selected date as a string on the value attribute.

public

The datepicker's variant. See DatepickerVariantEnum.

  • DatepickerVariantEnum.DEFAULT by default.
  • reflected

Static Public Members

public static type: DatepickerTypeEnum: * source

Returns Datepicker types.

public static variant: DatepickerVariantEnum: * source

Returns Datepicker variants.

Public Members

public disabled: Boolean source

Whether this field is disabled or not.

  • false by default.
  • reflected

public displayFormat: String source

The format used to display the selected date(time) to the user. If the user manually types a date, this format will be used to parse the value. When using this component on a mobile device, the display format must follow the format used by the native input. If an empty string is provided, then the default value per type will be used. The default value depends on the type, which can be one from YYYY-MM-DD, YYYY-MM-DD[T]HH:mmZ or HH:mm. Include momentjs to support additional format string options see http://momentjs.com/docs/#/displaying/.

  • "YYYY-MM-DD" by default.
  • reflected

public headerFormat: String source

The format used to display the current month and year. 'MMMM YYYY' is supported by default. Include momentjs to support additional format string options see http://momentjs.com/docs/#/displaying/.

See Coral.Calendar#startDay

  • "MMMM YYYY" by default.

public invalid: * source

Inherited from BaseFormField#invalid.

public labelled: * source

Inherited from BaseFormField#labelled.

public labelledBy: * source

Inherited from BaseFormField#labelledBy.

public max: String | Date source

The maximum date that the Datepicker will accept as valid. It must not be less than its minimum. It accepts both date and string values. When a string is provided, it should match the Coral.Datepicker#valueFormat.

See Coral.Calendar#max

  • null by default.

public min: String | Date source

The minimum date that the Datepicker will accept as valid. It must not be greated that its maximum. It accepts both date and string values. When a string is provided, it should match the Coral.Datepicker#valueFormat.

See Coral.Calendar#min

  • null by default.

public name: String source

Name used to submit the data in a form.

  • "" by default.
  • reflected

public overlay: Popover source

Returns the inner overlay to allow customization.

  • read-only

public placeholder: String source

Short hint that describes the expected value of the Datepicker. It is displayed when the Datepicker is empty.

  • "" by default.
  • reflected

public readOnly: Boolean source

Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.

  • false by default.
  • reflected

public required: Boolean source

Whether this field is required or not.

  • false by default.
  • reflected

public startDay: Number source

Defines the start day for the week, 0 = Sunday, 1 = Monday etc., as depicted on the calendar days grid.

See Coral.Calendar#startDay

  • 0 by default.

public type: DatepickerTypeEnum source

The type of datepicker to show to the user. See DatepickerTypeEnum.

  • DatepickerTypeEnum.DATE by default.
  • reflected

public value: String source

The current value. When set to "today", the value is coerced into the client's local date expressed as string formatted in accordance to the set valueFormat.

See Coral.Calendar#value

  • "" by default.

public valueAsDate: Date source

The value of the element, interpreted as a date, or null if conversion is not possible.

  • null by default.

public valueFormat: String source

The format to use on expressing the selected date as a string on the value attribute. The value will be sent to the server using this format. If an empty string is provided, then the default value per type will be used. The default value depends on the type, which can be one from YYYY-MM-DD, YYYY-MM-DD[T]HH:mmZ or HH:mm. Include momentjs to support additional format string options see http://momentjs.com/docs/#/displaying/.

  • "YYYY-MM-DD" by default.
  • reflected

public variant: DatepickerVariantEnum source

The datepicker's variant. See DatepickerVariantEnum.

  • DatepickerVariantEnum.DEFAULT by default.
  • reflected