diff --git a/README.md b/README.md index 8b609a0..b2567d7 100644 --- a/README.md +++ b/README.md @@ -45,15 +45,19 @@ Once installed, it can be used in a template as simply as: | datetime (model) | Date/String | | Time picker model. | | disabled | Boolean | false | Input is disabled. | | loading | Boolean | false | Input is loading. | +| persistent | Boolean | false | Clicking outside of the picker will not close it. | | 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. | +| clearText | string | CLEAR | Sets the text of the clear button. An empty string prevents the button from showing. | +| cancelText | string | | Sets the text of the cancel button. An empty string prevents the button from showing. Click on it resets datetime to value before opening the picker. | | okText | string | OK | Sets the text of the ok button. | | textFieldProps | Object | | Text fields properties. See [Vuetify Docs](https://vuetifyjs.com/en/components/text-fields 'Vuetify Docs') | | datePickerProps | Object | | Date pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/date-pickers 'Vuetify Docs') | | timePickerProps | Object | | Time pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/time-pickers 'Vuetify Docs') | +| useIso | Boolean | false | Use ISO format in datetime (model) and input event | +| withoutTime | Boolean | false | Pick a date without a time. | ## Events diff --git a/package.json b/package.json index 29abb24..330d5f3 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "DatetimePicker component for Vuetify.js.", "main": "src/index.js", "scripts": { + "start": "npm run dev", "dev": "webpack-dev-server --config webpack/webpack.dev.config.js", "build": "webpack --config webpack/webpack.build.config.js --progress --profile --colors", "deploy": "npm run build && npm publish --registry https://registry.npmjs.org/", @@ -51,8 +52,8 @@ "webpack-merge": "^4.2.1" }, "dependencies": { - "date-fns": "^2.1.0", - "vue": "^2.6.10", - "vuetify": "^2.1.3" + "date-fns": "^2.16.1", + "vue": "^2.6.12", + "vuetify": "^2.3.13" } } diff --git a/src/app.vue b/src/app.vue index da8d998..f1e5c7c 100644 --- a/src/app.vue +++ b/src/app.vue @@ -30,6 +30,46 @@ + + Init with Date without Time + + + + +
Date value:
+ + + + + Init with Date without Clear Button + + + + +
Datetime value:
+ + + + + Init with Date without Cancel Button + + + + +
Datetime value:
+ + + + + Init with Date (persistent) + + + + +
Datetime value:
+ + + Init with String @@ -40,6 +80,16 @@ + + Init with String without Time + + + + +
Datetime value:
+ + + Loading @@ -114,6 +164,19 @@ + + Custom Validation (Input Required) + + + + + + +
Datetime value:
+
Valid Form:
+ + + Use Seconds @@ -145,6 +208,38 @@
Datetime value:
+ + + Custom Format: ISO + + + + +
Datetime value:
+ + + + + Custom Property and Format: German date and time format, ISO + + + + +
Datetime value:
+ + + @@ -157,19 +252,34 @@ import '@fortawesome/fontawesome-free/css/all.css' export default { data() { return { + validForm: false, nullDatetime: null, datetime: new Date(), + dateWithoutTime: new Date(), datetimeString: '2019-01-01 12:00', + datetimeStringISO: '2019-01-01T11:00:00.000Z', + dateStringWithoutTime: '2019-01-01', formattedDatetime: '09/01/2019 12:00', textFieldProps: { appendIcon: 'event' }, + textFieldPropsRules: { + rules: [v => !!v || 'Date is required'] + }, dateProps: { headerColor: 'red' }, timeProps: { useSeconds: true, ampmInTitle: true + }, + datePropsDe: { + locale: 'de-de', + firstDayOfWeek: 1 + }, + timePropsDe: { + locale: 'de-de', + format: '24hr' } } } diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue index 71feba8..fca9e89 100644 --- a/src/components/DatetimePicker.vue +++ b/src/components/DatetimePicker.vue @@ -1,5 +1,5 @@