QDatetimePicker for Quasar
npm install quasar-app-extension-qdatetimepickerQDatetimePicker (quasar-app-extension-qdatetimepicker)
===
QDatetimePicker is a UI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.
This work is currently in beta and minor changes may still happen. Your help with testing is greatly appreciated.
quasar ext add qdatetimepicker
`
Describe
You can use quasar describe QDatetimePicker
Demo
Can be found here.
Example Code
`html
`
and the data...
`js
data () {
return {
date: '2018-11-02',
time: '15:46',
datetime: '2018-11-02T15:46'
}
}
`
Other Examples
styles
`html
`
modes
`html
`
colors
`html
`
icons
`html
`
clearable
`html
`
format24h
`html
`
display-value
`html
`
landscape
`html
`
today-btn and now-btn
`html
`
target
`html
`
date and time options
`html
`
`js
export default {
data () {
return {
dateOptionsA (date) {
const parts = date.split('/')
return parts[2] % 2 === 0
},
timeOptionsA (hr) {
return hr % 2 === 0
}
}
},
methods: {
dateOptionsB (date) {
return date >= '2019/02/03' && date <= '2019/02/15'
},
timeOptionsB (hr, min, sec) {
if (hr < 6 || hr > 15 || hr % 2 !== 0) {
return false
}
if (min !== null && (min <= 25 || min >= 58)) {
return false
}
if (sec !== null && sec % 10 !== 0) {
return false
}
return true
}
}
}
`
Language Files
We need help translating the language files. Below are listed the available ones. If you know another language, please PR and help us out.
Completed languages
- German
- English
- French
- Italian
- Portuguese
- Spanish (Latin America)
- Russian
---
change default icons at Runtime
default icons are reactive, so all components will update properly if you change the $qdtp.icons object.
example 01: in a boot
`js
import { boot } from 'quasar/wrappers'
export default boot(function ({ app }) {
app.qdtp.icons.date = 'mdi-calendar'
app.qdtp.icons.time = 'mdi-clock-outline'
})
`
example 02: in a component
`js
export default {
mounted () {
this.$qdtp.icons.date = 'mdi-calendar'
this.$qdtp.icons.time = 'mdi-clock-outline'
}
}
`
example 03: in a vuex module
`js
export default {
actions: {
updateIcons () {
this.$qdtp.icons.date = 'mdi-calendar'
this.$qdtp.icons.time = 'mdi-clock-outline'
}
}
}
`
example 04: everywhere else
`js
import { icons } from 'quasar-app-extension-qdatetimepicker/src/component'
icons.date = 'mdi-calendar'
icons.time = 'mdi-clock-outline'
`
SSR note
To avoid hydratations erros, you'll need to ensure any change made at the server side will be reflected at the client side.
That will not be a problem if you update the defaults at the both sides (server and client).
But if you doing that in the preFetch, so you'll need to create a boot who will serialize the defaults at the server-side and another one who will deserialize at the client-side.
But don't worry, that isn't as bad as seems, this extension already does the most of the work, all what you need to do is add {{{qdtpScript}}} after div#q-app in the index.template.html
src/index.template.html
`html
{{{qdtpScript}}}
`
QDatetimePicker Vue Properties
| Vue Property | Type | Description |
|---|---|---|
| label | String | A text label that will float up above the input field, once the field gets focus |
| stack-label | Boolean | Label will be always shown above the field regardless of field content (if any) |
| hint | String | Helper (hint) text which gets placed below your wrapped form component |
| hide-hint | Boolean | Hide the helper (hint) text when field is not focused |
| prefix | String | Prefix |
| suffix | String | Suffix |
| color | String | Color name from Quasar Color Palette; Overrides default dynamic color |
| bg-color | String | Color name from Quasar Color Palette; Overrides default dynamic color |
| dark | Boolean | Notify the component that the background is a dark color |
| loading | Boolean | Signals to the user that a process is in progress by displaying a spinner; Spinner can be customized by using the loadingslot. |
| clearable | Boolean | Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null |
| clear-icon | Boolean | Custom icon to use for the clear button when using along with clearable prop |
| filled | Boolean | Use filled design for the field |
| outlined | Boolean | Use outlined design for the field |
| borderless | Boolean | Use borderless design for the field |
| standout | Boolean | Use standout design for the field |
| bottom-slots | Boolean | Enables bottom slots (error, hint, counter) |
| counter | Boolean | Show an automatic counter on the bottom right |
| rounded | Boolean | Applies a small standard border-radius for a squared shape of the component |
| square | Boolean | Remove border-radius so borders are squared; Overrides rounded prop |
| dense | Boolean | Dense mode; occupies less space |
| items-aligned | Boolean | Align content to match QItem |
| disable | Boolean | Put component in disabled mode |
| readonly | Boolean | Put component in readonly mode |
| lang | Boolean | Language identifier (default: $q.lang.isoName) |
| mode | String | Display Mode (date, time, datetime) (default: date) |
| format24h | Boolean | Show the timepicker in 24 hour format. The masked value will not be affected. |
| display-value | Boolean or String | If the value is true or a string, the internal QInput will be readonly. If the value is true the calendar and numeric system used to format the date will not be forced to be the gregorian calendar and latin numbers. If value is a string, the format function will be ignored and the display-value will be used directly in the input (default: false) |
| icon | String | The icon of the picker (default: access_time when the mode is time, otherwise event) (obs: date-icon and/or time-icon props has a high priority) |
| date-icon | String | The icon of the picker when the mode is equals to date or datetime (default: event) |
| time-icon | String | The icon of the picker when the mode is equals to time (default: access_time) |
| landscape | Boolean | Show the picker in landscape mode (default: false) |
| today-btn | Boolean | Display a button that selects the current day (date and datetime modes only) (default: false) |
| now-btn | Boolean | Display a button that selects the current time (time and datetime modes only) (default: false) |
| cover | Boolean | Allows the picker to cover its target. When used, the fit props are no longer effective (default: true) |
| fit | Boolean | Allows the picker to match at least the full width of its target (default: true when target is self, otherwise false) |
| anchor | String | Two values setting the starting position or anchor point of the menu relative to its target (top left, top middle, top right, center left, center middle, center right, bottom left, bottom middle or bottom right) |
| target | String | Target Mode (self: the picker will be opened when the input is clicked, icon: the picker will be opened when the icon is clicked) (default: icon) |
| calendar | String | Calendar Mode (gregorian, persian) (default: gregorian) |
| date-options | Function or Array | A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not) |
| time-options | Function | Optionally configure what time the user allowed to set |
| with-seconds | Boolean | Allow the time to be set with seconds |
| disable-popup | Boolean | Removes the Picker(a.k.a popup) of the DatetimePicker, turning the component in a DatetimeInput. Ideal if you wanna the user to type the date and/or time. |
| default-standard | String | serialization standard, the property will be ignored if value isn't null (iso, quasar) (eg.: iso: yyyy-MM-ddTHH:mm, quasar: yyyy/MM/dd HH:mm) (default: iso`) |