Viewing file:  date.blade.php (2.14 KB) -rw-rw-rw-
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<v-date-picker {{ $attributes }}>
{{ $slot }}
</v-date-picker>
@pushOnce('scripts')
<script
type="text/x-template"
id="v-date-picker-template"
>
<span class="relative inline-block w-full">
<slot></slot>
<i class="icon-calendar pointer-events-none absolute top-1/2 -translate-y-1/2 text-2xl text-gray-400 ltr:right-2 rtl:left-2"></i>
</span>
</script>
<script type="module">
app.component('v-date-picker', {
template: '#v-date-picker-template',
props: {
name: String,
value: String,
allowInput: {
type: Boolean,
default: true,
},
disable: Array,
minDate: String,
maxDate: String,
},
data: function() {
return {
datepicker: null
};
},
mounted: function() {
let options = this.setOptions();
this.activate(options);
},
methods: {
setOptions: function() {
let self = this;
return {
allowInput: this.allowInput ?? true,
disable: this.disable ?? [],
minDate: this.minDate ?? '',
maxDate: this.maxDate ?? '',
altFormat: "Y-m-d",
dateFormat: "Y-m-d",
weekNumbers: true,
onChange: function(selectedDates, dateStr, instance) {
self.$emit("onChange", dateStr);
}
};
},
activate: function(options) {
let element = this.$el.getElementsByTagName("input")[0];
this.datepicker = new Flatpickr(element, options);
},
clear: function() {
this.datepicker.clear();
}
}
});
</script>
@endPushOnce
|