Lowdefy
v3.17.2/input/DateTimeSelector/

DateTimeSelector

value type: date

The DateTimeSelector block allows a user to select a date and a time from a calender.

By default, the time selected by the user is converted to GMT time, based on the timezone of the user. The selector will also display the selected time in the correct timezone for that user. If the selectGMT property is set to true, the value of the selector will be the time selected by the user as GMT time, and not in the timezone of the user.

Other date type blocks are DateRangeSelector, DateTimeSelector, MonthSelector and WeekSelector.

block_id: null

id: block_id
type: DateTimeSelector
properties:
  disabledDates:
    dates: []
    ranges: []

properties:
Allow the user to clear their input.
Autofocus to the block on page load.
Disable the block if true.
disabledDates:
dates:
No Items
Disable all dates greater than the maximum date. Can be a date string or a _date object.
Disable all dates less than the minimum date. Can be a date string or a _date object.
ranges:
No Items
Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to moment.js formats.
Hour intervals to show in the time selector.
Css style to applied to input.
label:
Align label left or right when inline.
Append label with colon.
Hide input label.
Extra text to display beneath the content.
Css style to applied to label extra.
Css style to applied to label feedback.
Display feedback extra from validation, this does not disable validation.
Render input and label inline.
Label inline span.
Label title.
Minute intervals to show in the time selector.
Placeholder text inside the block before user types input.
Minute intervals to show in the time selector.
Shows the user's selection as UTC time, not time-zone based.
Shows a 'Now' button to set current time.
Shows a button to easily select the current date if true.
Size of the block.
Name of an Ant Design Icon or properties of an Icon block to customize icon on right-hand side of the date picker.
Time format to show in the time selector. HH:mm:ss will show hours, minutes and seconds, HH:mm only hours and minutes and HH only hours.
Title to describe the input component, if no title is specified the block id is displayed.
type: object
properties:
  events:
    additionalProperties: false
    properties:
      onChange:
        description: Trigger actions when selection is changed.
        type: array
    type: object
  properties:
    additionalProperties: false
    properties:
      allowClear:
        default: true
        description: Allow the user to clear their input.
        type: boolean
      autoFocus:
        default: false
        description: Autofocus to the block on page load.
        type: boolean
      disabled:
        default: false
        description: Disable the block if true.
        type: boolean
      disabledDates:
        description: Disable specific dates so that they can not be chosen.
        properties:
          dates:
            description: >-
              Array of specific dates to be disabled. Can be date strings or a
              _date objects.
            items:
              description: Specific dates to be disabled.
              type:
                - string
                - object
            type: array
          max:
            description: >-
              Disable all dates greater than the maximum date. Can be a date
              string or a _date object.
            type:
              - string
              - object
          min:
            description: >-
              Disable all dates less than the minimum date. Can be a date string
              or a _date object.
            type:
              - string
              - object
          ranges:
            description: >-
              Array of array pairs of start and end dates be disabled. Can be date
              strings or a _date objects.
            items:
              description: Specific date ranges to be disabled.
              items:
                type:
                  - string
                  - object
              type: array
            type: array
        type: object
      format:
        default: YYYY-MM-DD HH:mm
        description: >-
          Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a
          date value of 1999-12-31 as "31 December 1999". The format has to
          conform to moment.js formats.
        type: string
      hourStep:
        default: 1
        description: Hour intervals to show in the time selector.
        minimum: 1
        type: integer
      inputStyle:
        description: Css style to applied to input.
        type: object
      label:
        additionalProperties: false
        description: Label properties.
        properties:
          align:
            default: left
            description: Align label left or right when inline.
            enum:
              - left
              - right
            type: string
          colon:
            default: true
            description: Append label with colon.
            type: boolean
          disabled:
            default: false
            description: Hide input label.
            type: boolean
          extra:
            description: Extra text to display beneath the content.
            type: string
          extraStyle:
            description: Css style to applied to label extra.
            type: object
          feedbackStyle:
            description: Css style to applied to label feedback.
            type: object
          hasFeedback:
            default: true
            description: >-
              Display feedback extra from validation, this does not disable
              validation.
            type: boolean
          inline:
            default: false
            description: Render input and label inline.
            type: boolean
          span:
            description: Label inline span.
            type: number
          title:
            description: Label title.
            type: string
        type: object
      minuteStep:
        default: 5
        description: Minute intervals to show in the time selector.
        minimum: 1
        type: integer
      placeholder:
        default: Select Date & Time
        description: Placeholder text inside the block before user types input.
        type: string
      secondStep:
        default: 5
        description: Minute intervals to show in the time selector.
        minimum: 1
        type: integer
      selectUTC:
        default: false
        description: Shows the user's selection as UTC time, not time-zone based.
        type: boolean
      showNow:
        default: true
        description: Shows a 'Now' button to set current time.
        type: boolean
      showToday:
        default: true
        description: Shows a button to easily select the current date if true.
        type: boolean
      size:
        default: default
        description: Size of the block.
        enum:
          - small
          - default
          - large
        type: string
      suffixIcon:
        default: CalendarOutlined
        description: >-
          Name of an Ant Design Icon or properties of an Icon block to customize
          icon on right-hand side of the date picker.
        type:
          - string
          - object
      timeFormat:
        default: HH:mm
        description: >-
          Time format to show in the time selector. HH:mm:ss will show hours,
          minutes and seconds, HH:mm only hours and minutes and HH only hours.
        type: string
      title:
        description: >-
          Title to describe the input component, if no title is specified the
          block id is displayed.
        type: string
    type: object