javascript [MW WP Form Element UI Datepicker] #PHP #WordPress

Posted 2021-05-03

import Vue from 'vue'
import { DatePicker } from 'element-ui'
import langJa from 'element-ui/lib/locale/lang/ja'
import langEn from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
import 'element-ui/lib/theme-chalk/index.css'
import moment from 'moment'

const pageLang = document.querySelector('html').getAttribute('lang')
const isJa = pageLang === 'ja'
const weekJa = ['日', '月', '火', '水', '木', '金', '土']
let holidays = []

locale.use(isJa ? langJa : langEn)
Vue.use(DatePicker)

export default function(el) {
  return new Vue({
    el: el,
    data() {
      return {
        pickerOptions: {},
        date: ''
      }
    },
    mounted() {
      // 初期値を設定
      this.date = $editor.getAttribute('data-date')

      if (this.date) {
        this.date = this.date.replace(/（.*）/g, '')
        this.$nextTick(() => {
          this.updateCurrentValue()
        })
      }
    },
    methods: {
      /**
       * input change event
       */
      change() {
        this.$nextTick(() => {
          this.updateCurrentValue()
        })
      },

      /**
       * update value
       */
      updateCurrentValue() {
        // 曜日を追加
        const date = moment(this.date)
        const week = isJa ? weekJa[date.format('E')] : date.format('ddd')
        this.$children[0].$children[0].currentValue = `${this.date}（${week}）`
      }
    }
  })
}

<?php
  /**
   * @filepath: wp-content/themes/{mytheme}/mw-wp-form/form-fields
   */

  if ( strpos($class, 'is-option') !== false ) {
    $options = "pickerOptions";
  }
?>
<div class="vue-datepicker">
  <el-date-picker
    v-model="date"
    value-format="yyyy-MM-dd"
    :picker-options="<?php echo $options ?>"
    data-holidays='<?php echo json_encode($get_holidays) ?>'
    data-date='<?php echo $value ?>'
    name="<?php echo esc_attr( $name ); ?>"
    type="date"
    @change="change"
    <?php echo MWF_Functions::generate_input_attribute( 'id', $id ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'class', $class ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'size', $size ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'value', $value ); ?>
    <?php echo MWF_Functions::generate_input_attribute( 'placeholder', $placeholder ); ?>
  ></el-date-picker>
</div>

import Datepicker from './components/Datepicker'

// DOM Ready
$(() => {
  $('.vue-datepicker').each((i, v) => {
    Datepicker(v)
  })
})