Stand up your date

Hello future me! This is past you reminding you of how to use the bootstrap-datepicker, and in particular how to avoid rendering an empty datepicker:

HTML5 introduced a number of new input types, including date:

<p>Date:<br/>
<input type="date" /></p>

However, the age-old problem of browser compatibility leads to very different results when rendered.

Chrome gives the best result – it localises the date format and provides an intuitive datepicker:

Edge is less successful, it does not localise the date format and the date picker feels less intuitive – but it is still usable:

IE – well, oh dear – IE doesn’t support this input type at all and instead just renders a text box:

So to provide some cross-browser consistency I reach for bootstrap-datepicker. If you’re a Visual Studio user you can install it via NuGet.

The NuGet package will install JavaScript and CSS files, which should be included in your BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/bootstrap-datepicker.js"));
 
bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-datepicker.css",
            "~/Content/site.css"));

You also need to set up the datepicker in your Views:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
 
    <script type="text/javascript">
        $(function () {
            // Bootstrap.Datepicker docs: https://bootstrap-datepicker.readthedocs.io/en/stable/
            $('.datepicker').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy',
                language: "en-GB",
                todayHighlight: true
            });
            $(document).off('.datepicker.data-api');
 
        });
    </script>
}

You should then add the datepicker class to your inputs:

@Html.EditorFor(model => model.InitialPaymentDate, new { htmlAttributes = new { @class = "form-control datepicker" } })

A crucial gotcha is that if your date is null (or default(DateTime)) an empty datepicker will be rendered:

You need to remember to give your date field a value, for example:

myModel.InitialPaymentDate = DateTime.Today;

With this done the datepicker will render as expected and looks great in Chrome, Edge and IE:

It's a date!