行うこと
Asp.Net上でのWeb画面デザインの際、
年と月のみを日本語での表示をする。
前提
Visual Studio2022での開発
ASP.Net
VB.Net Framework4.7.2
jquery 3.7.0
を利用。
手順
1.デザインより、参照を取得
2.テキストボックスを配置
3.jQueryのdatepickerを表示させる
4.カレンダーを日本語表示へと変更
5.日付部分の表示とカレンダーを変更する
まとめ
1.デザインより参照を取得
準備として、自身のソリューションにjqueryを
インストールします。
VisualStudio 対象のプロジェクトを右クリック。
Nugetパッケージの管理をクリック
この際、jQueryがインストール済みにあればよいです。
※私の環境では、インストール済みでした。
ない場合は、参照タブをクリック。
検索欄に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="
と記載すると、どのプログラムを読み込むのかといった、下記の記載が表示されます。
URLの選択をクリック
表示された画面で、Scriptsをクリック。
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が適用されます。
デザインの表示
ここまでが、datepickerの表示までです。
4.カレンダーを日本語表示へと変更
続いて、カレンダー表示を日本語にします。
下記のGitに日本語へ変換できるプログラムがあります。
このプログラムをダウンロードして、
エクスプローラーを開き、
開発しているプログラムのScriptsフォルダ内に配置をします。
ソリューションエクスプローラーで、Scriptフォルダ内のScriptsを右クリックして、追加
既存の項目を選択して、
ダウンロードしたdatepicker-ja.jsを追加します。
追加後に、デザインを表示して、
以下のコードを追加してください。
<script src="Scripts/datepicker-ja.js"></script>
こうすることで、datepickerの日本語化をすることが可能です。
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を利用しました。
使う機会は、あるはずです。
ぜひ、試してみてください。