Added datetime picker field

vue-generators · Apr 30, 2016 · 5cbaadb · 5cbaadb
1 parent a4797c0
commit 5cbaadb
Show file tree

Hide file tree

Showing 8 changed files with 347 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ TODO
 ## Installation
 ### NPM
 TODO
+
 ### Manual
 TODO
 
@@ -35,13 +36,14 @@ npm run build
 TODO
 
 ## TODO
-* [ ] Date picker with bootstrap-datepicker
+* [x] Date picker with bootstrap-datepicker
 * [ ] Time picker
 * [ ] Color picker with spectrum
 * [ ] Image editor
 * [ ] Better slider
 * [ ] Groupable fields
 * [ ] Validation handling with multiple models
+* [ ] Bundle for vendor files
 
 ## License
 vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).

diff --git a/dev/data.js b/dev/data.js
@@ -41,6 +41,7 @@ module.exports = {
 			user.language = lang;
 			user.status = faker.helpers.randomize([true, false, true]);
 			user.created = faker.date.recent(30).valueOf();
+			user.dt = faker.date.recent(30).valueOf();
 
 			if (user.type == "business") {
 				user.company = {

diff --git a/dev/index.html b/dev/index.html
@@ -7,11 +7,15 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
 
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
+
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>

diff --git a/dev/schema.js b/dev/schema.js
@@ -143,7 +143,21 @@ module.exports = {
 				model.age = moment().year() - moment(newVal).year();
 			}
 
-		},			
+		},	
+
+		{
+			type: "dateTime",
+			label: "DT",
+			model: "dt",
+			multi: true,
+			validator: [
+				validators.date
+			],
+			dateTimePickerOptions: {
+				format: "YYYY-MM-DD HH:mm:ss"
+			}
+
+		},
 		{
 			type: "slider",
 			label: "Rank",

diff --git a/dist/vue-form-generator.js b/dist/vue-form-generator.js
diff --git a/dist/vue-form-generator.min.js b/dist/vue-form-generator.min.js
diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue
@@ -0,0 +1,52 @@
+<template lang="jade">
+	.input-group.date
+		input.form-control(type="text", v-model="value", :disabled="disabled")
+		span.input-group-addon
+			span.glyphicon.glyphicon-calendar
+</template>
+
+<script>
+	import abstractField from './abstractField';
+	import moment from "moment";
+
+	let inputFormat = "YYYY-MM-DD HH:mm:ss";
+
+	export default {
+		mixins: [ abstractField ],
+
+		methods: {
+
+			formatValueToField(value) {
+				if (value != null)
+					return moment(value, this.schema.format).format(inputFormat);
+
+				return value;
+			},
+
+			formatValueToModel(value) {
+				if (value != null) {
+					let m = moment(value, inputFormat);
+					if (this.schema.format)
+						value = m.format(this.schema.format);
+					else
+						value = m.toDate().valueOf();
+				}
+
+				return value;
+			}
+
+		},
+
+		ready() {
+			if ($.fn.datetimepicker) 
+				$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);
+		}		
+	}
+</script>
+
+
+<style lang="sass" scoped>
+	input {
+		width: 100%;
+	}
+</style>
diff --git a/webpack.build.config.js b/webpack.build.config.js
@@ -22,44 +22,43 @@ var loaders = [
 ];
 
 module.exports = [
-
-{
-    entry: "./src/index",
-    output: {
-        path: "./dist",
-        filename: "vue-form-generator.js",
-        library: "VueFormGenerator",
-        libraryTarget: "umd"
+    {
+        entry: "./src/index",
+        output: {
+            path: "./dist",
+            filename: "vue-form-generator.js",
+            library: "VueFormGenerator",
+            libraryTarget: "umd"
+        },
+        plugins: [
+        new webpack.BannerPlugin(banner, {
+            raw: true
+        })],
+        module: {
+            loaders: loaders
+        }
     },
-    plugins: [
-    new webpack.BannerPlugin(banner, {
-        raw: true
-    })],
-    module: {
-        loaders: loaders
-    }
-},
 
-{
-    entry: "./src/index",
-    output: {
-        path: "./dist",
-        filename: "vue-form-generator.min.js",
-        library: "VueFormGenerator",
-        libraryTarget: "umd"
-    },
-    plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-        compress: {
-            warnings: false
+    {
+        entry: "./src/index",
+        output: {
+            path: "./dist",
+            filename: "vue-form-generator.min.js",
+            library: "VueFormGenerator",
+            libraryTarget: "umd"
+        },
+        plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.BannerPlugin(banner, {
+            raw: true
+        })],
+        module: {
+            loaders: loaders
         }
-    }),
-    new webpack.BannerPlugin(banner, {
-        raw: true
-    })],
-    module: {
-        loaders: loaders
     }
-}
 
 ];