wxc-page-calendar

Weex 全屏日历组件,支持单程、往返日历的选择，可显示节假日，支持设置附加信息

Demo

wxc-page-calendar 日历 - 图1 wxc-page-calendar 日历 - 图2

使用方法

  1. <template>
  2.   <div class="wrapper">
  3.     <div class="btn" @click="showCalendar">
  4.       <text class="btn-txt">单程日历</text>
  5.     </div>
  7.     <div class="btn btn-margin yellow" @click="showReturnCalendar">
  8.       <text class="btn-txt">往返日历</text>
  9.     </div>
  11.     <div class="panel">
  12.       <text v-if="currentDate" class="text">当前日期: {{currentDate}}</text>
  13.     </div>
  15.     <wxc-page-calendar :date-range="dateRange"
  16.                        :animationType="animationType"
  17.                        :selected-date="selectedDate"
  18.                        :selected-note="selectedNote"
  19.                        :is-range="isRange"
  20.                        :minibar-cfg="minibarCfg"
  21.                        :desc-list="descList"
  22.                        @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked"
  23.                        @wxcPageCalendarDateSelected="wxcPageCalendarDateSelected"
  24.                        ref="wxcPageCalendar"></wxc-page-calendar>
  25.   </div>
  26. </template>
  27. <script>
  28.   import { WxcPageCalendar } from 'weex-ui';
  29.   export default {
  30.     components: {
  31.       WxcPageCalendar
  32.     },
  33.     data: () => ({
  34.       animationType: 'push',
  35.       currentDate: '',
  36.       selectedDate: ['2017-06-23', '2017-06-30'],
  37.       isRange: true,
  38.       calendarTitle: '选择日期',
  39.       dateRange: ['2017-06-10', '2018-06-10'],
  40.       selectedNote: ['出发', '到达', '往返'],
  41.       minibarCfg: {
  42.         title: '日期选择'
  43.       },
  44.       descList: [
  45.         { date: '2017-06-23', value: '￥200' },
  46.         { date: '2017-06-24', value: '￥200' },
  47.         { date: '2017-06-25', value: '￥200' },
  48.         { date: '2017-06-26', value: '￥200' },
  49.         { date: '2017-06-27', value: '￥222' },
  50.         { date: '2017-06-28', value: '￥341' },
  51.         { date: '2017-06-29', value: '￥230' },
  52.         { date: '2017-06-30', value: '￥2000' }
  53.       ]
  54.     }),
  55.     methods: {
  56.       wxcPageCalendarDateSelected (e) {
  57.         this.selectedDate = e.date;
  58.         this.currentDate = e.date;
  59.       },
  60.       wxcPageCalendarBackClicked () {
  61.       },
  62.       showCalendar () {
  63.         this.isRange = false;
  64.         setTimeout(() => {
  65.           this.$refs['wxcPageCalendar'].show();
  66.         }, 10);
  67.       },
  68.       showReturnCalendar () {
  69.         this.isRange = true;
  70.         setTimeout(() => {
  71.           this.$refs['wxcPageCalendar'].show();
  72.         }, 10);
  73.       }
  74.     }
  75.   };
  76. </script>

更详细代码可以参考 demo

可配置参数

Prop Type Required Default Description
date-range Array Y [] 日历范围
selected-date Array N [] 选中日期
is-range Boolean N false 是否是往返日历
selected-note Array N ['开始', '到达', '往返'] 选中提示语
desc-list Array N [{}] 附加信息
show-header Boolean N false 是否在 Native 下显示导航栏
minibar-cfg Object N {} 导航栏 配置，降级版本默认显示
animationType String N push 自定义转场动画类型目前支持model和push

事件回调

  1. // 日期选择
  2. @wxcPageCalendarDateSelected="calendarDateSelect"  
  3. // 返回按钮点击
  4. @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked"  
  5. // 隐藏日历事件
  6. @wxcPageCalendarHide="wxcPageCalendarHide"

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-page-calendar/