diff --git a/app/Models/Setting.php b/app/Models/Setting.php
index 03c9bcb..3185b13 100644
--- a/app/Models/Setting.php
+++ b/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()
     {
diff --git a/resources/js/app.js b/resources/js/app.js
index 1b7a562..0a3180f 100644
--- a/resources/js/app.js
+++ b/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
diff --git a/resources/js/components/vueDateTimePicker.vue b/resources/js/components/vueDateTimePicker.vue
index d1ef618..787b635 100644
--- a/resources/js/components/vueDateTimePicker.vue
+++ b/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]
diff --git a/resources/views/components/setting-field.blade.php b/resources/views/components/setting-field.blade.php
index 3305c5b..674a696 100644
--- a/resources/views/components/setting-field.blade.php
+++ b/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