Develop

package.json

@@ -57,8 +57,7 @@
     "vue-stepper": "^1.4.2",
     "vue-sweetalert2": "^5.0.2",
     "vuedraggable": "^2.24.3",
-    "vuejs-datepicker": "^1.6.2",
-    "vuejs-datetimepicker": "^1.1.13",
+    "vue-vanilla-datetime-picker": "^1.2.0",
     "vuejs-paginate": "^2.1.0",
     "vuex": "^3.0.0",
     "watchify": "^4.0.0",

src/App.vue

@@ -275,6 +275,10 @@ export default {
   },
 };
 </script>
+<style>
+@import "../node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker.css";
+@import url("./assets/css/style-override.css");
+</style>
 <style scoped>
 .logo {
   /* width: 144px; */

src/assets/css/participant-side-datetime-override.css

@@ -0,0 +1,3 @@
+.datetime-picker-main {    
+    position: static;    
+}

src/assets/css/style-override.css

@@ -0,0 +1,12 @@
+.weekday__row {    
+    color: rgb(241, 179, 25);    
+}
+.datetime-picker__button{
+    border-radius: 5px;
+    width: 100%;
+    background: #fff;
+}
+.datetime-picker-main {    
+    width: 100%;
+    z-index: 10;
+}

src/components/admin/createProjectSlider/components/GeneralConfig.vue

@@ -62,15 +62,6 @@
 
 
 }
