darrenfang / Vuetify Datetime Picker
Licence: mit
DatetimePicker component for Vuetify.js. https://darrenfang.github.io/vuetify-datetime-picker/
Stars: ✭ 123
Projects that are alternatives of or similar to Vuetify Datetime Picker
Boilerplate Vue Apollo Graphql Mongodb
Start your magical stack journey!
Stars: ✭ 85 (-30.89%)
Mutual labels: vuetify
Vue Parallax Js
Tiny vue component that adds a directive for parallax effect on elements.
Stars: ✭ 107 (-13.01%)
Mutual labels: vuejs-components
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-4.88%)
Mutual labels: vuetify
Beautify With Vuetify
Learn how to create beautiful web applications with Vuetify!
Stars: ✭ 92 (-25.2%)
Mutual labels: vuetify
Laravel Vuetify Spa
Laravel-Vue SPA starter project template with Vuetify frontend.
Stars: ✭ 73 (-40.65%)
Mutual labels: vuetify
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (-4.88%)
Mutual labels: vuetify
Vue Multi Select
This component gives you a multi/single select with the power of Vuejs components.
Stars: ✭ 92 (-25.2%)
Mutual labels: vuejs-components
V2 Table
A simple table component based Vue 2.x: https://dwqs.github.io/v2-table/
Stars: ✭ 96 (-21.95%)
Mutual labels: vuejs-components
Revogrid
Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋
Stars: ✭ 1,870 (+1420.33%)
Mutual labels: vuejs-components
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-27.64%)
Mutual labels: vuejs-components
Awesome Vuetify
🎉 The best resources related to Vuetify
Stars: ✭ 1,189 (+866.67%)
Mutual labels: vuetify
Sysmon
A B/S mode system monitor for linux (demo http://199.247.1.240:2048)
Stars: ✭ 110 (-10.57%)
Mutual labels: vuetify
Laravel Vuetify Spa Starter
Laravel Vuetify Starter SPA built with Laravel 6.0, JWT Auth, Vue 2, Vue Router 3, Vuex 3, Axios, Vuetify 2
Stars: ✭ 115 (-6.5%)
Mutual labels: vuetify
vuetify-datetime-picker
DatetimePicker component for Vuetify.js.
Installation
npm install --save vuetify-datetime-picker
or
yarn add vuetify-datetime-picker
import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'
// (Optional) import 'vuetify-datetime-picker/src/stylus/main.styl'
Vue.use(DatetimePicker)
If use the main.styl, you should configure the stylus-loader in webpack.config.js, or just ignore this style sheet.
Usage
Once installed, it can be used in a template as simply as:
<v-datetime-picker label="Select Datetime" v-model="datetime"> </v-datetime-picker>
Properties
| Name | Type | Default Value | Description |
|---|---|---|---|
| datetime (model) | Date/String | Time picker model. | |
| disabled | Boolean | false | Input is disabled. |
| loading | Boolean | false | Input is loading. |
| label | string | Sets input label. | |
| dialogWidth | Number | 340 | The width of the dialog. |
| dateFormat | string | yyyy-MM-dd | Defines the format of a date. |
| timeFormat | string | HH:mm | Defines the format of a time. |
| clearText | string | CLEAR | Sets the text of the clear button. |
| okText | string | OK | Sets the text of the ok button. |
| textFieldProps | Object | Text fields properties. See Vuetify Docs | |
| datePickerProps | Object | Date pickers properties.See Vuetify Docs | |
| timePickerProps | Object | Time pickers properties.See Vuetify Docs |
Events
| Name | Arguments | Description |
|---|---|---|
| input | value (Date/String) | The updated bound model |
Slots
| Name | Description |
|---|---|
| dateIcon | Slot to put custom icon in the date tab. |
| timeIcon | Slot to put custom icon in the time tab. |
| actions | Slot to put custom buttons in the dialog. |
| progress | Slot for custom progress linear (displayed when loading prop is not equal to Boolean False) |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].