added Jalalian datepicker (shamsi) (#1460)

* added datepicker option in setting page
jalalian datepicker component was added
translate files for datepicker updated

* dark mode bug fixed

8 files changed, 110 insertions, 3 deletions

diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 75e9bf6b..c951bc8d 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -104,8 +104,10 @@
                     <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
             </template>
-            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+            <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                 :dropdown-class-name="themeSwitcher.currentTheme" v-model="clientsBulkModal.expiryTime"></a-date-picker>
+            <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
+                                value="clientsBulkModal.expiryTime" v-model="clientsBulkModal.expiryTime"></persian-datepicker>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.expiryTime != 0">
             <template slot="label">
@@ -234,6 +236,9 @@
             get delayedExpireDays() {
                 return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
             },
+            get datepicker() {
+                return app.datepicker;
+            },
             set delayedExpireDays(days) {
                 this.clientsBulkModal.expiryTime = -86400000 * days;
             },
diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index 1bc48a6a..4b270607 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -94,6 +94,9 @@
             get isEdit() {
                 return this.clientModal.isEdit;
             },
+            get datepicker() {
+                return app.datepicker;
+            },
             get isTrafficExhausted() {
                 if (!clientStats) return false
                 if (clientStats.total <= 0) return false
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
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index dff1dd5c..f6335915 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -150,8 +150,10 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+        <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
             :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
+        <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
+                            value="client._expiryTime" v-model="client._expiryTime"></persian-datepicker>
         <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
     </a-form-item>
     <a-form-item v-if="client.expiryTime != 0">
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 6f0480c3..5da8ec56 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -54,9 +54,11 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+            <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                 :dropdown-class-name="themeSwitcher.currentTheme"
                 v-model="dbInbound._expiryTime"></a-date-picker>
+            <persian-datepicker v-else :dropdown-class-name="themeSwitcher.currentTheme"
+                                value="dbInbound._expiryTime" v-model="dbInbound._expiryTime"></persian-datepicker>
         </a-form-item>
 </a-form>
 
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index f7f9d727..ab42e09c 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -63,6 +63,9 @@
             get client() {
                 return inModal.inbound.clients[0];
             },
+            get datepicker() {
+                return app.datepicker;
+            },
             get delayedExpireDays() {
                 return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
             },
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 2be031e5..8d1da2f4 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -446,6 +446,7 @@
 <script src="{{ .base_path }}assets/js/model/xray.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
 {{template "component/themeSwitcher" .}}
+{{template "component/persianDatepicker" .}}
 <script>
     const columns = [{
         title: "ID",
@@ -539,6 +540,7 @@
         data: {
             siderDrawer,
             themeSwitcher,
+            persianDatepicker,
             spinning: false,
             inbounds: [],
             dbInbounds: [],
@@ -560,6 +562,7 @@
                 subURI : ''
             },
             remarkModel: '-ieo',
+            datepicker: 'gregorian',
             tgBotEnable: false,
             pageSize: 0,
             isMobile: window.innerWidth <= 768,
@@ -605,6 +608,7 @@
                     };
                     this.pageSize = pageSize;
                     this.remarkModel = remarkModel;
+                    this.datepicker = datepicker;
                 }
             },
             setInbounds(dbInbounds) {
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 38037764..1e690a0b 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -141,6 +141,27 @@
                                 <a-list-item>
                                     <a-row style="padding: 20px">
                                         <a-col :lg="24" :xl="12">
+                                            <a-list-item-meta title='{{ i18n "pages.settings.datepicker"}}'>
+                                                <template slot="description">{{ i18n "pages.settings.datepickerDescription"}}</template>
+                                            </a-list-item-meta>
+                                        </a-col>
+
+                                        <a-col :lg="24" :xl="12">
+                                            <template>
+                                                <a-select style="width: 100%"
+                                                          :dropdown-class-name="themeSwitcher.currentTheme"
+                                                          v-model="datepicker">
+                                                    <a-select-option v-for="item in datepickerList" :value="item.value">
+                                                        <span v-text="item.name"></span>
+                                                    </a-select-option>
+                                                </a-select>
+                                            </template>
+                                        </a-col>
+                                    </a-row>
+                                </a-list-item>
+                                <a-list-item>
+                                    <a-row style="padding: 20px">
+                                        <a-col :lg="24" :xl="12">
                                             <a-list-item-meta title="Language" />
                                         </a-col>
 
@@ -311,6 +332,7 @@
             showAlert: false,
             remarkModels: {i:'Inbound',e:'Email',o:'Other'},
             remarkSeparators: [' ','-','_','@',':','~','|',',','.','/'],
+            datepickerList: [{name:'Gregorian (Standard)', value: 'gregorian'}, {name:'Jalalian (شمسی)', value: 'jalalian'}],
             remarkSample: '',
             get remarkModel() {
                 rm = this.allSetting.remarkModel;
@@ -328,6 +350,12 @@
                 this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
                 this.changeRemarkSample();
             },
+            get datepicker() {
+                return this.allSetting.datepicker ? this.allSetting.datepicker : 'gregorian';
+            },
+            set datepicker(value) {
+                this.allSetting.datepicker = value;
+            },
             changeRemarkSample(){
                 sample = []
                 this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));