Snow Monkey Formsでpicadateを使い日付ピッカーを実装したい

♥ 0

いいねをした人: 居ません

このトピックには5件の返信、3人の参加者があり、最後にtegecatにより2年、 8ヶ月前に更新されました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

投稿者

投稿
2022年3月3日 2:12 PM #100275

tegecat
参加者

♥ 4

Snow Monkey Formsでpicadateを使い日付ピッカーを実装したい

【お使いの Snow Monkey のバージョン】5.9.1
【お使いの Snow Monkey Blocks のバージョン】14.1.1
【お使いの Snow Monkey Editor のバージョン】7.0.1
【お使いの Snow Monkey Forms のバージョン】3.1.1
【お使いのブラウザ】chrome
【当該サイトのURL】http://sanzokuya.com/wp/survey/

### 実現したいこと
お世話になります。
Snow Monkey Formsで来店日をpickadateを使い日付ピッカーを実装したいと思っています。
このフォーラムで調べて必要なファイルをmy-snow-monkeyに配置しやってみましたが、
以下のようなエラーが出ました。

### 発生している問題

コンソールエラー（501
Not Implementedとなるためとりあえず画像にて）

### 試したこと

my-snow-monkey.phpに以下を書きました。

main.jsは

日付フォームには
id:datepicker
class:fieldset__input js__datepicker
を指定しました。

ファイル構成は

以上になっています。
おそらくwp enqueue scriptの書き方が間違っていると思うのですが、
wp enqueue scriptの関数リファレンスを読んでも良くわかりませんでした。
ここで聞くのは間違っているのかもしれませんがどうぞよろしくお願いします。

♥ 0

いいねをした人: 居ません

2022年3月3日 2:21 PM #100278
キタジマタカシ
参加者

♥ 2421
wp_enqueue_style()、wp_enqueue_script() の書き方が間違っているようです。どちらにも URL を列挙していますが、関数は引数の順番が決まっているのでそのように必要な文だけ列挙することはできません。
```
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
```
ファイルの URL（↑でいえば $src）は2番目の引数であり、3番目の引数は依存関係を指定するものになるので、3番目にしてするのが ['jquery'] にならないとダメです。

複数のファイルを読み込ませたい場合は wp_enqueue_style()、wp_enqueue_script() 自体を複数個書くことになります。

♥ 0

いいねをした人: 居ません
2022年3月3日 2:50 PM #100280
tegecat
参加者

♥ 4
早々のご回答ありがとうございます。

my-snow-monkey.phpのwp_enqueue_style()とwp_enqueue_script()を以下のように書き換えてみました。
```
// css 読み込み
add_action( 'wp_enqueue_scripts', 'msm_enqueue_style_script' );
function msm_enqueue_style_script() {
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/main.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/main.css' )
);
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/default.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.css' )
);
wp_enqueue_style(
'msm_style',
MY_SNOW_MONKEY_URL . '/assets/css/default.date.css',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/css/default.date.css' )
);

// js読み込み
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.js',
['jquery'],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/picker.date.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/picker.date.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/legacy.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/legacy.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/pickadate/lang-ja.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/lang-ja.js' ),
true
);
wp_enqueue_script(
'msm_scripts',
MY_SNOW_MONKEY_URL . '/assets/js/main.js',
[],
filemtime( MY_SNOW_MONKEY_PATH . '/assets/js/main.js' ),
true
);
}
```
するとコンソールエラーは無くなったのですが、やはり日付ピッカーは動作しませんでした。

しかしwp_enqueue_style()、wp_enqueue_script()の書き方がわかったので大進歩です。ありがとうございます。もう少し検証してみたいと思います。

♥ 0

いいねをした人: 居ません
2022年3月3日 3:32 PM #100285

キタジマタカシ
参加者

♥ 2421

wp_enqueue_style() も wp_enqueue_script () も第一引数はそのスタイル（やスクリプト）の名前になります（名前は自分で決めて大丈夫です）。名前はそれぞれのファイルに対して別々のものを指定しなければなりません。そうしないとどのファイルがどれか識別できないからです。['jquery'] というふうに依存関係を指定している部分がありますが、これも jquery という名前でスクリプトが登録されているからです。

上記のコードだとすべてのスタイル・スクリプトが msm_style・msm_scripts になっているので、これだと全部のスタイルやスクリプトが読み込まれていないのではないですかね？

