Using the Bootstrap DatePicker

cloudscribe.Web.Common provides unobtrusive javascript for wiring up bootstrap datepicker

In your .cshtml view file you need this:

@section Styles {
    @{ await Html.RenderPartialAsync("_DatePickerCssPartial"); }
}

<input asp-for="YouDatePropertOnYourViewModel" class="form-control" 
data-bs-datepicker="true"
data-bs-datepicker-debug="false"
data-bs-datepicker-keepOpen="false"
data-bs-datepicker-allowInputToggle="true"
data-bs-datepicker-use-fontawesome="false"
data-bs-datepicker-locale="@System.Globalization.CultureInfo.CurrentCulture.Name"
/>

@section Scripts {
    @{ await Html.RenderPartialAsync("_DatePickerScriptsPartial"); }
}

There are lots of options for bootstrap datepicker and lots of supported data- attributes not shown in the example above. To find all the supported data- attributes see the javascript cloudscribe-datepicker-bootstrap-unobtrusive.js

By default this datepicker uses glyphicons which are included in bootstrap3, but as shown above we have a setting if you want to use fontawesome classes for the icons.

Note that you also need to add css for the datepicker, normally you will have a section for scripts and styles in your layout allowing you to add them from your views as shown above.

If you want to view or submit comments you must accept the cookie consent.