Календарь小程序

<!-- пример. wxml -->
<import src="./template/calendar/index.wxml"/>
<view class="calendar-wrap">
    <template is="calendar" data="{{calendar}}"/>
</view>

/* пример. wxss */
@import './template/calendar/index.wxss';

import initCalendar, { getSelectedDay, jumpToToday, setTodoLabels, deleteTodoLabels, clearTodoLabels } from './template/calendar/index';

const conf = {
  onShow: function () {
    initCalendar({
      // multi: true, // Включить множественный выбор
      // disablePastDay: true, // Отключить выбор прошедших дат
      /**
       * Обработчик события после нажатия на день
       * @param {object} currentSelect - Выбранный день
       * @param {array} allSelectedDays - Все выбранные дни (только если multi=true)
       */
      afterTapDay: (currentSelect, allSelectedDays) => {
        console.log('================================');
        console.log('Выбранный день:', currentSelect);
        console.log('Есть ли отметка на выбранном дне?:', currentSelect.hasTodo || false);
        if (allSelectedDays) console.log('Все выбранные дни:', allSelectedDays);
        console.log('Метод getSelectedDay:', getSelectedDay());
      },
      /**
       * Обработчик события при клике на день (полностью заменяет событие клика)
       * @param {object} currentSelect - Выбранный день
       * @param {object} event - Объект события клика
       */
      // onTapDay(currentSelect, event) {
      //   console.log(currentSelect);
      //   console.log(event);
      // },
      /**
       * Обработчик события после первой отрисовки календаря
       */
      afterCalendarRender() {
        setTodoLabels({
          pos: 'bottom',
          dotColor: '#FF0000',
          days: [
            {
              year: 2018,
              month: 5,
              day: 12,
            },
            {
              year: 2018,
              month: 5,
              day: 15,
            }
          ],
        });
      },
    });
  },
};
``````md
// clearTodoLabels();
},
/**
* Переход к сегодняшнему дню
*/
jump() {
jumpToToday();
},
};
Page(conf);

// 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. Инициализация компонента выбора даты
```js
import initDatepicker, { getSelectedDay, jumpToToday } from '../../template/datepicker/index';
const conf = {
  onShow: function() {
    initDatepicker({
      // disablePastDay: true, // Отключает возможность выбора прошедших дат
      // showInput: false, // По умолчанию true
      // placeholder: 'Выберите дату', // Подсказка поля ввода
      // type: 'normal', // [normal - обычный режим выбора одной даты (по умолчанию), timearea - режим выбора временного интервала (в разработке), multiSelect - режим множественного выбора (в разработке)]
      /**
       * Выполняется после выбора даты
       * @param { object } currentSelect Выбранная дата
       */
      afterTapDay: (currentSelect) => {
        console.log('Выбранная дата', currentSelect);
        console.log('Метод получения выбранной даты', getSelectedDay());
      },
      /**
       * Обрабатывает событие нажатия на дату
       * @param { object } currentSelect Выбранная дата
       * @param {object} event Событие нажатия на дату
       */
      onTapDay(currentSelect, event) {
        console.log(currentSelect);
        console.log(event);
      },
    });
  },
  /**
   * Переход к сегодняшнему дню
   */
  jump() {
    jumpToToday();
  }
};
Page(conf);