Date and time

There are 3 components available

• rw-date
• rw-time
• rw-datetime - This adds two inputs for date and time with a single bounded value for v-model.

 <rw-date label="Date picker" v-model="date" @focus="xxx"></rw-date>
 <rw-time label="Time picker" v-model="time" ></rw-time>
 <rw-datetime date-label="Date"
            time-label="Time" v-model="datetime"></rw-datetime>

Display style

The pickers could be used to display:

• inline
• text input with a drop-down
• a dialog (default)

These options are applicable to time and datetime pickers as well.

 <rw-date inline
             label="Inline picker"
    ></rw-date>

    <rw-date
            menu
            label="Picker in menu"
    ></rw-date>

 <rw-date label="Dialog picker"></rw-date>

Date picker options

Allowed dates

• allowed-dates (see vuetify documentation https://vuetifyjs.com/components/pickers)
• allow-before (to disable dates before a certain date, specify yyyy-mm-dd)
• allow-after (to disable dates after a certain date, specify yyyy-mm-dd)
• allow-before and after could typically be used to connect 2 date pickers. Just bind on the same variable.

For pickers with text inputs:

• label
• hint
• persistent-hint
• disabled
• no-margins clears the margin on the text input
• All text-input events are supported. @click, @focus etc.

 <rw-date
           menu
           label="Start date"
           v-model="date"
    ></rw-date>

 <rw-date
            menu
            label="End date"
            :allow-after="date"
            v-model="date2"
    ></rw-date>

Time pickers

• ampm (default true) to toggle between 24 hr time.

 <rw-time
            v-validate="'required'"
            name="time"
            label="Picker in dialog"
            v-model="time"
            :ampm="false"
    ></rw-time>

Date time

Date time pickers have all the options of both the date and time pickers.

    <rw-datetime
            v-validate="'required'"
            name="time"
            date-label="Date"
            time-label="Time"
            v-model="datetime"
            :ampm="false"
            :allowed-dates="everyOtherDay"
    ></rw-datetime>

• Initialise with null
• date-hint and time-hint for hints. persistent-hint also available

Coloring

• Use context modifiers (primary, secondary etc.)
• Material palette classes using class="" is also supported

VeeValidate

• VeeValidate is also supported similar to inputs to automatically display error messages
• For more information see inputs.