Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5cbaadb

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /