diff --git a/Step/wwwroot/assets/styles/base/modals.less b/Step/wwwroot/assets/styles/base/modals.less
index 1b25a6d7..692e7083 100644
--- a/Step/wwwroot/assets/styles/base/modals.less
+++ b/Step/wwwroot/assets/styles/base/modals.less
@@ -432,6 +432,49 @@
         color: @color-warm-grey;
         margin-bottom: 4px;
       }
+      .data_Selector{
+        width: 209px;
+        height: 48px;
+        font-size: 18px;
+        margin-left: 24px;
+        border-radius: 2px;
+        box-shadow: none;
+        border: solid 1px @color-silver;
+      }
+      .time_Selector{
+        width: 110px;
+        height: 48px;
+        font-size: 18px;
+        margin-left: 24px;
+        border-radius: 2px;
+        box-shadow: none;
+        border: solid 1px @color-silver;
+      }
+      .data_Selector, .time_Selector{
+        .mx-input{
+          border: none;
+          border-radius: 0px;
+          height: 48px;
+          box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+          color: initial;
+        }
+        .mx-input-append{
+          width: 37px;
+        }
+        .mx-calendar-icon{
+          color: @color-cyan-blue;
+          stroke-width: 12px;
+        }
+        .actived{
+          background-color:@color-cyan-blue;
+        }
+        .today{
+          background-color: @color-faded-red;
+          border-radius: 16px; 
+          color: #fff;
+        }
+      }
+
       input[type="date"],
       input[type="time"] {
         width: 209px;
@@ -480,15 +523,18 @@
       select {
         width: 56px;
         height: 48px;
-        font-size: 18px;
         margin-left: 24px;
         border-radius: 2px;
         box-shadow: inset 0 1px 3px 0 @color-black-50;
         border: solid 1px @color-silver;
+        box-sizing: border-box;
+      }
+      input[type="text"]{
+        padding: 10px;
       }
       select {
         width: 144px;
-        box-shadow: 0 1px 2px 0 @color-black-40;
+        box-shadow: inset 0 1px 3px 0 @color-black-50;
         margin-left: 16px;
         padding-left: 16px;
       }
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index fc442889..5e39b197 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -390,6 +390,63 @@
   color: #878787;
   margin-bottom: 4px;
 }
