質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • C#

    6827questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    508questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 355

seventy

score 1

 前提・実現したいこと

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

現在の疑問点は3点です。
(1)Create.cshtmlで、項目が縦長に並びます。画面は横長なので、項目をふたつづつ横にしたいです。
どこを編集すればよいのでしょう。
<div></div>を減らしてみたりしても、レイアウトを変更できませんでした。
下記コードの中央の

            </div>
            <div class="form-group">


を削除してみました。

<h2>Create</h2>

<h4>Create</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ReleaseDate" class="control-label"></label>
                <input asp-for="ReleaseDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="StartDate" class="control-label"></label>
                <input asp-for="StartDate" class="form-control" />
                <span asp-validation-for="ReleaseDate" class="text-danger"></span>
            </div>

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

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString ="{0:yyyy年MM月dd日}")]
        [Display(Name = "公開日")]
        public DateTime ReleaseDate { get; set; }

        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}")]
        [Display(Name = "開始日")]
        public DateTime StartDate { get; set; }

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

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

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

Bootstrap
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/04/18 10:06

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

    キャンセル

  • seventy

    2018/04/18 10:18

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

    キャンセル

  • x_x

    2018/04/18 11:07

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

    キャンセル

  • seventy

    2018/04/18 11:18

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

    キャンセル

回答 2

+1

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

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

(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/18 11:22

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

    キャンセル

  • 2018/04/18 11: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 11:59 編集

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

    キャンセル

  • 2018/04/18 13:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    6827questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    508questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。