-.datetime-picker input{
-        background-color: red !important;
-        min-width: 0px !important;
-}
-.datetime-picker input#tj-datetime-input{
-    display: none;
-    border: none !important;
-    min-width: none !important;
-}
 
 .slight-left-margin {
   margin-left: 2px;
@@ -153,14 +144,15 @@
             </div>
 
             <div class="col-lg-9 col-md-9 px-0 datepicker">
-
-
-                <datepicker 
-                    v-model="project.fromDate"
-                    name="fromDate"
-                    format="YYYY-MM-DD h:i:s" 
-
-                   />
+              <date-time-picker 
+                v-model="project.fromDate"
+                :clear-button="true"
+                :close-button="true"
+                empty-value=""
+                :today-button="true"
+                :time-picker="true" 
+                :hour-time="24"     
+              ></date-time-picker>
 
             </div>  
 
@@ -173,12 +165,14 @@
                 <tool-tips infoMessage="End date time of the event"></tool-tips><label for="endDate" class="col-form-label">End Date<span style="color: red">*</span>: </label>
             </div>
             <div class="col-lg-9 col-md-9 px-0">
-                <Datepicker 
-                class="datepicker"
-                    v-model="project.toDate"
-                    name="toDate"
-                    format="YYYY-MM-DD h:i:s" 
-                />
+                <date-time-picker                 
+                  v-model="project.toDate"
+                  :clear-button="true"
+                  :close-button="true"
+                  empty-value=""
+                  :today-button="true"
+                  :hour-time="24" 
+                ></date-time-picker>
             </div>  
     </div>
 
@@ -240,7 +234,6 @@
 
 <script>
 import config from "../../../../config"
-import Datepicker from 'vuejs-datetimepicker'
 import notificationMixins from "../../../../mixins/notificationMixins"
 import Messages from "../../../../utils/messages/admin/en";
 import ToolTips from "../../../basic/toolTips.vue";
@@ -249,7 +242,7 @@ import HfSelectDropDown from "../../../elements/HfSelectDropDown.vue"
 import EventBus from "../../../../eventBus"
 export default {
   name: "GeneralConfig",
-  components: {Datepicker, ToolTips, HfButtons, HfSelectDropDown},
+  components: {ToolTips, HfButtons, HfSelectDropDown},
   computed:{
 buttonThemeCss() {
       return {

src/components/participant/ActionInputs/InputDate.vue

@@ -21,8 +21,17 @@
 			<b-card-body class="user-details">
 				<b-row>
 					<b-col cols="12" sm="12" md="12">
-						<div class="follow">
-							<b-form-input type="date" :placeholder="data.placeHolder" v-model="data.value" :disabled="done" :required="data.isManadatory"></b-form-input>
+							<date-time-picker
+							v-model="data.value"
+							:clear-button="true"
+							:close-button="true"
+							empty-value=""
+							:today-button="true"
+							format="DDDD"
+							:time-picker="false"
+							:disabled="done"
+							:required="data.isManadatory"
+							></date-time-picker>
 						</div>
 					</b-col>
 				</b-row>
@@ -36,6 +45,7 @@
 	</b-card>
 </template>
 <style scoped>
+@import url("../../../assets/css/participant-side-datetime-override.css");
 .center{
   display: block; margin-left: auto;margin-right: auto
 }

src/main.js

@@ -23,7 +23,7 @@ import {
   VeLoading,
   VeLocale,
 } from "vue-easytable"; // import VUE EASY TABLE
-
+import DateTimePicker from 'vue-vanilla-datetime-picker';
 import VueSidebarMenu from "vue-sidebar-menu";
 import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
 import VueMeta from 'vue-meta';
@@ -47,7 +47,7 @@ Vue.use(VeTable);
 Vue.use(VePagination);
 Vue.use(VeIcon);
 Vue.use(VeLoading);
-
+Vue.component('date-time-picker', DateTimePicker);
 Vue.prototype.$veLoading = VeLoading;
 Vue.prototype.$veLocale = VeLocale;
 

src/views/admin/Events.vue

@@ -968,9 +968,9 @@ export default {
       this.isProjectEditing = true;
       this.project = { ...project };
       this.project.fromDate = dayjs(project.fromDate).format(
-        "YYYY-MM-DD hh:mm:ss"
+        "YYYY-MM-DD HH:mm:ss"
       );
-      this.project.toDate = dayjs(project.toDate).format("YYYY-MM-DD hh:mm:ss");
+      this.project.toDate = dayjs(project.toDate).format("YYYY-MM-DD HH:mm:ss");
 
       // eventBus.$emit("sendProject", this.project);
       // CHECK IF TELEGRAM AND TWITTER EXISTS AND UPDATE THE DATA STRUCTURE

src/views/superAdmin/Home.vue

@@ -126,9 +126,13 @@
                 </label>
               </div>
               <div class="col-lg-6 col-md-9 px-0 py-1 datepicker">
-                <datepicker
+                <date-time-picker
                   v-model='resource.value.expiredAt'
-                  format="YYYY-MM-DD h:i:s"
+                  :clear-button="true"
+                  :close-button="true"
+                  empty-value=""   
+                  :time-picker="true" 
+                  :hour-time="24"
                 />
               </div>
 
@@ -323,7 +327,6 @@ import config from "../../config";
 import Loading from "vue-loading-overlay";
 import "vue-loading-overlay/dist/vue-loading.css";
 import notificationMixins from "../../mixins/notificationMixins";
-import Datepicker from "vuejs-datetimepicker";
 import { isValidURL,isFloat } from "../../mixins/fieldValidationMixin";
 import dayjs from "dayjs";
 import HfButtons from "../../components/elements/HfButtons.vue"
@@ -332,7 +335,7 @@ import HfTable from "../../components/elements/HfTable.vue"
 export default {
   components: {
     Loading,
-    Datepicker,
+
     HfButtons,
     HfPopUp,
     HfTable
@@ -475,7 +478,7 @@ export default {
       this.resources.map(x => {
         if(x.id === id){
             Object.assign(x.value, { ...coupon })
-            if(id === 5) x.value.expiredAt = dayjs(x.value.expiredAt).format("YYYY-MM-DD hh:mm:ss");
+            if(id === 5) x.value.expiredAt = dayjs(x.value.expiredAt).format("YYYY-MM-DD HH:mm:ss");
             return x
         }
       })