wxc-page-calendar使用

< wxc-page-calendar>由3部分组成：

①   最上方的导航栏，是一个<wxc-minibar>。

②   上方的周几标识区，即写着“日 一 二…六”的这一行。

③   下方的主体区域是一个<list>。

< wxc-page-calendar>用法类似<wxc-dialog>，是在当前页面配置，并按需显示的，并不需要单独的页面。

将< wxc-page-calendar>引入并配置好，通常会设置一个ref，用于引用该组件。然后在需要显示的时候，调用：

this.$refs['wxcPageCalendar'].show();

 

配置：

<wxc-page-calendar ref="wxcPageCalendar"
                   :date-range="['2017-06-10', '2019-06-10']"
                   :selected-date="['2018-06-10']"
                   :is-range="false"
                   :selected-note="['请假']"
                   :desc-list="descList"
                   :show-header="false"
                   :minibar-cfg="minibarCfg"
                   animationType="push">
</wxc-page-calendar>

对应的data数据：

minibarCfg: {
  title: '日期选择'
},
descList: [
  { date: '2018-06-23', value: '旅行' },
  { date: '2018-06-24', value: '旅行' },
  { date: '2018-06-25', value: '旅行' },
  { date: '2018-06-26', value: '旅行' },
  { date: '2018-06-27', value: '旅行' },
  { date: '2018-06-28', value: '旅行' },
  { date: '2018-06-29', value: '旅行' }
]

< wxc-page-calendar>共有8个属性：

1.    date-range：日历可用范围。必须设置，否则报错。使用数组，有两个成员变量。

2.    selected-date：选中日期。若留空，则不选中，日历会跳转到第一页。若设置一个具体日期，则日历会跳转到选中的日期页面。

3.    is-range：日历是否为往返日历。日历有两种模式：单选和往返。单选只能选择一个日期，往返则可选择一个时间段。这两种模式下，多个参数的设置都有所不同。这里都是使用单选模式。

4.    selected-note：选中日期下出现的提示语。上面日历选中的日期提示“请假”。

5.    desc-list：指定日期下的附加信息。是一个数组，可为多个日期设置附加信息。上面日历设置的附加信息是“旅行”。

6.    show-header：是否在native下显示导航栏。导航栏即日历最上方的minibar。关于导航栏的设置详见7。

7.    minibar-cfg：导航栏配置。导航栏是内嵌了一个wxc-minibar。配置通常有3个：

{

    'title': '选择日期',

    'background-color':'#FFC900',

    'text-color': '#3D3D3D'

}

8.    animationType：自定义切换动画类型。有两个取值：model/push。日历出现时，model是从下往上滑动，push是从右往左滑动。

 

实际效果：

 

< wxc-page-calendar>不支持slot。

 

< wxc-page-calendar>支持3个自定义事件：

// 日期选择

@wxcPageCalendarDateSelected="calendarDateSelect" 

// 返回按钮点击

@wxcPageCalendarBackClicked="wxcPageCalendarBackClicked" 

// 隐藏日历事件

@wxcPageCalendarHide="wxcPageCalendarHide"

其中wxcPageCalendarDateSelected事件带有参数e，e.date即选中的日期。

通常会自定义wxcPageCalendarDateSelected事件，在其中获取选中的日期，以修改其他组件显示的日期值。