【JQuery UI Datepicker】日付の受け渡し形式の変更方法

Question

前提・実現したいこと

JQuery UI Datepickerを利用して、formを作成しました。

[jQuery UI] Datepicker の使い方とオプション

発生している問題・エラーメッセージ

形はできたのですが、値の受け渡し方法について、
日付の表記は　yy年mm月dd日　で受け渡しは yy/mm/ddで行いたいです。（受け渡し先でyy/mm/ddと決まっているため）
現状はyy年mm月dd日で表記も受け渡しもされていて、どの様に変更をすれば良いか困っています。

該当のソースコード

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO ([e-mail]). */
(function (factory) {
	if (typeof define === "function" && define.amd) {

		// AMD. Register as an anonymous module.
		define(["../widgets/datepicker"], factory);
	} else {

		// Browser globals
		factory(jQuery.datepicker);
	}
}(function (datepicker) {

	datepicker.regional.ja = {
		closeText: "閉じる",
		prevText: "<前",
		nextText: "次>",
		currentText: "今日",
		monthNames: ["1月", "2月", "3月", "4月", "5月", "6月",
			"7月", "8月", "9月", "10月", "11月", "12月"],
		monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月",
			"7月", "8月", "9月", "10月", "11月", "12月"],
		dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
		dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
		dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
		weekHeader: "週",
		dateFormat: "yy年mm月dd日",//ここをyy/mm/ddに変えると表記も受け渡しもyy/mm/ddになる
		firstDay: 0,
		isRTL: false,
		showMonthAfterYear: true,
		yearSuffix: "年",
		// showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
	};
	datepicker.setDefaults(datepicker.regional.ja);

	return datepicker.regional.ja;

}));

<form method="GET" action="受け渡し先" accept-charset="UTF-8" name="" target="_blank">
            <dl class="">
              <dt><label>日付</label></dt>
              <dd>
                <input type="text" name="date" id="datepicker" readonly="readonly">
                <label>
                  <input name="unspecifiedDate" type="checkbox" value="1">日付未定
                </label>
              </dd>
            </dl>
            <div class="">
              <dl class="">
                <dt><label>泊</label></dt>
                <dd> <select name="" class="">
                    <option value="1" selected="selected">1泊</option>
                    <option value="2">2泊</option>
                    <option value="3">3泊</option>
                    <option value="4">4泊</option>
                    <option value="5">5泊</option>
                    <option value="6">6泊</option>
                    <option value="7">7泊</option>
                  </select> </dd>
              </dl> <input name="" type="hidden" value="1">
            </div>
            <button type="submit" name="" class="search_button">検索する</button>
          </form>

有識者のかたがいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願い致します。

Answer 1

altField / altFormat オプションがあるので、name 属性は送信用の input に移して

<input type="hidden" name="date" />

オプションを指定すればいいです。

        dateFormat: 'yy年mm月dd日',
        altFormat: 'yy-mm-dd',
        altField: '[name="date"]'

https://api.jqueryui.com/datepicker/#option-altFormat

Comments

[kii.32]

ありがとうございます。ご教授いただいた方法で解決しました！

Answer 2

こんにちは

受け渡し用のメソッドをJQueryプラグインとして追加するという手はいかがでしょうか？
仕様としては、たとえばプラグインを .date() として、以下のような動作をするものです。

取得

// #datepickerの値が"2020年04月04日"のとき、"2020/04/04" という文字列が返される
$('#datepicker').date();  

設定

// #datepickerに"2020年04月04日" が設定される。
$('#datepicker').date("2020/04/04");  

　

以下は実装の一例です。日付のフォーマット変換のために、 moment を使っています。

// プラグインメソッド date を追加
const DATE_FORMAT_1 = 'YYYY年MM月DD日';
const DATE_FORMAT_2 = 'YYYY/MM/DD';

$.fn.date = function(...args) {
  if (this.attr('id') !== 'datepicker') return;
  if (args.length === 0) {
    return moment(this.val(), DATE_FORMAT_1).format(DATE_FORMAT_2);
  } else {
    const m = moment(args[0], DATE_FORMAT_2);
    if (m.isValid()) {
      this.val(m.format(DATE_FORMAT_1));
    }
  }
}

以下は、上記の .date() を動作確認するためのサンプルです。

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/zYGQgWQ?editors=1010

上記のサンプルでは、以下を確認できます。

• <input>　をクリックしてdatepickerから日付を選ぶと、年月日の入った形式（例：2020年04月04日）の文字列が<input>のvalueとして設定されます。

• 「取得」ボタンをクリックすると、 $('#datepicker').date() によって、YYYY/MM/DD形式の文字列が返されて、「取得」ボタンの右に表示されます。

• 「設定」ボタンをクリックすると、プロンプトが表示され、ここに 2020/05/01 のような文字列を入力して、OKをクリックすると、 $('#datepicker').date('2020/05/01') によって、$('#datepicker') の値が、 2020年05月01日 に設定されます。

以上、参考になれば幸いです。

Comments

[kii.32]

詳しくご回答いただきありがとうございます。
試してみたのですが、なぜかうまくいかず。。。

下記追記してみたのですが、
表記も受け渡しもyy年mm月dd日でされてしまいます。

<script>
$(function() {
// $('#datepicker').datepicker().datepicker('setDate', 'today');
$('#datepicker').date();
});
</script>

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO ([e-mail]). */
(function (factory) {
if (typeof define === "function" && define.amd) {

// AMD. Register as an anonymous module.
define(["../widgets/datepicker"], factory);
} else {

// Browser globals
factory(jQuery.datepicker);
}
}(function (datepicker) {

datepicker.regional.ja = {
closeText: "閉じる",
prevText: "&#x3C;前",
nextText: "次&#x3E;",
currentText: "今日",
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月",
"7月", "8月", "9月", "10月", "11月", "12月"],
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月",
"7月", "8月", "9月", "10月", "11月", "12月"],
dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"],
dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
weekHeader: "週",
dateFormat: "yy年mm月dd日",
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: "年",
// showButtonPanel: true // "今日"ボタン, "閉じる"ボタンを表示する
};
$.datepicker.setDefaults($.datepicker.regional["ja"]);
$("#datepicker").datepicker();

// プラグインメソッド date を追加
const DATE_FORMAT_1 = 'YYYY年MM月DD日';
const DATE_FORMAT_2 = 'YYYY/MM/DD';

$.fn.date = function (...args) {
if (this.attr('id') !== 'datepicker') return;
if (args.length === 0) {
return moment(this.val(), DATE_FORMAT_1).format(DATE_FORMAT_2);
} else {
const m = moment(args[0], DATE_FORMAT_2);
if (m.isValid()) {
this.val(m.format(DATE_FORMAT_1));
}
}
}

datepicker.setDefaults(datepicker.regional.ja);

return datepicker.regional.ja;

}));