僕は picadate というライブラリを使ったことがないので使い方を知りませんが、↑の名前に関する記述を修正してすべてのスタイル・スクリプトが読み込まれたことを確認したあとも動作しないのでれば picadate を動かすためのコードに問題があるのかもしれません。

♥ 0

いいねをした人: 居ません

2022年3月3日 6:58 PM #100294
GONSY
参加者

♥ 841
pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

amsul.ca

Contact Form 7には実装したことがありますが、いずれSnow Monkey Formsでも使うかもしれないので、試してみました。
```
my-snow-monkey
├ my-snow-monkey.php
└ scripts
  　└ pickadate.js
```
こんな構成です。

必要なCSSとJSを読み込ませるためにwp_enqueue_scriptsを使いました。
※フォームを設置する特定のページにしか使わない場合、if( is_page() )などを用いて読み込みの制御をしてください。
※とくに意味はありませんがCDNです。

my-snow-monkey.phpの中身
記述方法に誤りや要改善点があればご指摘ください。
```
/**
 * pickadate.js使ってSnow Monkey Formsにカレンダーから日付入力をする
 */
add_action(
	'wp_enqueue_scripts',
	function() {

		wp_enqueue_style(
			'pickadate-default', // ハンドル名
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.css',
			[ Framework\Helper::get_main_style_handle() ],
			false
		);

		wp_enqueue_style(
			'pickadate-default_date',
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/themes/default.date.css',
			[ Framework\Helper::get_main_style_handle() ],
			false
		);

		wp_enqueue_script(
			'pickadate',
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.js',
			['jquery'],
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-date',
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/picker.date.js',
			['jquery','pickadate'],
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-legacy',
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/legacy.js',
			['jquery','pickadate'],
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-translate',
			'https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.4/translations/ja_JP.js',
			['jquery','pickadate'],
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-orign',
			MY_SNOW_MONKEY_URL . '/scripts/pickadate.js', // 環境に応じて
			['jquery','pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/scripts/pickadate.js' ), // 環境に応じて
			true
		);

	}
);
```
pickadate.jsの中身
```
jQuery(function($){
    $('#date_box').pickadate({ // 対象のID
        firstDay: 0,
        format: 'yyyy年m月d日（ddd）', // 適宜調整してください
        min: 0,
        max: 100
    });
});
```
Snow Monkey Formsでつくったフォームの【フォーム設定】で、日付を入れたい【Text】のidにdate_boxを入れて保存。
固定ページにフォームを設置してできたのが以下です。

フォーム – Demo Site for SM

demo.gonsy.net

@tegecat さん
たぶんそこまでできていたら、あと少しだと思います。
一応デモは動いてますが、提示したコードは正しくないと思って、参考程度にしてみてください。

♥ 2

いいねをした人:
2022年3月4日 2:39 PM #100353
tegecat
参加者

♥ 4
キタジマ様、GONSY様

アドバイスありがとうございました。

お陰様でwp enqueue scriptの理解が進みました。

GONCY様のコードを参考にやってみると前月以降に戻れなかったので最終的にこうなりました。

構成
```
my-snow-monkey
├ my-snow-monkey.php
└ assets
└ pickadate
└css
└default.css
└default.date.css
└js
└lang-ja.js
└legacy.js
└pickadate.js
└picker.date.js
└picker.js
```
my-snow-monkey.phpの中身
```
// css読み込み
add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_style(
			'pickadate-default',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.css' ),
			false
		);

		wp_enqueue_style(
			'pickadate-default_date',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/css/default.date.css',
			[ Framework\Helper::get_main_style_handle() ],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/css/default.date.css' ),
			false
		);

		// js読み込み
		wp_enqueue_script(
			'pickadate',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.js',
			['jquery'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-date',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/picker.date.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/picker.date.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-legacy',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/legacy.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/legacy.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-translate',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/lang-ja.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/lang-ja.js' ),
			false,
			true
		);

		wp_enqueue_script(
			'pickadate-origin',
			MY_SNOW_MONKEY_URL . '/assets/pickadate/js/pickadate.js',
			['jquery', 'pickadate'],
			filemtime( MY_SNOW_MONKEY_PATH . '/assets/pickadate/js/pickadate.js' ),
			true
		);
	}
);
```
pickadate.jsの中身
```
jQuery(function ($) {
  $("#date_box").pickadate();
});
```
これで無事動きました。

お二人に感謝します。

これでトピックを閉じます。

♥ 2

いいねをした人:
投稿者

投稿