Skip to content

Clear text field when clear model #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Clear text field when clear model #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0ad3d3f
clear text field when clear model
PetrChalov Dec 16, 2019
b3aba9f
use clearHandler
PetrChalov Feb 13, 2020
33ff130
add theming props
PetrChalov Feb 21, 2020
1a323db
add tabs customization props
PetrChalov Feb 21, 2020
70c94bc
add validation utils
PetrChalov Mar 10, 2020
9addc43
add min/max props
PetrChalov Mar 13, 2020
ec73301
allow error-messages prop to be String or Array
shainegordon Aug 26, 2020
26e63d8
Merge pull request #1 from realmdigital/master
PetrChalov Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-app dark>
<v-app>
<v-container>
<div class="mb-5">
Get Source Code:
Expand All @@ -14,7 +14,7 @@
<v-expansion-panel-header>Null Value</v-expansion-panel-header>
<v-expansion-panel-content>
<v-flex xs4>
<v-datetime-picker v-model="nullDatetime"></v-datetime-picker>
<v-datetime-picker color="blue-grey lighten-1" v-model="nullDatetime"></v-datetime-picker>
</v-flex>
<div>Datetime value: <span v-text="nullDatetime"></span></div>
</v-expansion-panel-content>
Expand Down
189 changes: 134 additions & 55 deletions src/components/DatetimePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,75 @@
<template>
<v-dialog v-model="display" :width="dialogWidth">
<template v-slot:activator="{ on }">
<v-text-field
v-bind="textFieldProps"
:disabled="disabled"
:loading="loading"
:label="label"
:value="formattedDatetime"
v-on="on"
readonly
>
<template v-slot:progress>
<slot name="progress">
<v-progress-linear color="primary" indeterminate absolute height="2"></v-progress-linear>
</slot>
<v-dialog v-model="display" :width="dialogWidth">
<template v-slot:activator="{ on }">
<v-text-field
v-bind="textFieldProps"
:disabled="disabled"
:loading="loading"
:label="label"
:value="formattedDatetime"
:error="error"
:error-messages="errorMessages"
v-on="on"
readonly
>
<template v-slot:progress>
<slot name="progress">
<v-progress-linear color="primary" indeterminate absolute height="2"></v-progress-linear>
</slot>
</template>
</v-text-field>
</template>
</v-text-field>
</template>

<v-card>
<v-card-text class="px-0 py-0">
<v-tabs fixed-tabs v-model="activeTab">
<v-tab key="calendar">
<slot name="dateIcon">
<v-icon>event</v-icon>
</slot>
</v-tab>
<v-tab key="timer" :disabled="dateSelected">
<slot name="timeIcon">
<v-icon>access_time</v-icon>
</slot>
</v-tab>
<v-tab-item key="calendar">
<v-date-picker v-model="date" v-bind="datePickerProps" @input="showTimePicker" full-width></v-date-picker>
</v-tab-item>
<v-tab-item key="timer">
<v-time-picker
ref="timer"
class="v-time-picker-custom"
v-model="time"
v-bind="timePickerProps"
full-width
></v-time-picker>
</v-tab-item>
</v-tabs>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<slot name="actions" :parent="this">
<v-btn color="grey lighten-1" text @click.native="clearHandler">{{ clearText }}</v-btn>
<v-btn color="green darken-1" text @click="okHandler">{{ okText }}</v-btn>
</slot>
</v-card-actions>
</v-card>
</v-dialog>

<v-card>
<v-card-text class="px-0 py-0">
<v-tabs :slider-color="tabsSliderColor" :background-color="tabsBackgroundColor" fixed-tabs
v-model="activeTab">
<v-tab key="calendar">
<slot name="dateIcon">
<v-icon>event</v-icon>
</slot>
</v-tab>
<v-tab key="timer" :disabled="dateSelected">
<slot name="timeIcon">
<v-icon>access_time</v-icon>
</slot>
</v-tab>
<v-tab-item key="calendar">
<v-date-picker v-model="date"
v-bind="datePickerProps"
:color="color"
:min="minDate"
:max="maxDate"
@input="showTimePicker"
full-width></v-date-picker>
</v-tab-item>
<v-tab-item key="timer">
<v-time-picker
ref="timer"
class="v-time-picker-custom"
v-model="time"
v-bind="timePickerProps"
:min="minTime"
:max="maxTime"
:color="color"
full-width
></v-time-picker>
</v-tab-item>
</v-tabs>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<slot name="actions" :parent="this">
<v-btn :color="clearColor" text @click.native="clearHandler">{{ clearText }}</v-btn>
<v-btn :color="okColor" text @click="okHandler">{{ okText }}</v-btn>
</slot>
</v-card-actions>
</v-card>
</v-dialog>
</template>

<script>
import { format, parse } from 'date-fns'
import { format, parse, isSameDay } from 'date-fns'

const DEFAULT_DATE = ''
const DEFAULT_TIME = '00:00:00'
Expand Down Expand Up @@ -116,6 +128,41 @@ export default {
},
timePickerProps: {
type: Object
},
color: {
type: String
},
okColor: {
type: String,
default: 'green darken-1'
},
clearColor: {
type: String,
default: 'grey lighten-1'
},
tabsBackgroundColor: {
type: String,
default: ''
},
tabsSliderColor: {
type: String,
default: ''
},
error: {
type: Boolean,
default: false
},
errorMessages: {
type: [Array, String],
default: ''
},
min: {
type: Date,
default: null
},
max: {
type: Date,
default: null
}
},
data() {
Expand Down Expand Up @@ -150,13 +197,45 @@ export default {
return null
}
},

minDate() {
return this.min ? format(this.min, DEFAULT_DATE_FORMAT) : null
},

minTime() {
const { selectedDatetime, min } = this

if (selectedDatetime === null || min === null || !isSameDay(selectedDatetime, min)) {
return null
}

return format(min, DEFAULT_TIME_FORMAT)
},

maxDate() {
return this.max ? format(this.max, DEFAULT_DATE_FORMAT) : null
},

maxTime() {
const { selectedDatetime, max } = this

if (selectedDatetime === null || max === null || !isSameDay(selectedDatetime, max)) {
return null
}

return format(max, DEFAULT_TIME_FORMAT)
},

dateSelected() {
return !this.date
}
},

methods: {
init() {
if (!this.datetime) {
this.date = DEFAULT_DATE
this.time = DEFAULT_TIME
return
}

Expand Down