, , ,

Esistono diversi campi calendario utilizzabili in C#. Se ne trovano Javascript, Bootstrap e Ajax.

La soluzione proposta consiste nella trasformazione di una TextBox in un campo calendar (DatePicker) utilizzando Bootstrap.

Innanzitutto occorre inserire all’interno dell’header del programma aspx i riferimenti a Bootstrap, a jQuery e al DataPicker.

Bootstrap, jQuery e Bootstrap.Datepicker possono essere scaricati utilizzando NuGet (scelta consigliata).

<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="jQuery/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.bundle.min.js"></script>

    <link href="bootstrap-datepicker3.css" type="text/css" rel="stylesheet" />
    <script src="bootstrap-datepicker.min.js"></script>
    <script src="locales/bootstrap-datepicker.it.min.js"></script>
</head>

Sempre all’interno del tag Head occorre definire a quale TextBox deve essere associato il DataPicker.

Per tutte le informazioni riguardanti i parametri, leggere la documentazione ufficiale all’indirizzo https://bootstrap-datepicker.readthedocs.io/en/latest/

<script>
$('[id$=DataDiNascita]').datepicker({
   maxViewMode: 3,
   clearBtn: true,
   language: "it",
   todayHighlight: true
 });
</script>

All’interno del tag body sarà possibile definire il campo TextBox abbinato a una RegularExpressionValidator per evitare l’inserimento di caratteri non corretti

<asp:TextBox ID="DataDiNascita" runat="server" class="form-control" autocomplete="off">
</asp:TextBox>
<asp:RegularExpressionValidator Display="Dynamic" ForeColor="Red" SetFocusOnError="True" ID="revDataDiNascita" ControlToValidate="DataDiNascita" Text="Data non valida" ValidationExpression="(((0|1)[0-9]|2[0-9]|3[0-1])\/(0[1-9]|1[0-2])\/((19|20)\d\d))$" runat="server" />