bootstrap-datepicker で日付の初期値について

Question

bootstrap-datepicker で日付を表示させています。
それ自身うまくいっているのですが、
// 表示の為
paidHolidayTable.Other1 = data.Other1;　　// <- 今日以前の日付がセットされている
セットされているデータは、「2021/06/24 0:00:00」こんな感じ
初期値をセットした時、カレンダーには常に今日の日付が表示されます。また、空白の時は初期値がありません。

希望は、初期値がある時はその日付。無理なら初期値なしを希望
したい。

        <script type="text/javascript">
            
            $(function () {
                $('.datepicker').datepicker({
                    format: 'yyyy/mm/dd hh:mm:ss',
                    language: 'ja'
                });
            })

        @model PaidHolidays.Models.PaidHolidayTableModel

          :

        <div class="form-group">
            @Html.LabelFor(model => model.Other1, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Other1, new { htmlAttributes = new { @class = "form-control datepicker" } })
                @Html.ValidationMessageFor(model => model.Other1, "", new { @class = "text-danger" })
            </div>
        </div>

    public partial class PaidHolidayTableModel
    {
          :
        [Display(Name = "日付")]
        public Nullable<System.DateTime> Other1 { get; set; }

        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            PaidHolidayTable data = db.PaidHolidayTable.Find(id);
            if (data == null)
            {
                return HttpNotFound();
            }
            
            PaidHolidayTableModel paidHolidayTable = new PaidHolidayTableModel();
		:
            // 表示の為
            paidHolidayTable.Other1 = data.Other1;
		:

            return View(paidHolidayTable);
        }

VS2015 C# ASPNET NET 4.5.2

Comments

[退会済みユーザー]

MVC のバージョンを質問欄を編集して追記願います。

質問の Controller のコードの、

> paidHolidayTable.Other1 = data.Other1;

で日付を設定して View に渡しているが、bootstrap-datepicker を開くとその日付にならず、開いた時点での日付が bootstrap-datepicker に表示される。それを Controller で設定した日付が表示されるようにしたい・・・と言うことがやりたいことと言う理解で良いのですか？

> また、空白の時は初期値がありません。

その意味がわかりません。もっと詳しく説明願います。

[退会済みユーザー]

Razor のタグがついてますが関係ないのでは？ であればタグを外してください。

[byori]

> それを Controller で設定した日付が表示されるようにしたい・・・
その通りです。
> また、空白の時は初期値がありません。
は、「Controller で設定した日付・・」が無いとき、または、ヌルの時、初期値をセットしていない時を「空白の時」と表現していました。

> MVC のバージョンを・・・
MVCのバージョンは、MVC5 と思って確認しようとしていますが、どこに書いてあるか調べられませんでした。どこで確認できるか教えていただけますでしょうか？

よろしくお願いします。

[退会済みユーザー]

> 「Controller で設定した日付・・」が無いとき、または、ヌルの時、初期値をセットしていない時を「空白の時」と表現していました。

その時は Datepicker の表示はどのようにしたいのでしょうか？　開いた時の日付が選択されていればいいのですか？

> MVC5 と思って確認しようとしていますが、どこに書いてあるか

Visual Studio のソリューションエクスプローラーの参照にある System.Web.Mvc をクリックしてプロパティのバージョンを見ると分かるはずです。

[byori]

> 開いた時の日付が選択されていればいいのですか？
可能であれば、開いた時点での日付が選択された状態です。

教えていただいた方法で確認すると、バージョン 5.2.3.0 とありました。

Answer 1

やりたいことは以下の通りと理解してレスします。

質問の Controller のコードの、

paidHolidayTable.Other1 = data.Other1;

で日付を設定して View に渡している。

アプリを実行してブラウザに表示するとテキストボックスにはその日付が表示されるが、bootstrap-datepicker を開くとその日付にならず、開いた時点での日付が表示される。それを、

(1) Controller で設定した日付が表示されるようにしたい。

(2) Controller で日付を設定しない場合、当日の日付が表示されるようにしたい。

update メソッドを使うと Datepicker に日付を設定できるようです。

update
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#update

上の記事のサンプルコードの、

$('.datepicker').datepicker('update', '2011-03-05');

'2011-03-05' の部分を、 Controller で日付が設定されている場合はその日付を、設定されていない場合は当日の日付を設定することでやりたいことはできると思います。

検証に使ったサンプルコードを以下にアップしておきます。Model は質問者さんのコードと同じです。

Controller / Action Method

public ActionResult Datepicker()
{
    var model = new PaidHolidayTableModel();
    model.Other1 = new DateTime(2021, 6, 24);
    return View(model);
}

View

@model Mvc5App.Controllers.PaidHolidayTableModel

@{
    ViewBag.Title = "Datepicker";

    string date;
    if (Model.Other1 == null)
    {
        date = DateTime.Now.ToShortDateString();
    }
    else
    {
        date = Model.Other1.Value.ToShortDateString();
    }
}

<h2>Datepicker</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>PaidHolidayTableModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Other1, htmlAttributes: 
                new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Other1, 
                    new { htmlAttributes = new { @class = "form-control datepicker" } })
                @Html.ValidationMessageFor(model => model.Other1, "", 
                    new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-datepicker.js"></script>

    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">       
        $(function () {
            $('.datepicker').datepicker({
            format: 'yyyy/mm/dd',
                language: 'ja'
            }).datepicker('update', '@date');
        })
    </script>
}

実行結果は：

Action Method の model.Other1 = new DateTime(2021, 6, 24); をコメントアウトすると:

お試しください。

【追記】

下のコメント欄の 2021/07/03 15:29 の私のコメントで「後で回答欄に追記しておきます」と書いた件です。

アプリを実行してブラウザに表示するとテキストボックスには Controller で設定した日付が表示されるが、bootstrap-datepicker を開くとその日付にならず、開いた時点での日付が表示される原因は、テキストボックスに 2021/06/24 0:00:00 と表示される（即ち、当該 html input 要素で value="2021/06/24 0:00:00" となり、0:00:00 が Datepicker にとって余計）だったからです。

それを 2021/06/24 となるようにすれば Datepicker もその日にちを表示するようになりました。

そうするためには、モデル (PaidHolidayTableModel クラス) の Other1 プロパティに以下の属性を付与してやれば、上の回答に書いたやりたいことの (1) は実現できます。

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy/MM/dd}")]

View のコードの下の方の JavaScript のコードで .datepicker('update', '@date') は不要になります。上の方の @{ ... } の中の date を設定するコードも不要になります。

やりたいことの (2) は、Controller で data.Other1 が null か否かをチェックして、null だったら

paidHolidayTable.Other1 = DateTime.Now;

とすれば良さそうです。

Comments

[byori]

ありがとうございます。

希望通りの動作になりました。(^O^)／

[退会済みユーザー]

今更ながらですが、上の回答のように update メソッドを使って Datepicker に日付を設定するという小細工をしなくてもやりたいことができる方法がありました。ダメだった理由は 2021/06/24 0:00:00 となる（すなわち 0:00:00 が Datepicker にとって余計）だったからで、それを解決する方法はあります。後で回答欄に追記しておきます。