Adding a DatePicker

Unfortunately, .NET MVC doesn't provide us with DatePicker extension. In order to add it in our project, we need to utilize another external resource, Bootstrap-DatePicker.

You can find it on: https://bootstrap-datepicker.readthedocs.io/en/latest/ Then, download the 1.6.4 version.

1. Extract the file.
2. Right-click at Content folder in Visual Studio.
3. Add > Existing Item > CSS > DatePicker3.min.css
4. Right-click at Script folder in Visual Studio.
5. Add > Existing Item > js > Datepicker.min.js
6. Now, we can update the layout page.
7. First, we need to link the CSS into our layout.

   <link href="~/Content/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
   

8. Then, we link the JS file into our layout at the bottom line of code.

   <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
   

9. After that, we try to assign the format of our input in class "datepicker".

   <script>
           $('.datepicker').datepicker({
               format: 'm/d/yyyy'
           });
   </script>
   

10. Then, we add another class in Add cshtml.

    <div class="form-group">
        @Html.LabelFor(m => m.Date, new { @class = "control-label"})
        @Html.TextBoxFor(m => m.Date, "{0:d}", new { @class = "form-control datepicker"})
    </div>