使用 javascript 实现 datePicker

Question

我正在尝试在字段上实现日期选择器，代码如下所示，但它不起作用。我用过 Pikaday Javascript 日历。

<div class="form-group">
                @Html.LabelFor(model => model.TimePeriod.EndDate, htmlAttributes: new { @class = "control-label col-md-8" })
                <div>
                    @Html.EditorFor(model => model.TimePeriod.EndDate, new { htmlAttributes = new { @class = "datepicker form-control"} })
                    @Html.ValidationMessageFor(model => model.TimePeriod.EndDate, "", new { @class = "text-danger" })
                </div>
                <script src="~/Scripts/pikaday.js"></script>
                <link href="~/Content/css/pikaday.css" rel="stylesheet" />
                <link href="~/Content/css/site.css" rel="stylesheet" />
                <link href="~/Content/css/theme.css" rel="stylesheet" />
                <link href="~/Content/css/triangle.css" rel="stylesheet" />
                <script type="text/javascript">
                    //var currentTime = new Date()
                    var picker = new Pikaday(
                        {
                            field: document.getElementById('EndDate'),
                            firstDay: 1,
                            minDate: new Date('2010-01-01'),
                            maxDate: new Date('2033-12-12'),
                            yearRange: [2010, 2033],
                            numberOfMonths: 1,
                            theme: 'dark-theme'
                        });
                </script>
            </div>

Answer 1

Html 属性缺少 ID。添加 Pikaday 使用的 id="EndDate" 后 - 它解决了问题。 @Html.EditorFor(model => model.TimePeriod.EndDate, new { htmlAttributes = new { @class = "datepicker form-control", @id="EndDate"} })

使用 javascript 实现 datePicker

Implement a datePicker using javascript

javascript

asp.net-mvc

razor