Skip to content

Commit 5cbaadb

Browse files
icebobicebob
committed
Added datetime picker field
1 parent a4797c0 commit 5cbaadb

File tree

8 files changed

+347
-147
lines changed

8 files changed

+347
-147
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ TODO
1313
## Installation
1414
### NPM
1515
TODO
16+
1617
### Manual
1718
TODO
1819

@@ -35,13 +36,14 @@ npm run build
3536
TODO
3637

3738
## TODO
38-
* [ ] Date picker with bootstrap-datepicker
39+
* [x] Date picker with bootstrap-datepicker
3940
* [ ] Time picker
4041
* [ ] Color picker with spectrum
4142
* [ ] Image editor
4243
* [ ] Better slider
4344
* [ ] Groupable fields
4445
* [ ] Validation handling with multiple models
46+
* [ ] Bundle for vendor files
4547

4648
## License
4749
vue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).

‎dev/data.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ module.exports = {
4141
user.language = lang;
4242
user.status = faker.helpers.randomize([true, false, true]);
4343
user.created = faker.date.recent(30).valueOf();
44+
user.dt = faker.date.recent(30).valueOf();
4445

4546
if (user.type == "business") {
4647
user.company = {

‎dev/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@
77
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
88
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
99
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
10+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
1011

1112
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
13+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
14+
1215
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
1316
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
1417
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
18+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
1519
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
1620
</head>
1721
<body>

‎dev/schema.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,21 @@ module.exports = {
143143
model.age = moment().year() - moment(newVal).year();
144144
}
145145

146-
},
146+
},
147+
148+
{
149+
type: "dateTime",
150+
label: "DT",
151+
model: "dt",
152+
multi: true,
153+
validator: [
154+
validators.date
155+
],
156+
dateTimePickerOptions: {
157+
format: "YYYY-MM-DD HH:mm:ss"
158+
}
159+
160+
},
147161
{
148162
type: "slider",
149163
label: "Rank",

‎dist/vue-form-generator.js‎

Lines changed: 234 additions & 106 deletions
Large diffs are not rendered by default.

‎dist/vue-form-generator.min.js‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/fields/fieldDateTime.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template lang="jade">
2+
.input-group.date
3+
input.form-control(type="text", v-model="value", :disabled="disabled")
4+
span.input-group-addon
5+
span.glyphicon.glyphicon-calendar
6+
</template>
7+
8+
<script>
9+
import abstractField from './abstractField';
10+
import moment from "moment";
11+
12+
let inputFormat = "YYYY-MM-DD HH:mm:ss";
13+
14+
export default {
15+
mixins: [ abstractField ],
16+
17+
methods: {
18+
19+
formatValueToField(value) {
20+
if (value != null)
21+
return moment(value, this.schema.format).format(inputFormat);
22+
23+
return value;
24+
},
25+
26+
formatValueToModel(value) {
27+
if (value != null) {
28+
let m = moment(value, inputFormat);
29+
if (this.schema.format)
30+
value = m.format(this.schema.format);
31+
else
32+
value = m.toDate().valueOf();
33+
}
34+
35+
return value;
36+
}
37+
38+
},
39+
40+
ready() {
41+
if ($.fn.datetimepicker)
42+
$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);
43+
}
44+
}
45+
</script>
46+
47+
48+
<style lang="sass" scoped>
49+
input {
50+
width: 100%;
51+
}
52+
</style>

‎webpack.build.config.js‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -22,44 +22,43 @@ var loaders = [
2222
];
2323

2424
module.exports = [
25-
26-
{
27-
entry: "./src/index",
28-
output: {
29-
path: "./dist",
30-
filename: "vue-form-generator.js",
31-
library: "VueFormGenerator",
32-
libraryTarget: "umd"
25+
{
26+
entry: "./src/index",
27+
output: {
28+
path: "./dist",
29+
filename: "vue-form-generator.js",
30+
library: "VueFormGenerator",
31+
libraryTarget: "umd"
32+
},
33+
plugins: [
34+
new webpack.BannerPlugin(banner, {
35+
raw: true
36+
})],
37+
module: {
38+
loaders: loaders
39+
}
3340
},
34-
plugins: [
35-
new webpack.BannerPlugin(banner, {
36-
raw: true
37-
})],
38-
module: {
39-
loaders: loaders
40-
}
41-
},
4241

43-
{
44-
entry: "./src/index",
45-
output: {
46-
path: "./dist",
47-
filename: "vue-form-generator.min.js",
48-
library: "VueFormGenerator",
49-
libraryTarget: "umd"
50-
},
51-
plugins: [
52-
new webpack.optimize.UglifyJsPlugin({
53-
compress: {
54-
warnings: false
42+
{
43+
entry: "./src/index",
44+
output: {
45+
path: "./dist",
46+
filename: "vue-form-generator.min.js",
47+
library: "VueFormGenerator",
48+
libraryTarget: "umd"
49+
},
50+
plugins: [
51+
new webpack.optimize.UglifyJsPlugin({
52+
compress: {
53+
warnings: false
54+
}
55+
}),
56+
new webpack.BannerPlugin(banner, {
57+
raw: true
58+
})],
59+
module: {
60+
loaders: loaders
5561
}
56-
}),
57-
new webpack.BannerPlugin(banner, {
58-
raw: true
59-
})],
60-
module: {
61-
loaders: loaders
6262
}
63-
}
6463

6564
];

0 commit comments

Comments
 (0)