datepickerの初期値について

Question

前提・実現したいこと

datepickerの初期値を表示しているページによって変え、かつ
placeholderのテキストを表示したいです。
2020年5月のページ場合は2020/05/01を初期値にしたい。
2020年6月のページ場合は2020/06/01を初期値にしたい。

それぞれ初期値は表示ページでいいのですが、inputboxにはvalueではなく
placeholderを表示することは出来ないでしょうか。

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

placeholderを設定し、valueにそれぞれの年月を設定しているのですが
valueが優先されてしまいます。

該当のソースコード

2020年5月の場合
<input type="text" id="datepicker" value="2020/05/01" placeholder="日付を選択してください">

2020年6月の場合
<input type="text" id="datepicker" value="2020/06/01" placeholder="日付を選択してください">

共通の読み込みスクリプト
<script>
  $("#datepicker").datepicker();
</script>

補足情報（FW/ツールのバージョンなど）

jquery等のバージョンは下記になります。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Answer 1

value を指定せず、minDate、maxDate を指定するパターンです。~~~なぜか、1カ月引かないといけないのが玉に瑕。~~(月が0オリジンだからですね。)

  <input type="text" id="datepicker" placeholder="日付を選択してください">
  <script>
    $( "#datepicker" ).datepicker({
      minDate: new Date(2020, 6 - 1, 1),
      maxDate: new Date(2020, 6 - 1, 30)
    });
  </script>

Comments

[m.ts10806]

＞なぜか、1カ月引かないといけない
ちゃんと理由があります。
> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
> 0 を基点とした値を返します。

[Yasumichi]

やっぱり、ゼロオリジンでしたか。

[m.ts10806]

時間もミリ秒も0開始なのに日付だけ1からというのは私も「なぜか」と感じるところではあります。
歴史的経緯まで調べてたらキリがないですけどね。

[Yasumichi]

元々、西欧に 0 って概念がなく、インド→アラビア→西欧に輸入とか、関係あるんですかね。 < 大脱線

[m.ts10806]

アラビア数字が世界的になった理由、ですかね。
記事読むのは面白そうです（数学となるとあまり強くはない）

[masamasa1104]

ご回答ありがとうございました。
デフォルトオプションに対しカスタマイズも頂いて大変参考になりました！

Answer 2

こういうときはドキュメントをあさってみましょう。

ざっと見た感じ、defaultDateオプション有効なのでは。

  $("#datepicker").datepicker({
	  defaultDate  :"2020/05/01"
  });

※これで求める結果になるかどうかは分かりませんが、カレンダーあげたときに一応、カレントにはなってます。

オプションは他にもたくさんあるようですし、「Methods」なども組み合わせればもっと色々な表現をすることができます。

Comments

[masamasa1104]

ご回答ありがとうございました、デフォルトオプションであったのですね！
思っていたものが出来ました、大変助かりました。

[m.ts10806]

こういうときはドキュメントをあさってみましょう。