Date Time Component Enhanced
This commit is contained in:
devansh bawari
parent
8b81be8127
commit
dc079df746
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,20 @@
|
|||
/* flatpickr v4.6.6, @license MIT */
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"/js/ui.js": "/js/ui.js?id=ab1dd431924ced0d89c3",
|
||||
"/js/ui.js": "/js/ui.js?id=be48dc81d004f4655af0",
|
||||
"/css/ui.css": "/css/ui.css?id=6d93a4a052e38d6aa795"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,42 +32,54 @@ export default {
|
|||
|
||||
maxDate: String,
|
||||
|
||||
hideRemoveButton: [Number, String],
|
||||
hideRemoveButton: [Number, String]
|
||||
},
|
||||
|
||||
data() {
|
||||
data: function() {
|
||||
return {
|
||||
datepicker: null,
|
||||
datepicker: null
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
var this_this = this;
|
||||
var options = {
|
||||
allowInput: true,
|
||||
altFormat: "Y-m-d",
|
||||
dateFormat: "Y-m-d",
|
||||
weekNumbers: true,
|
||||
onChange: function(selectedDates, dateStr, instance) {
|
||||
this_this.$emit("onChange", dateStr);
|
||||
},
|
||||
};
|
||||
mounted: function() {
|
||||
let options = this.setOptions();
|
||||
|
||||
if (this.minDate) {
|
||||
options.minDate = this.minDate;
|
||||
}
|
||||
|
||||
if (this.maxDate) {
|
||||
options.maxDate = this.maxDate;
|
||||
}
|
||||
|
||||
var element = this.$el.getElementsByTagName("input")[0];
|
||||
this.datepicker = new Flatpickr(element, options);
|
||||
this.activate(options);
|
||||
},
|
||||
|
||||
methods: {
|
||||
clear() {
|
||||
this.datepicker.clear();
|
||||
setOptions: function() {
|
||||
let self = this;
|
||||
|
||||
let options = {
|
||||
allowInput: true,
|
||||
altFormat: "Y-m-d",
|
||||
dateFormat: "Y-m-d",
|
||||
weekNumbers: true,
|
||||
onChange: function(selectedDates, dateStr, instance) {
|
||||
self.$emit("onChange", dateStr);
|
||||
}
|
||||
};
|
||||
|
||||
if (this.minDate) {
|
||||
options.minDate = this.minDate;
|
||||
}
|
||||
|
||||
if (this.maxDate) {
|
||||
options.maxDate = this.maxDate;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
|
||||
activate: function(options) {
|
||||
let element = this.$el.getElementsByTagName("input")[0];
|
||||
this.datepicker = new Flatpickr(element, options);
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.datepicker.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,87 @@
|
|||
<template>
|
||||
<span>
|
||||
<slot>
|
||||
<input type="text" :name="name" class="control" :value="value" data-input>
|
||||
</slot>
|
||||
|
||||
<span
|
||||
class="icon cross-icon"
|
||||
v-if="! hideRemoveButton"
|
||||
@click.prevent="clear">
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<slot>
|
||||
<input
|
||||
type="text"
|
||||
:name="name"
|
||||
class="control"
|
||||
:value="value"
|
||||
data-input
|
||||
/>
|
||||
</slot>
|
||||
|
||||
<span
|
||||
class="icon cross-icon"
|
||||
v-if="!hideRemoveButton"
|
||||
@click.prevent="clear"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Flatpickr from "flatpickr";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
props: {
|
||||
name: String,
|
||||
|
||||
value: String,
|
||||
value: String,
|
||||
|
||||
hideRemoveButton: [Number, String]
|
||||
},
|
||||
minDate: String,
|
||||
|
||||
data() {
|
||||
return {
|
||||
datepicker: null
|
||||
};
|
||||
},
|
||||
maxDate: String,
|
||||
|
||||
created() {
|
||||
hideRemoveButton: [Number, String]
|
||||
},
|
||||
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
datepicker: null
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
var this_this = this;
|
||||
mounted: function() {
|
||||
let options = this.setOptions();
|
||||
|
||||
var element = this.$el.getElementsByTagName("input")[0];
|
||||
this.datepicker = new Flatpickr(element, {
|
||||
this.activate(options);
|
||||
},
|
||||
|
||||
methods: {
|
||||
setOptions: function() {
|
||||
let self = this;
|
||||
|
||||
let options = {
|
||||
allowInput: true,
|
||||
altFormat: "Y-m-d H:i:S",
|
||||
dateFormat: "Y-m-d H:i:S",
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
weekNumbers: true,
|
||||
onChange: function (selectedDates, dateStr, instance) {
|
||||
this_this.$emit('onChange', dateStr)
|
||||
},
|
||||
});
|
||||
onChange: function(selectedDates, dateStr, instance) {
|
||||
self.$emit("onChange", dateStr);
|
||||
}
|
||||
};
|
||||
|
||||
if (this.minDate) {
|
||||
options.minDate = this.minDate;
|
||||
}
|
||||
|
||||
if (this.maxDate) {
|
||||
options.maxDate = this.maxDate;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
|
||||
methods: {
|
||||
clear() {
|
||||
this.datepicker.clear();
|
||||
}
|
||||
activate: function(options) {
|
||||
let element = this.$el.getElementsByTagName("input")[0];
|
||||
this.datepicker = new Flatpickr(element, options);
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
this.datepicker.clear();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue