Skip to content
This repository has been archived by the owner. It is now read-only.

Commit

Permalink
demo responsive and lang -> locale
Browse files Browse the repository at this point in the history 
closes #6
closes #7
  • Loading branch information
@darenegade
darenegade committed May 1, 2020
1 parent 332cc7f commit 21e36f4
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 34 deletions.
38 changes: 19 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,25 @@ Once installed, it can be used in a template as simply as:

## Properties

| Name | Type | Default Value | Description |
| ---------------- | ----------- | ------------- | ---------------------------------- |
| value (model) | String (ISO-Date) | | Date-Time input model. |
| readonly | Boolean | false | Input is readonly. |
| disabled | Boolean | false | Input is disabled. |
| hideDetails | Boolean | false | Hides details under input. |
| dense | Boolean | false | Input is dense. |
| filled | Boolean | false | Input is filled. |
| outlined | Boolean | false | Input is outlined. |
| clearable | Boolean | true | Input is clearable. |
| persistentHint | Boolean | false | Activates persistent hint. |
| hint | String | false | Text of persistent hint. |
| label | String | "" | Label of Input. |
| date-label | String | "Date" | Label of Date-Input. |
| time-label | String | "Time" | Label of Time-Input. |
| rules | Array | [] | Validation rules. |
| incompleteErrorMessage| String | "Date and Time needs to be filled"| Error message if one field is missing. |
| dateformatErrorMessage| String | "Wrong Dateformat" | Error message if dateformat is wrong (*Text-Mode) |
| lang | String | "en" | Locale-Format of Date (*Text-Mode) |
| Name | Type | Default Value | Description |
| ---------------- | ----------- | ------------- | ---------------------------------- |
| value (model) | String (ISO-Date) | | Date-Time input model. |
| readonly | Boolean | false | Input is readonly. |
| disabled | Boolean | false | Input is disabled. |
| hideDetails | Boolean | false | Hides details under input. |
| dense | Boolean | false | Input is dense. |
| filled | Boolean | false | Input is filled. |
| outlined | Boolean | false | Input is outlined. |
| clearable | Boolean | true | Input is clearable. |
| persistentHint | Boolean | false | Activates persistent hint. |
| hint | String | false | Text of persistent hint. |
| label | String | "" | Label of Input. |
| date-label | String | "Date" | Label of Date-Input. |
| time-label | String | "Time" | Label of Time-Input. |
| rules | Array | [] | Validation rules. |
| incompleteErrorMessage| String | "Date and Time needs to be filled"| Error message if one field is missing. |
| dateformatErrorMessage| String | "Wrong Dateformat" | Error message if dateformat is wrong (*Text-Mode) |
| locale | String | "en" | Locale-Format of Date. One of "en", "de" or "es" (*Text-Mode) |

*Text-Mode: If the Browser doesn't support Date/Time Inputs the Input falls back into Text-Mode with a masked input format.

Expand Down
16 changes: 9 additions & 7 deletions demo/Demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<v-content>
<v-layout>
<v-row justify="center">
<v-col cols="12">
<v-card class="mx-auto mt-12" width="50rem">
<v-col cols="10">
<v-card class="mx-auto mt-12" :width="$vuetify.breakpoint.mdAndUp ? '50%' : '100%'">
<v-card-text>
<v-form ref="form" v-model="valid">
<v-datetime-input
Expand All @@ -24,13 +24,15 @@
v-model="value"
/>
</v-form>
<div>Value is (ISO-Format): {{ value }}</div>
<div>Form is valid: {{ valid }}</div>
<div class="subtitle-1">Value is (ISO-Format)</div>
<div>{{ value ? value : "unset" }}</div>
<div class="subtitle-1">Form is valid</div>
<div>{{ valid }}</div>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12">
<v-card class="mx-auto mt-5" width="50rem">
<v-col cols="10">
<v-card class="mx-auto mt-5" :width="$vuetify.breakpoint.mdAndUp ? '50%' : '100%'">
<v-card-text>
<v-switch dense hide-details v-model="outlined" label="Outlined"></v-switch>
<v-switch dense hide-details v-model="filled" label="Filled"></v-switch>
Expand All @@ -39,7 +41,7 @@
<v-switch dense hide-details v-model="readonly" label="Readonly"></v-switch>
<v-switch dense hide-details v-model="disabled" label="Disabled"></v-switch>
<v-switch dense hide-details v-model="hideDetails" label="Hide Details"></v-switch>
<v-select dense :items="['en', 'de', 'es']" v-model="lang" label="Language"
<v-select dense :items="['en', 'de', 'es']" v-model="lang" label="Locale"
persistent-hint hint="Only on browser not supporting Date/Time" class="mt-5"
></v-select>
</v-card-text>
Expand Down
9 changes: 5 additions & 4 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>v-datetime-input</title>
</head>
<body>
<noscript>
<strong>We're sorry but v-currency-field doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but the demo of vuetify-datetime-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
Expand Down
8 changes: 4 additions & 4 deletions src/VuetifyDatetimeInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default {
type: Array,
default: () => []
},
lang: {
locale: {
type: String,
default: () => "en"
}
Expand All @@ -137,11 +137,11 @@ export default {
created() {
this.setBrowserSupportsDateInput();
if (this.isCustomTextMode()) {
dayjs.locale(this.lang);
dayjs.locale(this.locale);
dayjs.extend(customParseFormat);
dayjs.extend(localizedFormat);
switch (this.lang) {
switch (this.locale) {
case "de":
this.localeFormat = dayjsDe.formats.L;
break;
Expand Down Expand Up @@ -242,7 +242,7 @@ export default {
return !!(this.time && this.day) || (!this.time && !this.day);
},
isCustomTextMode() {
return !this.browserSupportsDateInput && this.lang !== "en";
return !this.browserSupportsDateInput && this.locale !== "en";
}
}
};
Expand Down

0 comments on commit 21e36f4

Please sign in to comment.