ASP.NETでカレンダーセレクタを使いたい

前提・実現したいこと

Visual Studio 2017 Proを使って、ASP.NET Coreの開発をしています。
Modelを作って、Scaffoldingしたところ、思うような挙動で動作しませんでした。

現在の疑問点は3点です。
(1)Create.cshtmlで、項目が縦長に並びます。画面は横長なので、項目をふたつづつ横にしたいです。
どこを編集すればよいのでしょう。

<div></div>を減らしてみたりしても、レイアウトを変更できませんでした。下記コードの中央の ```cshtml </div> <div class="form-group"> ``` を削除してみました。

cshtml
1<h2>Create</h2>
2
3<h4>Create</h4>
4<hr />
5<div class="row">
6    <div class="col-md-4">
7        <form asp-action="Create">
8            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
9            <div class="form-group">
10                <label asp-for="ReleaseDate" class="control-label"></label>
11                <input asp-for="ReleaseDate" class="form-control" />
12                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
13            </div>
14            <div class="form-group">
15                <label asp-for="StartDate" class="control-label"></label>
16                <input asp-for="StartDate" class="form-control" />
17                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
18            </div>

(2)下記のようにDataType(DataType.Date)を設定しましたが、実行すると単なるテキストボックスになって、カレンダーでpopupセレクトできませんでした。
どうすればカレンダーでセレクタにできますか？

C#
1        [DataType(DataType.Date)]
2        [DisplayFormat(DataFormatString ="{0:yyyy年MM月dd日}")]
3        [Display(Name = "公開日")]
4        public DateTime ReleaseDate { get; set; }
5
6        [DataType(DataType.Date)]
7        [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}")]
8        [Display(Name = "開始日")]
9        public DateTime StartDate { get; set; }

(3)Viewのテキストボックスのサイズは、cshtmlで変更するのでしょうか？

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

Windows7
Visual Studio 2017 Pro
ASP.NET Core2.0
InternetExplorer11

Bootstrap

x_x

2018/04/18 01:06

Bootstrapは使っていますか？その場合バージョンはいくつでしょうか？

seventy

2018/04/18 01:18

Bootstrapを使っているかどうかは、どこで確認できますか？

x_x

2018/04/18 02:07

bootstrap.min.cssのような名前のCSSを読んでいるかどうかですかね。バージョンは中を見ればわかります。

seventy

2018/04/18 02:18

ありがとうございます。追記しました。

行動規範の内容に同意します

回答2件

(1)の回答のみです。
横並びにするには次のようなHTMLにします。
Bootstrap 3のグリッドシステムは内部的にはfloatを使っています。rowクラスを親にすることでfloat解除が不要となる仕組みです。
提示コードではformがかなり内側に来ているのですが、大きく囲ったほうがいいでしょうね。

HTML
1<div class="row">
2  <div class="col-md-4">.col-md-4</div>
3  <div class="col-md-4">.col-md-4</div>
4  <div class="col-md-4">.col-md-4</div>
5</div>

https://getbootstrap.com/docs/3.3/css/#grid
http://bootstrap3.cyberlab.info/css/gridSystem.html

投稿2018/04/18 08:42

x_x

総合スコア13749

初心者マークを付けることをお勧めします。

(1)Edit.cshtmlで、項目が縦長に並びます。画面は横長なので、項目をふたつづつ横にしたいです。どこを編集すればよいのでしょう。

基本的なことだけでもいいので html について勉強してください。ASP.NET MVC は Web Forms とは違って html ソースのデザインの自由度が高い＝ html の書き方の基本的なことを知ってデザインするのは開発者が行う必要があります。

(2)下記のようにDataType(DataType.Date)を設定しましたが、実行すると単なるテキストボックスになって、カレンダーでpopupセレクトできませんでした。どうすればカレンダーでセレクタにできますか？

jQuery UI の Datepicker などを使うようにしてください。DataType の設定でカレンダーが表示されるなんてことはありません。

Datepicker
http://jqueryui.com/datepicker/

【2018/4/18 12:10 追記】

質問 (3) に対する回答をしてなかったので追記します。

(3)Viewのテキストボックスのサイズは、cshtmlで変更するのでしょうか？

スタイル (CSS) で設定します。

テンプレートを使ってアプリを作っていると思いますが、その場合既にデフォルトでスタイルシートが取り込まれ適用されていると思います。

IE11 なら F12 開発者ツール、Chrome ならディベロッパーツールを開いて、サイズを調整したいテキストボックスにどのようなスタイルが適用されているか調べてください。

たぶん、すでに site.css とか bootstrap.css が適用されているのではないかと思います。それにどのようなスタイルを追加するとサイズを変更できるかを考えることになるはずです。

投稿2018/04/17 14:47

編集2018/04/18 03:12

退会済みユーザー

総合スコア0

seventy

2018/04/18 02:22

ありがとうございます。 (2)ASP.NET MVC プログラミング入門(日経BP社)を読みながら進めています。これの3章でコードファーストでModelを作るところを試しています。この本のpp.122-124だと、[DataType(DataType.Date)]を指定すれば、自動的にカレンダーセレクタになるように読めるのです。この本、まちがいってことですね。

退会済みユーザー

2018/04/18 02:56

> [DataType(DataType.Date)]を指定すれば、自動的にカレンダーセレクタになるように読めるのです。 > この本、まちがいってことですね。すみません、もう少し詳しく書くべきでした。カレンダーが出てくるのはブラウザ依存で、OS が Windows 10 の IE11, Safari 5.1.7 (7534.57.2) では出てきません。 Edge もカレンダーは出てきませんが、テキストボックスの部分をクリックするとカレンダーに代わるダイアログが出てきます。 Chrome 66.0.3359.117, Firefox 59.0.2, Opera 52.0.2871.64 では出てきますが、操作性はブラウザ依存になります。本は持ってないのでどういう説明なのか分かりませんが、全くの間違いということではないにせよ、ブラウザ依存ということが書いてないと不親切とは言えるかもしれませんね。それだけでなく、検証についてもブラウザ依存になります。特に IE11 が問題です。詳しくは以下の記事を見てください。 DataType 属性による検証 http://surferonwww.info/BlogEngine/post/2016/03/08/validation-by-datatypeattribute-and-default-error-message.aspx

退会済みユーザー

2018/04/18 03:00 編集

質問 (3) に対する回答をしてなかったので、回答欄に追記しておきます。

seventy

2018/04/18 04:26

ありがとうございます。 Windows7/IE11->NG Windows10/IE11->NG Windows10/Safari5.1.7->NG Windows10/Edge->dialogでる。 Windows10/Chrome66->OK Windows10/Firefox59->OK Windows10/Opera52->OK ですね。

行動規範の内容に同意します

あなたの回答