<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue flatpickr demo</title>
<link rel="stylesheet" type="text/css" >
<link rel="stylesheet" type="text/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>
datepicker使用
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 之前在公司做一個(gè)搶單的項(xiàng)目，里面用到一個(gè)DatePicker的控件，寫個(gè)文章記錄一下，以后要用，來copy代碼 1...
- 這 本書主要寫的是，應(yīng)該主意力集中在需要去做的事情上，并非只等著按指令行事，那些曾經(jīng)讓我覺得無(wú)聊的工作，頓時(shí)...
- 在我們老家，每年都要舉行祭祖活動(dòng)。家鄉(xiāng)人認(rèn)為，先人們都會(huì)回來看看的。后人要熱情款待。祭祖活動(dòng)，簡(jiǎn)樸正式，是祖祖輩輩...
- 智能合約的開發(fā)在目前的階段還是基礎(chǔ)的初級(jí)階段，有很多的問題和挑戰(zhàn)需要去解決，主要是安全性、私密性和意外情景問題，加...
- 簡(jiǎn)介 一組同類型的值的組合, 根據(jù)組合的整體特性分為: 有序可重復(fù) - 數(shù)組(Array) 無(wú)序不重復(fù) - Set...
