[JS]jQuery Datepickerの日付フォーマットをyy/mm/ddに変更する方法

jQueryプラグイン・ライブラリ

2018.08.032024.09.01

以前紹介させていただいたjQuery Datepickerですが、カレンダーの日付をクリックして表示される日付のフォーマットをyy/mm/ddに変更する方法のご紹介です。

[JS]jQueryとjQueryUIを利用したDatepickerの実装方法のまとめ

日付を入力するフォームを用意する際、手打ちで年月日を入れると面倒なので、jQueryのDatepickerを利用して、カレンダーから日付を選んで自動入力できるようにする方法です。 jQuery Datepicker Datepickerにつ...

Datepickerの日付フォーマットをyy/mm/ddに変更

前回の記事同様、フォーム部分のHTMLは以下のようなdatepickerのクラス名がついた<input type=text>にします。

<form>
<input type="text" size="15" class="datepicker">
</form>

<form>

</form>

デフォルトの日付のフォーマットはmm/dd/yyなので、これをyy/mm/ddに変更したい場合は、ページの<head>内か</body>の上あたりに以下のような記述を行います。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( ".datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date"
    });
  	$(".datepicker").datepicker("option", "dateFormat", 'yy/mm/dd' );
  } );
</script>
<p><input type="text" id="datepicker"></p>