---

npm install --save puzzles-datetime

import PuzzlesDatetime from 'puzzles-datetime'

Vue.use(PuzzlesDatetime)

import 'PuzzlesDatetime' from 'puzzles-datetime'

import 'puzzles-datetime/dist/puzzles-datetime.css'

---

<puzzles-datetime v-model="dateValue">
    <input v-model="dateValue" placeholder="Select a Date" readonly>
</puzzles-datetime>

• type - type of the picker (default: "date")
  • Possible values:
    • date
    • datetime
    • time
• value-format - format of the datetime value
  • Defaults:
    • date - "yyyy-MM-dd",
    • datetime - "yyyy-MM-dd HH:mm",
    • time - "HH:mm")
• display-format - format of the datetime displayed value
  • Defaults:
    • date - "d MMM yyyy",
    • datetime - "d MMM yyyy HH:mm",
    • time - "HH:mm")

<puzzles-datetime v-model="dateValue" @display="displayDateValue = arguments[0]">
    <input v-model="displayDateValue" placeholder="Select a Date" readonly>
</puzzles-datetime>

Add @display="displayDateValue = arguments[0]", still value is stored in dateValue, but formatted display value is stored in displayDateValue.

---

This is the beta version of the puzzles-datetime, there will be more features coming out soon.

Nermedin Dzekovic, Puzzles IT
nermedin@puzzlesit.com