DatePicker

日历组件，支持左右滑动切换月份。

示例
默认不选择日期
  1. <nut-datepicker
  2.   :params="dateParams"
  3.   :is-fold="isFold"
  4.   @confirm="confirm"
  5.   @cancel="cancel"
  6.   v-if="isFold">
  7. </nut-datepicker>

  1. export default {
  2.     data(){
  3.         return{
  4.             isFold: false,
  5.             dateParams: {
  6.                 curDate: '请选择日期'
  7.             },
  8.         }
  9.     },
  10.     methods:{
  11.         openDatePicker(){
  12.             this.isFold = true;
  13.         },
  14.         cancel() {
  15.             this.isFold = false;
  16.         },
  18.         confirm(params) {
  19.             this.dateParams.curDate = params.year + '-' + params.month + '-' + params.day;
  20.             this.cancel();
  21.         }
  22.     }
  23. }

有默认选择日期和设定了开始结束日期范围
  1. <nut-datepicker
  2.   :params="dateParams"
  3.   :is-fold="isFold"
  4.   @confirm="confirm"
  5.   @cancel="cancel"
  6.   v-if="isFold">
  7. </nut-datepicker>

  1. export default {
  2.     data(){
  3.         return{
  4.             isFold: false,
  5.             dateParams: {
  6.                 curDate: '2018-01-12',
  7.                 minDate: '2018-01-08',
  8.                 maxDate: '2018-01-26'
  9.             }
  10.         }
  11.     },
  12.     methods:{
  13.         openDatePicker(){
  14.             this.isFold = true;
  15.         },
  17.         cancel() {
  18.             this.isFold = false;
  19.         },
  21.         confirm(params) {
  22.             this.dateParams.curDate = params.year + '-' + params.month + '-' + params.day;
  23.             this.cancel();
  24.         }
  25.     }
  26. }

默认不选择日期, 不存在确认取消按钮
  1. <nut-datepicker
  2.   :params="dateParams"
  3.   :is-fold="isFold"
  4.   :is-confirm-btn="isConfirmBtn"
  5.   @confirm="confirm"
  6.   @cancel="cancel"
  7.   v-if="isFold">
  8. </nut-datepicker>

  1. export default {
  2.     data(){
  3.         return{
  4.             isFold: false,
  5.             isConfirmBtn: false,
  6.             dateParams: {
  7.                 curDate: '请选择日期'
  8.             }
  9.         }
  10.     },
  11.     methods:{
  12.         openDatePicker(){
  13.             this.isFold = true;
  14.         },
  16.         cancel() {
  17.             this.isFold = false;
  18.         },
  20.         confirm(params) {
  21.             this.dateParams.curDate = params.year + '-' + params.month + '-' + params.day;
  22.             this.cancel();
  23.         }
  24.     }
  25. }

Props
参数说明类型默认值可选值
isFold是否默认展开日历Booleanfalsetrue/false
isConfirmBtn是否有确认取消按钮面板Booleantruetrue/false
dateParams传入日历规则参数Object——
dateParams.maxDate可指定结束日期Stringnullyyyy-mm-dd
dateParams.curDate指定默认选择日期，小于开始日期会修改开始日期Stringnullyyyy-mm-dd
dateParams.minDate可指定开始日期Stringnullyyyy-mm-dd
Events
事件名说明回调参数
confirm点击确认按钮时触发或无按钮面板时选中日期触发—
cancel点击取消按钮时触发年月日对象