寫這個文章主要是記錄下用法,官網已經說的很詳細了
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的值,發現變化后,對當前日期和選擇的日期進行對比,超過未來時間就不進行變更,而計算后一天或前一天,只需讓當前時間進行加或減一天的時間即可
新聞熱點
疑難解答
圖片精選