fix dateTimePicker

expand date field formatter methods

Author: icebob

dev/full/schema.js

@@ -774,7 +774,7 @@ module.exports = {
 				"VueJS"
 			],
 			onChanged(model, newVal, oldVal, field) {
-				console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+				console.log(`Model's skills changed from ${oldVal} to ${newVal}. Model:`, model);
 			},
 			max: 4,
 			placeholder: "placeholder",

src/fields/abstractDateField.js

@@ -0,0 +1,30 @@
+import abstractField from "./abstractField";
+import { defaultsDeep } from "lodash";
+
+import fecha from "fecha";
+
+export default defaultsDeep(abstractField, {
+	methods: {
+
+		formatValueToField(value) {
+			if (value != null) {
+				let dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
+				return fecha.format(dt, this.getDateFormat());
+			}
+
+			return value;
+		},
+
+		formatValueToModel(value) {
+			if (value != null) {
+				let m = fecha.parse(value, this.getDateFormat());
+				if (this.schema.format)
+					value = fecha.format(m, this.schema.format);
+				else
+					value = m.valueOf();
+			}
+
+			return value;
+		}
+	}
+});

src/fields/fieldDateTimePicker.vue

@@ -8,8 +8,8 @@
 <script>
 	/* global $ */
 	import abstractField from "./abstractField";
-	import fecha from "fecha";
 	import { defaults } from "lodash";
+	import dateFieldHelper from "../utils/dateFieldHelper";
 
 	let inputFormat = "YYYY-MM-DD HH:mm:ss";
 
@@ -25,35 +25,18 @@
 					return inputFormat;
 			},
 
-			formatValueToField(value) {
-				if (value != null) {
-					let dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
-					return fecha.format(dt, this.getDateFormat());
-				}
-
-				return value;
-			},
-
-			formatValueToModel(value) {
-				if (value != null) {
-					let m = fecha.parse(value, this.getDateFormat());
-					if (this.schema.format)
-						value = fecha.format(m, this.schema.format);
-					else
-						value = m.valueOf();
-				}
-
-				return value;
-			}
-
+			...dateFieldHelper
 		},
 
 		mounted() {
 			this.$nextTick(function () {
 				if (window.$ && window.$.fn.datetimepicker) {
+					let input = this.$el.querySelector(".form-control");
 					$(this.$el).datetimepicker(defaults(this.schema.dateTimePickerOptions || {}, {
 						format: inputFormat
-					}));
+					})).on("dp.change", e => {
+						this.value = this.$el.querySelector(".form-control").value;
+					});
 				} else {
 					console.warn("Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!");
 				}

src/fields/fieldPikaday.vue

@@ -4,8 +4,8 @@
 
 <script>
 	import abstractField from "./abstractField";
-	import fecha from "fecha";
 	import { defaults } from "lodash";
+	import dateFieldHelper from "../utils/dateFieldHelper";	
 
 	let inputFormat = "YYYY-MM-DD";
 
@@ -24,27 +24,7 @@
 					return inputFormat;
 			},
 
-			formatValueToField(value) {
-				if (value != null) {
-					let dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
-					return fecha.format(dt, this.getDateFormat());
-				}
-
-				return value;
-			},
-
-			formatValueToModel(value) {
-				if (value != null) {
-					let m = fecha.parse(value, this.getDateFormat());
-					if (this.schema.format)
-						value = fecha.format(m, this.schema.format);
-					else
-						value = m.valueOf();
-				}
-
-				return value;
-			}
-
+			...dateFieldHelper
 		},
 
 		mounted() {

src/utils/dateFieldHelper.js

@@ -0,0 +1,25 @@
+import fecha from "fecha";
+
+export default {
+
+	formatValueToField(value) {
+		if (value != null) {
+			let dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
+			return fecha.format(dt, this.getDateFormat());
+		}
+
+		return value;
+	},
+
+	formatValueToModel(value) {
+		if (value != null) {
+			let m = fecha.parse(value, this.getDateFormat());
+			if (this.schema.format)
+				value = fecha.format(m, this.schema.format);
+			else
+				value = m.valueOf();
+		}
+
+		return value;
+	}
+};