+.modal.create-maintenance .time .date .data_Selector,
+.modal.create-maintenance .time .end_time .data_Selector {
+  width: 209px;
+  height: 48px;
+  font-size: 18px;
+  margin-left: 24px;
+  border-radius: 2px;
+  box-shadow: none;
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .time .date .time_Selector,
+.modal.create-maintenance .time .end_time .time_Selector {
+  width: 110px;
+  height: 48px;
+  font-size: 18px;
+  margin-left: 24px;
+  border-radius: 2px;
+  box-shadow: none;
+  border: solid 1px #bbbcbc;
+}
+.modal.create-maintenance .time .date .data_Selector .mx-input,
+.modal.create-maintenance .time .end_time .data_Selector .mx-input,
+.modal.create-maintenance .time .date .time_Selector .mx-input,
+.modal.create-maintenance .time .end_time .time_Selector .mx-input {
+  border: none;
+  border-radius: 0px;
+  height: 48px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  color: initial;
+}
+.modal.create-maintenance .time .date .data_Selector .mx-input-append,
+.modal.create-maintenance .time .end_time .data_Selector .mx-input-append,
+.modal.create-maintenance .time .date .time_Selector .mx-input-append,
+.modal.create-maintenance .time .end_time .time_Selector .mx-input-append {
+  width: 37px;
+}
+.modal.create-maintenance .time .date .data_Selector .mx-calendar-icon,
+.modal.create-maintenance .time .end_time .data_Selector .mx-calendar-icon,
+.modal.create-maintenance .time .date .time_Selector .mx-calendar-icon,
+.modal.create-maintenance .time .end_time .time_Selector .mx-calendar-icon {
+  color: #002e6e;
+  stroke-width: 12px;
+}
+.modal.create-maintenance .time .date .data_Selector .actived,
+.modal.create-maintenance .time .end_time .data_Selector .actived,
+.modal.create-maintenance .time .date .time_Selector .actived,
+.modal.create-maintenance .time .end_time .time_Selector .actived {
+  background-color: #002e6e;
+}
+.modal.create-maintenance .time .date .data_Selector .today,
+.modal.create-maintenance .time .end_time .data_Selector .today,
+.modal.create-maintenance .time .date .time_Selector .today,
+.modal.create-maintenance .time .end_time .time_Selector .today {
+  background-color: #d84b5c;
+  border-radius: 16px;
+  color: #fff;
+}
 .modal.create-maintenance .time .date input[type="date"],
 .modal.create-maintenance .time .end_time input[type="date"],
 .modal.create-maintenance .time .date input[type="time"],
@@ -445,15 +502,18 @@
 .modal.create-maintenance .repeat .repeat_input select {
   width: 56px;
   height: 48px;
-  font-size: 18px;
   margin-left: 24px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   border: solid 1px #bbbcbc;
+  box-sizing: border-box;
+}
+.modal.create-maintenance .repeat .repeat_input input[type="text"] {
+  padding: 10px;
 }
 .modal.create-maintenance .repeat .repeat_input select {
   width: 144px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   margin-left: 16px;
   padding-left: 16px;
 }
diff --git a/Step/wwwroot/package.json b/Step/wwwroot/package.json
index 862a698d..e36c0215 100644
--- a/Step/wwwroot/package.json
+++ b/Step/wwwroot/package.json
@@ -23,7 +23,7 @@
         "vue-smooth-dnd": "0.2.1",
         "vue2-ace-editor": "0.0.11",
         "brace": "0.11.1",
-        "vue2-datepicker" : "2.6.2"
+        "vue2-datepicker": "2.6.2"
     },
     "devDependencies": {
         "autoprefixer": "^7.1.2",
diff --git a/Step/wwwroot/src/modules/create-maintenance.vue b/Step/wwwroot/src/modules/create-maintenance.vue
index 30a867cc..7333834a 100644
--- a/Step/wwwroot/src/modules/create-maintenance.vue
+++ b/Step/wwwroot/src/modules/create-maintenance.vue
@@ -19,12 +19,29 @@
         </div>
         <div class="time" v-if="newMaintenance.type == 'EXP_DATE'">
             <div class="date">
-                <label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>
-                <input type="date" v-validate.initial="{required: true}" v-model="newMaintenance.date">
+                <label class="date_lbl">{{'create_maintenance_lbl_date' | localize("Data")}}</label>                
+                <date-picker 
+                    type="date" 
+                    lang="it" 
+                    v-model="newMaintenance.date" 
+                    class="data_Selector" 
+                    :format="dataformat()" 
+                    :clearable="false"
+                    :placeholder="'create_maintenance_lbl_date' | localize('Data')"
+                    v-validate.initial="{required: true}"></date-picker>
             </div>
             <div class="end_time">
                 <label class="end_time_lbl">{{'create_maintenance_lbl_end_time' | localize("Ora fine")}}</label>
-                <input type="time" v-validate.initial="{required: true}" v-model="newMaintenance.time" >
+                <date-picker 
+                    type="time" 
+                    :minute-step=1 
+                    lang="it" 
+                    v-model="newMaintenance.time" 
+                    class="time_Selector" 
+                    :format="timeformat()" 
+                    :clearable="false"
+                    :placeholder="'create_maintenance_lbl_end_time' | localize('Ora fine')"
+                    v-validate.initial="{required: true}" ></date-picker>
             </div>
         </div>
         <div class="repeat" v-if="newMaintenance.type == 'TIME_INTERVAL'">
@@ -56,12 +73,10 @@ import { MaintenanceService } from "../services/maintenanceService";
 import { store } from "src/store";
 import { maintenanceActions } from "../store/maintenance.store";
 import moment from "moment";
+import DatePicker from "vue2-datepicker";
 
 export default {
-  components: { modal: Modal },
-//   props: {
-//     datafixed: {default:"datafixed"}
-//   },
+  components: { modal: Modal, datePicker: DatePicker },
   data: function(){
       return {
           newMaintenance: {type: "EXP_DATE"},
@@ -85,6 +100,12 @@ export default {
         Factory.Get(MessageService).deleteChannel("esc_pressed");
         ModalHelper.HideModal();
     },
+    dataformat(){
+        return moment()._locale._longDateFormat.L;
+    },
+    timeformat(){
+        return moment()._locale._longDateFormat.LT;
+    },
     async save(maintenance){
         if(maintenance.type == "EXP_DATE"){
             let dateTime = moment(maintenance.date + ' ' + maintenance.time);