寫這個文章主要是記錄下用法,官網已經說的很詳細了
npm install vue-datepicker --save
html代碼
<myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker><myDatepicker :date="endtime" :option="timeoption" :limit="limit"></myDatepicker>
js代碼
<script>import myDatepicker from 'vue-datepicker'export default { name: 'PillDetail', components:{ myDatepicker }, data () { return { startTime: { // 相當于變量 time: '' }, endtime: { // 相當于變量 time: '' }, timeoption: { type: 'min', // day , multi-day week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], format: 'YYYY-M-D HH:mm', // YYYY-MM-DD 日期 inputStyle: { // input 樣式 'display': 'inline-block', 'padding': '6px', 'line-height': '22px', 'width':'160px', 'font-size': '16px', 'border': '2px solid #fff', 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)', 'border-radius': '2px', 'color': '#5F5F5F', 'margin':'0' }, color: { // 字體顏色 header: '#35acff', // 頭部 headerText: '#fff', // 頭部文案 }, buttons: { // button 文案 ok: '確定', cancel: '取消' }, overlayOpacity: 0.5, // 遮罩透明度 placeholder: '請選時間', // 提示日期 dismissible: true // 默認true 待定 }, multiOption: { type: 'min', week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], format:"YYYY-M-D HH:mm", inputStyle: { 'display': 'inline-block', 'padding': '6px', 'line-height': '22px', 'width':'160px', 'font-size': '16px', 'border': '2px solid #fff', 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)', 'border-radius': '2px', 'color': '#5F5F5F', 'margin':'0' }, color: { // 字體顏色 header: '#35acff', // 頭部 headerText: '#fff', // 頭部文案 }, buttons: { // button 文案 ok: '確定', cancel: '取消' }, placeholder: '請選時間', dismissible: true }, limit: [{ type: 'weekday', available: [1, 2, 3, 4, 5,6,0] }, { type: 'fromto', from: '2016-02-01', to: '2050-02-20' }] } }, methods: { }}</script>設置前一天和后一天的時間,我的實現是通過watch來監聽startTime的值,發現變化后,對當前日期和選擇的日期進行對比,超過未來時間就不進行變更,而計算后一天或前一天,只需讓當前時間進行加或減一天的時間即可
新聞熱點
疑難解答
圖片精選