VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page
  • Special properties of field
  • dateTimePickerOptions
  • Usage

Was this helpful?

  1. Fields
  2. Optional Fields

dateTimePicker

PreviouscleaveNextgoogleAddress

Last updated 6 years ago

Was this helpful?

This is a dateTime picker field for date/time/datetime values.

Please note, this field depend on the following library:

Special properties of field

Property

Default

Accepted values

Description

autocomplete

none

Indicates whether the value of the control can be automatically completed by the browser.

dateTimePickerOptions

{}

Object

format

null

String or null

Format of the value of model. If null, use the Unix timestamp format (eg: 1462913010557). If a String, format the Date with moment (eg: format: "YYYY.MM.DD").

max

none

Number

Max value (need to use validators.number)

min

none

Number

Min value (need to use validators.number)

placeholder

none

String

Placeholder text for input field

readonly

false

Boolean

If true, the input field is read only

dateTimePickerOptions

@TODO

Usage

Field for date-of-birth with min, max limits and age calculator.

{
    type: "dateTimePicker",
    label: "DOB",
    model: "dob",
    required: true,
    placeholder: "User's birth of date",
    min: moment("1900-01-01").toDate(),
    max: moment("2016-01-01").toDate(),
    validator: validators.date,

    dateTimePickerOptions: {
        format: "YYYY-MM-DD"
    },            

    onChanged: function(model, newVal, oldVal, field) {
        model.age = moment().year() - moment(newVal).year();
    }
}

Date and time picker

    {
        type: "dateTimePicker",
        label: "DT",
        model: "dt",
        dateTimePickerOptions: {
            format: "YYYY-MM-DD HH:mm:ss"
        }
    }

Time picker

    {
        type: "dateTimePicker",
        label: "Start time",
        model: "startTime",
        format: "HH:mm:ss",
        dateTimePickerOptions: {
            format: "HH:mm:ss"
        }
    }

The value will be formatted as "15:28:43".

Settings to dateTimePicker.

jQuery
BootStrap
bootstrap-datetimepicker
see doc
Read more info from options