diff options
Diffstat (limited to 'web/html/xui/component/persianDatepicker.html')
| -rw-r--r-- | web/html/xui/component/persianDatepicker.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html new file mode 100644 index 00000000..34ae4f8d --- /dev/null +++ b/web/html/xui/component/persianDatepicker.html @@ -0,0 +1,60 @@ +{{define "component/persianDatepickerTemplate"}} +<template> + <div> + <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker" + @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();" + placeholder="انتخاب تاریخ"> + <template #addonAfter> + <a-icon type="calendar" style="font-size: 16px;"/> + </template> + </a-input> + </div> +</template> +{{end}} + +{{define "component/persianDatepicker"}} +<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css"/> +<script src="{{ .base_path }}assets/moment/moment-jalali.min.js"></script> +<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js"></script> +<script> + + const persianDatepicker = {}; + + Vue.component('persian-datepicker', { + props: ['dropdown-class-name', 'format', 'value'], + template: `{{template "component/persianDatepickerTemplate"}}`, + data() { + return { + date: '', + persianDatepicker, + }; + }, + watch: { + value: function (date) { + this.date = this.convertToJalalian(date) + } + }, + mounted() { + this.date = this.convertToJalalian(this.value) + this.listenToDatepicker() + }, + methods: { + convertToGregorian(date) { + return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null + }, + convertToJalalian(date) { + return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null + }, + listenToDatepicker() { + jalaliDatepicker.startWatch({ + time: true, + container: '.ant-modal-wrap', + hideAfterChange: true, + useDropDownYears: false, + changeMonthRotateYear: true, + }); + }, + } + }); +</script> +{{end}}
\ No newline at end of file |