Jquery 日本語でのDatepickerの年と月のみの表示

## 行うこと
Asp.Net上でのWeb画面デザインの際、
年と月のみを日本語での表示をする。

## 前提
Visual Studio2022での開発
ASP.Net
VB.Net Framework4.7.2
jquery 3.7.0
を利用。

## 手順
[1.デザインより、参照を取得](#1デザインより参照を取得)
[2.テキストボックスを配置](#2テキストボックスを配置)
[3.jQueryのdatepickerを表示させる](#3jqueryのdatepickerを表示させる)
[4.カレンダーを日本語表示へと変更](#4カレンダーを日本語表示へと変更)
[5.日付部分の表示とカレンダーを変更する](#5日付部分の表示とカレンダーを変更する)
[まとめ](#まとめ)

## 1.デザインより参照を取得
準備として、自身のソリューションにjqueryを
インストールします。

VisualStudio 対象のプロジェクトを右クリック。
Nugetパッケージの管理をクリック
この際、jQueryがインストール済みにあればよいです。
※私の環境では、インストール済みでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/1ffd7a45-a727-4f2d-b575-ca20fac3b003.png)


ない場合は、参照タブをクリック。
検索欄にjQueryと入力してください。
該当のパッケージをインストールします。

---

## 2.テキストボックスを配置
ソリューションエクスプローラーより、
日付入力したいページを開いてください。
日付の入力を行うコントロールとして、
以下のコントロールを配置します。

例 初回に作成したWebサイトへAspのTextBoxを配置しました。
```
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtDate" Width="100px" ClientIDMode="Static" runat="server"></asp:TextBox>
    </div>
</form>
```

ビルドして、デバッグすると、
テキストボックスが一つ入力されるはずです。
※ClientIDModeの設定は、JavaScriptを機能させるうえで、必要なものです。忘れずに設定してください。

---
## 3
### 3.jQueryのdatepickerを表示させる
では、デザインのhead部分に下記のプログラムを記載して、datepickerを表示させてみましょう。

3つの記載を行います。
jQuery本体
jQueryUIのスクリプト
jQuery UIのスタイルシート

コード上で、
```
script src="
```
と記載すると、どのプログラムを読み込むのかといった、下記の記載が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/a9f39f7f-c509-489d-8212-439eb917b5db.png)

URLの選択をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/e7e32f5f-18b8-4fb9-a5bc-854545beb07b.png)

表示された画面で、Scriptsをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/9266d02e-b149-406e-a8c6-4d7df06972e3.png)

jquery-3.7.0.min.js
を選択してください。

同様に計３つの以下の参照を設定してください。
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" />

```
これで、参照設定が完了です。

次いで、datepickerの表示をさせるプログラムを記載します。

```
    <script type="text/javascript">

        $(function () {
            $("#txtDate").datepicker({
                
            });


        });

    </script>
```
このプログラムをデザインに記載すると、
デザイン側で指定したIDのコントロールに対して、datepickerが適用されます。

デザインの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/981ab4ab-a6e3-4326-8e24-e8282f2cb933.png)

ここまでが、datepickerの表示までです。

## 4.カレンダーを日本語表示へと変更
続いて、カレンダー表示を日本語にします。
下記のGitに日本語へ変換できるプログラムがあります。

https://github.com/jquery/jquery-ui/blob/main/ui/i18n/datepicker-ja.js

このプログラムをダウンロードして、
エクスプローラーを開き、
開発しているプログラムのScriptsフォルダ内に配置をします。

ソリューションエクスプローラーで、Scriptフォルダ内のScriptsを右クリックして、追加
既存の項目を選択して、
ダウンロードしたdatepicker-ja.jsを追加します。

追加後に、デザインを表示して、
以下のコードを追加してください。

```
<script src="Scripts/datepicker-ja.js"></script>
```
こうすることで、datepickerの日本語化をすることが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537494/c915ef1e-5562-45bf-9d3a-085d32eff26c.png)

---
## 5.日付部分の表示とカレンダーを変更する

最後に、日付の表示ではなく、年と月だけの表記とします。

3.で追加したプログラム部分をいかに修正してください。

```
    <script type="text/javascript">

        $(function () {
            $("#txtDate").datepicker({
                dateFormat: 'yy-mm',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                minDate: new Date(),
                maxDate:"+1y",
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    if (year && month !== null) {
                        $(this).val(year + '-' + ('0' + (parseInt(month) + 1)).slice(-2)); // 選択された年月をテキストボックスに反映
                    }
                }                
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
            });


        });

    </script>

```
行っていること
日付の表示をさせない。
月と年も変更が可能。
選択の最小値、最大値を変更
といったことを行っています。

以上です。

---
# まとめ
datepickerを利用して、
年と月を選択して、選べるScriptを利用しました。
使う機会は、あるはずです。
ぜひ、試してみてください。