Full screen calendar component, support one-way, round-trip calendar selection, can display holidays and setting additional information.
<template> <div class="wrapper"> <div class="btn" @click="showCalendar"> <text class="btn-txt">one-way</text> </div> <div class="btn btn-margin yellow" @click="showReturnCalendar"> <text class="btn-txt">round-trip</text> </div> <div class="panel"> <text v-if="currentDate" class="text">current date: {{currentDate}}</text> </div> <wxc-page-calendar :date-range="dateRange" :animationType="animationType" :selected-date="selectedDate" :selected-note="selectedNote" :is-range="isRange" :minibar-cfg="minibarCfg" :desc-list="descList" @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked" @wxcPageCalendarDateSelected="wxcPageCalendarDateSelected" ref="wxcPageCalendar"></wxc-page-calendar> </div> </template> <script> import { WxcPageCalendar } from 'weex-ui'; export default { components: { WxcPageCalendar }, data: () => ({ animationType: 'push', currentDate: '', selectedDate: ['2017-06-23', '2017-06-30'], isRange: true, dateRange: ['2017-06-10', '2018-06-10'], selectedNote: ['dep', 'arr', 'round'], minibarCfg: { title: 'Select Date' }, descList: [ { date: '2017-06-23', value: '¥200' }, { date: '2017-06-24', value: '¥200' }, { date: '2017-06-25', value: '¥200' }, { date: '2017-06-26', value: '¥200' }, { date: '2017-06-27', value: '¥222' }, { date: '2017-06-28', value: '¥341' }, { date: '2017-06-29', value: '¥230' }, { date: '2017-06-30', value: '¥2000' } ] }), methods: { wxcPageCalendarDateSelected (e) { this.selectedDate = e.date; this.currentDate = e.date; }, wxcPageCalendarBackClicked () { }, showCalendar () { this.isRange = false; setTimeout(() => { this.$refs['wxcPageCalendar'].show(); }, 10); }, showReturnCalendar () { this.isRange = true; setTimeout(() => { this.$refs['wxcPageCalendar'].show(); }, 10); } } }; </script>
More details can be found in here
Prop | Type | Required | Default | Description |
---|---|---|---|---|
date-range | Array | Y | [] | date range |
selected-date | Array | N | [] | default date select value |
is-range | Boolean | N | false | whether is range trip |
selected-note | Array | N | ['开始', '到达', '往返'] | selected note |
desc-list | Array | N | [{}] | desc info |
show-header | Boolean | N | false | whether show minibar in native |
minibar-cfg | Object | N | {} | minibar config |
animation-type | String | N | push | Support model or push type |
selected-cell-style | Object | N | {} | Cover the selected cell style |
selected-text-style | Object | N | {} | Cover the selected text style |
// @wxcPageCalendarDateSelected="calendarDateSelect" // @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked" // @wxcPageCalendarHide="wxcPageCalendarHide"