<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue flatpickr demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/flatpickr/4.5.0/flatpickr.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/flatpickr/4.5.0/ie.css">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/flatpickr/4.5.0/flatpickr.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/flatpickr/4.5.0/l10n/zh.js"></script>
<script type="text/javascript">
flatpickr.localize(flatpickr.l10ns.zh);
</script>
</head>
<body>
<script type="text/javascript">
var component = {
props:["model","placeholder","mode","time","seconds","options","style"],
template:"<input :placeholder='placeholder' :style='style' />",
data:function(){
return {
instance:{}
};
},
created:function(){
},
mounted:function(){
var self = this;
this.instance = self.el.value = value;
self.el,
el.value = value;
// self.$emit("change",self.model,value);
// }
// },this.options || {}));
},
methods:{
}
}
Vue.component("datepicker",component);
</script>
<div id="app">
<datepicker :model="date1" :placeholder="placeholder" time="true" @change="setVal"></datepicker>
<datepicker :model="date2" :placeholder="placeholder" @change="setVal2"></datepicker>
<datepicker :model="date1" v-on:change="setVal" time="true" seconds="true" :style="{width:'200px'}"></datepicker>
<datepicker :model="date1" v-on:change="setVal" mode="range" :style="{width:'250px'}"></datepicker>
<datepicker :model="date1" v-on:change="setVal" mode="multiple" :style="{width:'500px'}"></datepicker>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
date1:'',
date2:'',
placeholder:'选择日期'
},
methods:{
setVal:function(val){
this.date1 = val;
},
setVal2:function(val){
this.date2 = val;
}
}
})
</script>
</body>
</html>
网友评论