項目中需要用到日期時間插件，嘗試用bootstrap、element的時間插件都各有各的報錯，對於一個菜鳥來說真的是很痛苦啊。終於，最后用了layDate實現了需要的功能
最終效果：
使用步驟：
1.下載js包
2.將laydate文件夾放在根目錄的static下
3.在index.html中引入
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>XXX</title> 7 <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <div id="app"></div> 11 <!-- built files will be auto injected --> 12 </body> 13 </html>
4.定義時間日期組件
<template>
<div class="hello">
<input type="text" placeholder="選擇體檢時間" id="orderTime" v-model="date">
</div>
</template>
<script>
export default {
name: "myTime",
data() {
return {
date: ""// 存儲選擇的日期
};
},
mounted() {
// 使用：執行一個laydate實例
laydate.render({
elem: "#orderTime", // 指定元素
type: "datetime", // 組件的類型：year,month,time···
format: 'yyyy-MM-dd HH:mm'// 設置顯示格式
done: value => { // 點擊確認執行的回調函數，會把當前選擇的時間傳入進來
// 把選擇的時間賦值給先前定義好的變量，顯示在頁面
this.date = value;
}
});
}
};
</script>
<style scoped>
.hello {
display: inline-block;
}
.hello input {
margin-left: -4px;
width: 300px;
height: 40px;
border-radius: 4px;
border: 1px solid #DCDFE6;
}
.layui-laydate .layui-this {
background-color: #358ee7 !important;
}
</style>
5.引用組件
<div class="">
<label for="orderTime">體檢日期：</label>
<myTime />
</div>