-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
34 lines (34 loc) · 1.09 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="js/vue-datepicker.js"></script>
<link rel="stylesheet" href="css/vue-datepicker.css">
</head>
<div id="app">
<input v-model="birthDate" @focus="pickVisible = true" type="text" placeholder="02/02/2002"/>
<date-picker v-if="pickVisible" v-model="birthDate" :config="pickerConfig" @blur="pickVisible = false" @change="pickChanged"></date-picker>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
pickVisible: false,
birthDate: '',
pickerConfig: {
names: {
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
},
mondayFirst: true, // monday as first weekday
format: 'mm/dd/yyyy' // date exchange format.
}
},
methods: {
pickChanged: function(pickDate) {
this.birthDate = pickDate;
}
}
});
</script>
</html>