improve ux datepicker for persian dates

app/Models/Setting.php

@@ -13,7 +13,8 @@ class Setting extends Model
     public $translatable = ['value'];
 
     public static $settingTypes = ['TEXT', 'NUMBER', 'LONGTEXT', 'CODE', 'EDITOR',
-        'CATEGORY', 'GROUP', 'CHECKBOX', 'FILE', 'COLOR', 'SELECT', 'MENU', 'LOCATION', 'ICON'];
+        'CATEGORY', 'GROUP', 'CHECKBOX', 'FILE', 'COLOR', 'SELECT', 'MENU', 'LOCATION',
+        'ICON','DATE','DATETIME','TIME'];
 
     public function getData()
     {

resources/js/app.js

@@ -118,6 +118,10 @@ app.component('lat-lng', Latlng);
 import MenuItemInput from "./components/MenuItemInput.vue";
 app.component('menu-item-input', MenuItemInput);
 
+
+import VueTimepicker from "./components/vueTimePicker.vue";
+app.component('vue-time-picker', VueTimepicker);
+
 /**
  * The following block of code may be used to automatically register your
  * Vue components. It will recursively scan this directory for the Vue

resources/js/components/vueDateTimePicker.vue

@@ -395,9 +395,9 @@ export default {
         // get input class
         getClass: function () {
             if (this.err == true || (typeof this.err == 'String' && this.err.trim() == '1')) {
-                return 'form-control is-invalid ' + this.customClass;
+                return 'form-control is-invalid text-center' + this.customClass;
             }
-            return 'form-control ' + this.customClass;
+            return 'form-control text-center ' + this.customClass;
         },
         /*
          * make array of this month days [gregorian]

resources/views/admin/advs/adv-form.blade.php

@@ -105,7 +105,7 @@
                         </label>
 {{--  WIP for lang change def tab--}}
                         <vue-datetime-picker-input :xmin="{{strtotime('yesterday')}}"
-                        xid="dp" xname="expire" xshow="date" xtitle="Expire date" def-tab="1"
+                        xid="dp" xname="expire" xtitle="Expire date"  @if(app()->getLocale() != 'fa')  def-tab="1" xshow="date"  @else xshow="pdate"  @endif
                         @if(isset($item)) :xvalue="{{strtotime($item->expire)}}" @endif
                         ></vue-datetime-picker-input>
                     </div>

resources/views/admin/customers/customer-form.blade.php

@@ -104,7 +104,7 @@
                             </label>
                             <vue-datetime-picker-input
                                 :xmax="{{strtotime('yesterday')}}"
-                                xid="dp" xname="dob" xshow="pdate" xtitle="{{__("Date of born")}}" def-tab="0"
+                                xid="dp" xname="dob"  xtitle="{{__("Date of born")}}"  @if(app()->getLocale() != 'fa')  def-tab="1" xshow="date"  @else xshow="pdate"  @endif
                                 @if(isset($item)) :xvalue="{{strtotime($item->dob)}}" @endif
                                 :timepicker="false"
                             ></vue-datetime-picker-input>

resources/views/admin/discounts/discount-form.blade.php

@@ -44,7 +44,7 @@
                             </label>
                             <vue-datetime-picker-input
                                 :xmin="{{strtotime('yesterday')}}"
-                                xid="dp" xname="expire" xshow="datetime" xtitle="Expire date" def-tab="1"
+                                xid="dp" xname="expire" xtitle="Expire date"  @if(app()->getLocale() != 'fa')  def-tab="1" xshow="datetime"  @else xshow="pdatetime"  @endif
                                 @if(isset($item)) :xvalue="{{strtotime($item->expire)}}" @endif
                                 :timepicker="true"
                             ></vue-datetime-picker-input>

resources/views/components/setting-field.blade.php

@@ -22,6 +22,26 @@
                       class="form-control"
                       rows="5">{{old($setting->key, $setting->value)}}</textarea>
             @break
+        @case('TIME')
+            <vue-time-picker :am-pm="false"
+                             xid="{{$setting->key}}"
+                             xname="{{$setting->key}}"
+                             :xvalue="{{$setting->value}}"
+                             xtitle="{{$setting->title}}"></vue-time-picker>
+            @break
+        @case('DATE')
+            <vue-datetime-picker-input
+                xid="{{$setting->key}}" xname="{{$setting->key}}"  @if(app()->getLocale() == 'fa')  xshow="pdate" @else xshow="date" @endif  xtitle="{{$setting->title}}" @if(app()->getLocale() != 'fa')  def-tab="1" @endif
+            :xvalue="{{$setting->value}}"
+            ></vue-datetime-picker-input>
+            @break
+        @case('DATETIME')
+            <vue-datetime-picker-input
+                xid="{{$setting->key}}" xname="{{$setting->key}}"  @if(app()->getLocale() == 'fa')  xshow="pdatetime" @else xshow="datetime" @endif  xtitle="{{$setting->title}}" @if(app()->getLocale() != 'fa')  def-tab="1" @endif
+            :xvalue="{{$setting->value}}"
+                :timepicker="true"
+            ></vue-datetime-picker-input>
+            @break
         @case('ICON')
             <remix-icon-picker xname="{{$setting->key}}" xvalue="{{old($setting->key, $setting->value)}}"></remix-icon-picker>
             @break

resources/views/segments/customer/AvisaCustomer/AvisaCustomer.blade.php

@@ -287,7 +287,8 @@
                                     </label>
                                     <vue-datetime-picker-input
                                         :xmax="{{strtotime('yesterday')}}"
-                                        xid="dp" xname="dob" xshow="pdate" xtitle="{{__("Date of born")}}" def-tab="0"
+                                        xid="dp" xname="dob" xtitle="{{__("Date of born")}}"
+                                        @if(app()->getLocale() != 'fa')  def-tab="1" xshow="date"  @else xshow="pdate"  @endif
                                         :xvalue="{{strtotime(auth('customer')->user()->dob)}}"
                                         :timepicker="false"
                                     ></vue-datetime-picker-input>