微信小程序-日曆

小程序日曆

日曆

源碼見https://github.com/treadpit/wx_calendar

<p class="tip">日曆模板面板支持手勢左右滑動</p>

提供 template 模板引入

1. 引入wxml及wxss

// example.wxml
<import src="../../template/calendar/index.wxml"/>
<view class="calendar-wrap">
   <template is="calendar" data="{{...calendar}}" />
</view>

/* example.wxss */
@import '../../template/calendar/index.wxss';

2. 日曆組件初始化

import initCalendar from '../../template/calendar/index';
const conf = {
  onShow: function() {
    initCalendar(); // 使用默認配置初始化日曆
  }
};
Page(conf);

3. 日曆組件配置

initCalendar() 可傳入自定義配置

import initCalendar from '../../template/calendar/index';

const conf = { 
  multi: true, // 是否開啓多選,
  disablePastDay: true, // 是否禁選過去的日期
  /**
   * 初始化日曆時指定默認選中日期，如：'2018-3-6' 或 '2018-03-06'
   * 注意：若想初始化時不默認選中當天，則將該值配置爲除 undefined 之外的其餘非值便可，如：空字符串, 0 ,false等。
  */
  defaultDay: '2018-3-6',
  /**
   * 選擇日期後執行的事件
   * @param { object } currentSelect 當前點擊的日期
   * @param { array } allSelectedDays 選擇的全部日期（當mulit爲true時，纔有allSelectedDays參數）
   */
  afterTapDay: (currentSelect, allSelectedDays) => {},
  /**
   * 日期點擊事件（此事件會徹底接管點擊事件）
   * @param { object } currentSelect 當前點擊的日期
   * @param { object } event 日期點擊事件對象
   */
  onTapDay(currentSelect, event) {},
  /**
   * 日曆初次渲染完成後觸發事件，如設置事件標記
   */
  afterCalendarRender() {},
}

initCalendar(conf);

4. 跳轉至指定日期

import { jump } from '../../template/calendar/index';

// 不傳入參數則默認跳轉至今天
jump();
// 入參必須爲數字
jump(2018, 6); // 跳轉至2018-6
jump(2018, 6, 6); // 跳轉至2018-6-6

5. 待辦事項

5.1 設置待辦標記

import { setTodoLabels } from '../../template/calendar/index';

setTodoLabels({
  pos: 'bottom',
  dotColor: '#40',
  days: [{
    year: 2018,
    month: 5,
    day: 12,
  }, {
    year: 2018,
    month: 5,
    day: 15,
  }],
 });

5.2 刪除代辦標記

import { deleteTodoLabels } from '../../template/calendar/index';

deleteTodoLabels([{
  year: 2018,
  month: 5,
  day: 12,
}, {
  year: 2018,
  month: 5,
  day: 15,
}]);

5.3 清空代辦標記

import { clearTodoLabels } from '../../template/calendar/index';

clearTodoLabels();

6. 禁選指定日期

import { disableDay } from '../../template/calendar/index';

disableDay([{
  year: 2018,
  month: 7,
  day: 31,
}]);

7. 指定可選日期範圍

import { enableDay } from '../../template/calendar/index';

enableArea(['2018-8-12', '2018-08-30']);

8. 周月視圖切換

switchView('week')，默認值爲'month'；

import { switchView } from '../../template/calendar/index';
// 切換爲周視圖
switchView('week');

// 切換爲月視圖
switchView();
// 或者
switchView('month');

日期選擇器

日期選擇 input 組件支持直接輸入指定日期

日曆模板面板支持手勢左右滑動

<p class="tip">此 template 帶有 input 輸入框，不影響模板的使用，可配置隱藏</p>

1. 引入wxml及wxss

// example.wxml
<import src="../../template/datepicker/index.wxml"/>

<view class="datepicker-box">
    <template is="datepicker" data="{{...datepicker}}" />
</view>

/* example.wxss */
@import '../../template/datepicker/index.wxss';

2. 日期選擇器初始化

import initDatepicker from '../../template/datepicker/index';
const conf = {
  onShow: function() {
    initDatepicker(); // 使用默認配置初始化日曆選擇器
  },
};
Page(conf);

3. 日期選擇器配置

import initDatepicker from '../../template/datepicker/index';

const conf = {
  disablePastDay: true, // 是否禁選過去日期
  showInput: false, // 默認爲 true
  placeholder: '請選擇日期', // input 輸入框
  type: 'normal', // [normal 普通單選模式(默認), timearea 時間區域選擇模式(待開發), multiSelect 多選模式(待完善)]

  /**
   * 選擇日期後執行的事件
   * @param { object } currentSelect 當前點擊的日期
   */
  afterTapDay: (currentSelect) => {},

  /**
   * 日期點擊事件（此事件會徹底接管點擊事件）
   * @param { object } currentSelect 當前點擊的日期
   * @param {object} event 日期點擊事件對象
   */
  onTapDay(currentSelect, event) {},
}

initDatepicker(conf);

4. 跳轉至今天

import { getSelectedDay, jumpToToday } from '../../template/datepicker/index';

jumpToToday();