ブートストラップ日付ピッカーの上に入力フィールドのテキストを保存する

bugfix> javascript > 投稿 2020-08-23 20:40

ブートストラップの日付ピッカーがChromeで意図したとおりに機能しなくなったASP.net MVC4プロジェクトがあり、IEでは正常に動作します。

この画像は、私が抱えている問題を示しています。

bundleconfigは次のようになります。

           bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.12.4.js",
                    "~/Scripts/jquery-ui-1.12.1.js"
                    )
                    );

        bundles.Add(new ScriptBundle("~/bundles/createTimeRequest").Include(
                    "~/Scripts/createTimeRequest.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/moment").Include(
                    "~/Scripts/moment.js"));
        bundles.Add(new ScriptBundle("~/bundles/Calendar").Include(
                                "~/Scripts/fullcalendar.js"));
        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/jquery.dataTables.js",
                  "~/Scripts/dataTables.jqueryui.js",
                  "~/Scripts/dataTables.foundation.js",
                  "~/Scripts/dataTables.bootstrap.js",
                  "~/Scripts/dataTables.buttons.min.js",
                  "~/Scripts/bootstrap-datepicker.js",
                  "~/Scripts/buttons.print.min.js",
                  "~/Scripts/respond.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include(
                   "~/Content/themes/base/jquery.ui.all.css",
                   "~/Content/themes/base/jquery.ui.base.css",
                   "~/Content/themes/base/jquery.ui.theme.css",
                   "~/Content/dataTables.bootstrap.css",
                   "~/Content/jquery.dataTables.css",
                   "~/Content/dataTables.foundation.css",
                   "~/Content/dataTables.jqueryui.css",
                   "~/Content/bootstrap.css",
                   "~/Content/bootstrap-datepicker.css",
                  // "~/Content/themes/base/datepicker.css",
                   "~/Content/fullcalendar.css",
                   "~/Content/site.css",
                   "~/Content/buttons.dataTables.min.css"
                  ));

入力フィールドにクラス参照を介して日付ピッカーであることを伝えるjavascriptファイルは次のようになります。

var year = (new Date).getFullYear();
$(function () {
    $('.datepicker').datepicker({
        orientation: "right",
        startDate: new Date(year, 0, 1),
        //endDate: new Date(year, 11, 31)
    });
    $('.dpManager').datepicker({
        orientation: "right",
        endDate: '+365d'
    });
})

また、ビューのカミソリの構文は次のとおりです。

 <div class="col-md-4"><label>Select company: </label>@Html.ListBox("Company", (MultiSelectList)ViewBag.Company, new { @class = "form-control", size = 9 })</div>
        <div class="col-md-4">
                @Html.Label("Start Date:")
                @Html.Editor("sDateTime", new { htmlAttributes = new { @class = "dpManager form-control" } })
        </div>
        <div class="col-md-4">
                @Html.Label("End Date:")
                @Html.Editor("eDateTime", new { htmlAttributes = new { @class = "dpManager form-control" } })
            </div>
        </div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/createTimeRequest")
}
<script>
        if (!$("#sDateTime").val() || !$("#sDateTime").val()) {
            $('#btnSubmit').prop("disabled", true);
        }
</script>

これは私のレイアウトファイルです。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
   ........
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

これは今週起こったばかりで、おそらくクロームは新しいアップデートを公開しましたか？日付ピッカーが表示されていることがわかりますが、保存された入力が何らかの理由で優先されます。 jqueryとjquery uiを更新してみました。まだ試していないのは、ブートストラップを更新することだけです。それを試して他のことを壊したいかどうかはわかりません。

どんな助けも大歓迎です。

javascript

jquery

datepicker

回答 1 件

autocomplete = offを使用することをお勧めします
```
<input autocomplete=off />
```
Webフォームフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか？

bugfix

ブートストラップ日付ピッカーの上に入力フィールドのテキストを保存する

javascript

jquery

datepicker

関連記事