From 9d5567575aa1c79d4a36c8335704653ce6e633d0 Mon Sep 17 00:00:00 2001
From: raj6939 <raj.v.patil108@gmail.com>
Date: Thu, 2 Feb 2023 23:58:28 +0530
Subject: [PATCH 1/2] added new datetime picker package and fixed bug

---
 package.json                                  |  3 +-
 src/App.vue                                   |  4 ++
 .../participant-side-datetime-override.css    |  3 ++
 src/assets/css/style-override.css             | 12 ++++++
 .../components/GeneralConfig.vue              | 43 ++++++++-----------
 .../participant/ActionInputs/InputDate.vue    | 14 +++++-
 src/main.js                                   |  4 +-
 src/views/admin/Events.vue                    |  4 +-
 src/views/superAdmin/Home.vue                 | 10 +++--
 9 files changed, 61 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/css/participant-side-datetime-override.css
 create mode 100644 src/assets/css/style-override.css

diff --git a/package.json b/package.json
index e8e39f53..adc6890a 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 3c65a389..313b60ce 100644
--- a/src/App.vue
+++ b/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; */
diff --git a/src/assets/css/participant-side-datetime-override.css b/src/assets/css/participant-side-datetime-override.css
new file mode 100644
index 00000000..81ba1dde
--- /dev/null
+++ b/src/assets/css/participant-side-datetime-override.css
@@ -0,0 +1,3 @@
+.datetime-picker-main {    
+    position: static;    
+}
diff --git a/src/assets/css/style-override.css b/src/assets/css/style-override.css
new file mode 100644
index 00000000..aafceb48
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/admin/createProjectSlider/components/GeneralConfig.vue b/src/components/admin/createProjectSlider/components/GeneralConfig.vue
index 18f84b35..8e6c442e 100644
--- a/src/components/admin/createProjectSlider/components/GeneralConfig.vue
+++ b/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 {
diff --git a/src/components/participant/ActionInputs/InputDate.vue b/src/components/participant/ActionInputs/InputDate.vue
index 7076977d..ba2b47f1 100644
--- a/src/components/participant/ActionInputs/InputDate.vue
+++ b/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
 }
diff --git a/src/main.js b/src/main.js
index 8271a888..6c8f303f 100644
--- a/src/main.js
+++ b/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;
 
diff --git a/src/views/admin/Events.vue b/src/views/admin/Events.vue
index 5b95034c..59abb708 100644
--- a/src/views/admin/Events.vue
+++ b/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
diff --git a/src/views/superAdmin/Home.vue b/src/views/superAdmin/Home.vue
index 8f53c558..0aab4b1f 100644
--- a/src/views/superAdmin/Home.vue
+++ b/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>
 
@@ -475,7 +479,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
         }
       })

From 7873ae82792f1468e087fbe3d57f821cf2d855c6 Mon Sep 17 00:00:00 2001
From: raj6939 <raj.v.patil108@gmail.com>
Date: Fri, 3 Feb 2023 00:09:35 +0530
Subject: [PATCH 2/2] removed old datetime component

---
 src/views/superAdmin/Home.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/superAdmin/Home.vue b/src/views/superAdmin/Home.vue
index 0aab4b1f..734481ed 100644
--- a/src/views/superAdmin/Home.vue
+++ b/src/views/superAdmin/Home.vue
@@ -327,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"
@@ -336,7 +335,7 @@ import HfTable from "../../components/elements/HfTable.vue"
 export default {
   components: {
     Loading,
-    Datepicker,
+    
     HfButtons,
     HfPopUp,
     HfTable