Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

[WordPress] MW WP Form カレンダー datepickerを付ける

MW WP Form

WordPresで使えるメールフォームの有名なプラグイン MW WP Form をより便利に!日付選択機能(datepicker)のカスタマイズ2種類ご紹介します。

2022/01/08: 急にこの記事のアクセス数増えているなぁーと思ったら、datepicker 動かないですね。
WordPressのバージョン問題かと思いましたが、あくまで予想ですがクラッシックエディターを使用しているテーマでは今でも動きます。なので、ディタの何かが影響している???
このサイトはSwellを使っています。実験した所、動かず。いろいろやってみましたがお手上げです。回避策をご存じの方、ご一報頂ければ幸いです。

長年お世話になったMW WP Formはこの1年更新がありません。もうこのままなのかも・・・ブロックエディタ用のSnow Monkeyにシフトしてゆく模様です。

SwellでContact Form 7を試してみました。Form作成画面自体はクラシックな感じです。 datepickerの実装方法も書きました。良かったらご覧ください。

INDEX

datepickerとは

datepickerとは、カレンダーから日付を選択すると。自動で入力される機能です。カレンダーから選択しなくても直接入力する事も出来ます。

例えば、フォームで予約を受けたい時には不可欠ですね。

カレンダー

設置方法

MW WP Formの作成画面で「日付ピッカー」を選択します。

カレンダー

選択できる開始日を設定する

何も設定しない場合は、開いたカレンダーは当日から選択が可能になります。予約などは、今日の今日って無理な場合もありますよね。そこで、選択できる日にちを「今日から〇日後」と設定する事が出来ます。

※ 以下のサンプルコードは本来は[カギカッコ] で囲む必要があります。

mwform_datepicker name="日付" js='"minDate": 3' size="30" value="yyyy/mm/dd"

“minDate”: 何日後’という風です。

カレンダーの日付のフォーマットを変更する

余談です。日本語の場合は無関係そうですが、英語サイトで使用するとカレンダーはこんな感じになります。

カレンダー

選択すると、yyyy/mm/dd ではなく、mm/dd/yyyyになりました。yyyy/mm/ddにしたかったので、”dateFormat”: yy/mm/dd を加え順序を変えました。

mwform_datepicker name="date" js='"dateFormat": yy/mm/dd' value="yyyy/mm/dd

予約フォーム

MW WP Form,ではありませんが、時間の指定が必要な場合やダブルブッキング防止も出来る予約フォームもあります。

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

CAPTCHA

INDEX
閉じる