« Ritorna al blog

Ritorna alla lista completa degli articoli

Bootstrap datepicker in ASP. NET Core

ASP.NET CORE - maggio 20, 2021

In questo tutorial vedremo come inserire un calendario in un progetto asp.net core.

Si creerà un'applicazione che gestirà le news (CRUD). Quando si inserisce una news o la si aggiorna è utile ad esempio inserire un calendario per velocizzare l'inserimento della data. Vedremo quindi come configurare un calendario a comparsa e aggiungere le librerie adatte.

Partiamo dal nostro modello:

public class News
{
	[Key]
	[Column(Order = 0)]
	public int Id { get; set; }

	[Required]
	[Column(Order = 1)]
	[StringLength(100)]
	public string Title { get; set; }

	[Required]
	[Column("Date", Order = 2)]
	[Display(Name = "Date")]
	[DataType(DataType.Date), DisplayFormat(DataFormatString = @"{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
	public DateTime DateNews { get; set; }

	[Required]
	[Column("Text", Order = 3)]
	public string Text { get; set; }
}

Installiamo la libreria lato client utilizzando la fantastica funzione integrata di Visual Studio.

 Bootstrap datepicker in ASP. NET Core

Per maggiori informazioni potete visionare la pagina GitHub.
Configuriamo adesso il nostro calendario:

$(function () {
    $("#datepicker").datepicker({
        format: "dd/mm/yyyy",
        startView: 2,
        language: "it"
    });
});

Adesso non dovremo far altro che integrarlo nella pagina Create.cshtml e Edit.cshtml ricordandoci di includere i file necessari. Ecco un esempio:

@model BootstrapDatepicker.Models.News

@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Header{
    <link href="~/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet" />
}

<h1>Create</h1>

<h4>News</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Title" class="control-label"></label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="DateNews" class="control-label"></label>
                <input asp-for="DateNews" type="text" class="form-control" id="datepicker" />
                <span asp-validation-for="DateNews" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Text" class="control-label"></label>
                <input asp-for="Text" class="form-control" />
                <span asp-validation-for="Text" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="~/bootstrap-datepicker/locales/bootstrap-datepicker.it.min.js"></script>
    <script src="~/js/datepicker-init.js"></script>
}

Il video mostra ogni step necessario per implementare il calendario in un progetto asp.net core.