added date, datetime & time picker to setting

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/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