MW WP Form v4 で Vue.js 2.x の UI コンポーネント Element を利用する : Serendip

MW WP Form v4 で Vue.js 2.x の UI コンポーネント Element を利用する

2018年04月02日

WordPress のフォームプラグイン MW WP Form の v4 でフィールドを書き換えることができるようになっていたので、Vue.js 2.x の UI コンポーネントの Element を使って datepicker をカスタマイズしてみる。

プラグインディレクトリからフィールド定義ファイルをテーマにコピーして書き換える。
wp/wp-content/plugins/mw-wp-form/templates/form-fields/datepicker.php ファイルを wp/wp-content/themes/YOUR_THEME/mw-wp-form/form-fields/datepicker.php へコピーし、Vue.js のテンプレートを記述する。

<div id="my-datepicker">
    <el-date-picker
        v-model="date"
        name="<?php echo esc_attr( $name ); ?>"
        <?php echo MWF_Functions::generate_input_attribute( 'placeholder', $placeholder ); ?>
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        ></el-date-picker>
</div>

JavaScript で Vue.js と Element を使って DOM を描画する。

import 'element-ui/lib/theme-chalk/index.css';

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/ja';

const A_DAY = 24 * 60 * 60 * 1000;

Vue.use(ElementUI, { locale });

new Vue({
  el: '#my-datepicker',
  data() {
    return {
      pickerOptions: {
        disabledDate(d) {
          const now = new Date();
          return d.getTime() - now.getTime() < A_DAY * 7;
        }
      },
      date: ''
    };
  }
});

MW WP Form の管理画面で、フォームを定義する。

<label for="date">日付</label>
[mwform_datepicker name="日付" id="date" placeholder="日付を選択してください"]

参考サイト