How to use pikaday - 10 common examples

const dateIn = din ? new Date(din) : null;
    const dateOut = dout ? new Date(dout) : null;
    const minDate = new Date(`${year}-01-02`);
    const maxDate = new Date(`${year + 1}-01-01`);

    this.pikaDayDateIn = new Pikaday({
      field: this.dateInRef,
      format: SCHEUDLE_ENTRY_DATE_FORMAT,
      minDate,
      maxDate: dateOut || maxDate,
      defaultDate: minDate, // the initial date to view when first opened
      onSelect: this.handleDateChange('dateIn'),
    });
    if (dateIn) this.pikaDayDateIn.setDate(dateIn);

    this.pikaDayDateOut = new Pikaday({
      field: this.dateOutRef,
      format: SCHEUDLE_ENTRY_DATE_FORMAT,
      minDate: dateIn || minDate,
      maxDate,
      defaultDate: minDate,
      onSelect: this.handleDateChange('dateOut'),
    });
    if (dateOut) this.pikaDayDateOut.setDate(dateOut);
  }

componentDidMount() {
    const { action } = this.props
    const {
      noGrazeEndDay: ngEndDay,
      noGrazeEndMonth: ngEndMonth,
      noGrazeStartDay: ngStartDay,
      noGrazeStartMonth: ngStartMonth
    } = action

    const noGrazeStartDate = createDateWithMoment(ngStartDay, ngStartMonth)
    const noGrazeEndDate = createDateWithMoment(ngEndDay, ngEndMonth)
    const minDate = createDateWithMoment(1, 1)
    const maxDate = createDateWithMoment(31, 12)

    this.pikaDayDateIn = new Pikaday({
      field: this.startDateRef,
      format: DATE_FORMAT.CLIENT_SIDE_WITHOUT_YEAR,
      minDate,
      maxDate: noGrazeEndDate || maxDate,
      defaultDate: noGrazeStartDate || minDate, // the initial date to view when first opened
      setDefaultDate: noGrazeStartDate !== null,
      onSelect: this.handleDateChange('noGrazeStartDate')
    })

    this.pikaDayDateOut = new Pikaday({
      field: this.endDateRef,
      format: DATE_FORMAT.CLIENT_SIDE_WITHOUT_YEAR,
      minDate: noGrazeStartDate || minDate,
      maxDate,
      defaultDate: noGrazeEndDate || minDate,
      setDefaultDate: noGrazeEndDate !== null,

$('.datepicker').each(function initPikadayMilestone() {
      const $datePicker = $(this);
      const datePickerVal = $datePicker.val();

      const calendar = new Pikaday({
        field: $datePicker.get(0),
        theme: 'gitlab-theme animate-picker',
        format: 'yyyy-mm-dd',
        container: $datePicker.parent().get(0),
        parse: dateString => parsePikadayDate(dateString),
        toString: date => pikadayToString(date),
        onSelect(dateText) {
          $datePicker.val(calendar.toString(dateText));
        },
        firstDay: gon.first_day_of_week,
      });

      calendar.setDate(parsePikadayDate(datePickerVal));

      $datePicker.data('pikaday', calendar);
    });

pickDate: function (options, confirmCallback) {
    const mask = document.createElement('div')
    mask.className = 'weex-picker-mask'
    const self = this
    const i18n = {
        previousMonth: 'Previous Month',
        nextMonth: 'Next Month',
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
    
    //options see https://github.com/dbushell/Pikaday#configuration.
    const picker = new Pikaday({
      field: options.field,
      trigger: options.trigger,
      bound: options.bound,
      ariaLabel: options.ariaLabel,
      position: options.position,
      reposition: options.reposition,
      container: options.container,
      formatStrict: options.formatStrict,
      toString: options.toString,
      parse: options.parse,
      firstDay: options.firstDay || null,
      disableWeekends: options.disableWeekends || false,
      disableDayFn: options.disableDayFn,
      yearRange: options.yearRange || [1900, 2050],
      showWeekNumber: options.showWeekNumber || false,
      pickWholeWeek: options.pickWholeWeek || false,

createElements() {
    super.createElements();

    this.datePicker = this.hot.rootDocument.createElement('DIV');
    this.datePickerStyle = this.datePicker.style;
    this.datePickerStyle.position = 'absolute';
    this.datePickerStyle.top = 0;
    this.datePickerStyle.left = 0;
    this.datePickerStyle.zIndex = 9999;

    addClass(this.datePicker, 'htDatepickerHolder');
    this.hot.rootDocument.body.appendChild(this.datePicker);

    this.$datePicker = new Pikaday(this.getDatePickerConfig());
    const eventManager = new EventManager(this);

    /**
     * Prevent recognizing clicking on datepicker as clicking outside of table
     */
    eventManager.addEventListener(this.datePicker, 'mousedown', event => stopPropagation(event));
    this.hideDatepicker();
  }

render(): void {
    if (this._picker != null)
      this._picker.destroy()

    super.render()

    this.input_el = input({type: "text", class: bk_input, disabled: this.model.disabled})
    this.group_el.appendChild(this.input_el)

    this._picker = new Pikaday({
      field: this.input_el,
      defaultDate: this._unlocal_date(new Date(this.model.value)),
      setDefaultDate: true,
      minDate: this.model.min_date != null ? this._unlocal_date(new Date(this.model.min_date)) : undefined,
      maxDate: this.model.max_date != null ? this._unlocal_date(new Date(this.model.max_date)) : undefined,
      onSelect: (date) => this._on_select(date),
    })

    this._root_element.appendChild(this._picker.el)
  }

const planStart = planStartDate ? new Date(planStartDate) : null
    const planEnd = planEndDate ? new Date(planEndDate) : null
    const minDate = agreementStartDate ? new Date(agreementStartDate) : null
    const maxDate = agreementEndDate ? new Date(agreementEndDate) : null

    this.pikaDayPlanStart = new Pikaday({
      field: this.planStartRef,
      format: DATE_FORMAT.CLIENT_SIDE,
      minDate,
      maxDate: planEnd || maxDate,
      defaultDate: planStart || minDate,
      setDefaultDate: planStart !== null,
      onSelect: this.handleDateChange('planStart')
    })

    this.pikaDayPlanEnd = new Pikaday({
      field: this.planEndRef,
      format: DATE_FORMAT.CLIENT_SIDE,
      minDate: planStart || minDate,
      maxDate,
      defaultDate: planEnd || maxDate,
      setDefaultDate: planEnd !== null,
      onSelect: this.handleDateChange('planEnd')
    })
  }

initDatePicker() {
    const $dueDateInput = $(`input[name='${this.fieldName}']`);
    const calendar = new Pikaday({
      field: $dueDateInput.get(0),
      theme: 'gitlab-theme',
      format: 'yyyy-mm-dd',
      parse: (dateString) => parsePikadayDate(dateString),
      toString: (date) => pikadayToString(date),
      onSelect: (dateText) => {
        $dueDateInput.val(calendar.toString(dateText));

        if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
          boardsStore.detail.issue.dueDate = $dueDateInput.val();
          this.updateIssueBoardIssue();
        } else {
          this.saveDueDate(true);
        }
      },
      firstDay: gon.first_day_of_week,

init (id, dispatch) {
        this.id = id
        this.dispatch = dispatch
        this.picker = new Pikaday({
          field: this.$refs[this.id],
          format: "YYYY-MM-DD",
          onSelect: this.onSelect.bind(this)
        })
      },
      onSelect (date) {

buildCal() {
                if (this.picker) this.picker.destroy()
                this.showClear = false
                this.stage = 'start'
                this.picker = new Pikaday({
                    container: this.$refs.calendar,
                    field: this.$refs.field,
                    firstDay: 1,
                    bound: false,
                    defaultDate: moment(this.localStart).toDate(),
                    setDefaultDate: !this.isRange,
                    format: 'ddd Do MMMM YYYY',
                    events: this.events,
                    onSelect: (() => {
                        let init = true
                        let start = ''
                        let end = ''
                        return (date) => {
                            if (!this.isRange) {
                                this.setSingleDate(date)
                                return