Implement a datePicker using javascript

Question

I am trying to implement a date picker on a field , code is shown below but it does not work. I have used Pikaday Javascript calender.

<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

The id was missing for the Html attribute. After adding the id="EndDate" which Pikaday is using - It resolved the issue. @Html.EditorFor(model => model.TimePeriod.EndDate, new { htmlAttributes = new { @class = "datepicker form-control", @id="EndDate"} })