web-dev-qa-db-fra.com

Sélecteur de date et heure ASP.NET

existe-t-il un bon contrôle de sélection de temps gratuit/open source qui va bien avec le contrôle de calendrier ASP.NET?

asp.netdatetimepicker
30
SoftwareGeek

JQuery a le meilleur datepicker IMHO. Bien qu'il ne soit pas spécifique à .Net, il fonctionne toujours très bien.

HTML:

<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>

Dans l'élément de tête:

<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>

Aussi simple que cela!

24
Chuck Conway

La réponse à votre question est Oui, il existe un bon contrôle de sélecteur de temps gratuit/open source qui va bien avec le contrôle de calendrier ASP.NET.

Le contrôle de calendrier ASP.NET écrit simplement une table html.

Si vous utilisez HTML5 et DOT.NET Framework 4.5, vous pouvez utiliser le contrôle ASP.NET TextBox à la place et définir la propriété TextMode sur "Date", ou "Mois", ou "Semaine", ou "Heure" ou " DateTimeLocal "ou si vous utilisez pas soit Chrome ou Firefox ou Internet Explorer, vous pouvez également définir cette propriété sur" DateTime ").

Lisez ensuite la propriété Text pour obtenir la date, l'heure, le mois ou la semaine sous forme de chaîne à partir de TextBox.

Si vous utilisez DOT.NET Framework 4.0 ou une version antérieure, vous pouvez utiliser html5 input type = "date" ou input type = "month" ou input type = "week" ou input type = "time" ou input type = "datetime-local" ou si vous utilisez pas soit Chrome ou Firefox ou Internet Explorer, vous pouvez également utiliser le type d'entrée = "datetime".

Si vous avez besoin du code côté serveur (écrit en C # ou Visual Basic) les informations que l'utilisateur a saisies dans le champ de date, vous pouvez essayer d'exécuter cet élément sur le serveur en écrivant à l'intérieur de la balise d'entrée runat="server"

Donnez également un identifiant à cet élément, afin que vous puissiez y accéder sur le code côté serveur. Lisez la propriété Value pour obtenir la date, l'heure, le mois ou la semaine en entrée sous forme de chaîne. Si vous ne pouvez pas exécuter cet élément sur le serveur, vous avez besoin d'un champ masqué en plus du type d'entrée = "date" ou "heure" ou "mois" ou "semaine". Dans la fonction d'envoi (écrite en javascript), définissez la valeur du champ masqué sur la valeur du type d'entrée = "date", ou "heure", ou "mois", ou "semaine", puis sur le code côté serveur , lisez également la propriété Value de ce champ masqué sous forme de chaîne.

Assurez-vous que l'élément de champ caché du code HTML peut s'exécuter sur le serveur.

J'espère que ça t'as aidé.

35
user2133061

Dans la zone de texte, ajoutez ceci:

textmode="Date"

Il vous donne un joli Datepicker comme ceci:

DatePicker

D'autres variantes de ceci sont:

textmode="DateTime"

Il vous donne ce look:

Date Time Picker

textmode="DateTimeLocal"
8
Ehsan

Comme c'est le seul que j'ai utilisé, je suggère le CalendarExtender de http://www.ajaxcontroltoolkit.com/

8
sshow

C'est une solution sans jquery.

Ajouter Calendrier et TextBox dans WebForm -> La source de WebForm a ceci:

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

Créez des méthodes dans le fichier cs de WebForm:

protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
    }

    protected void DateChange(object sender, EventArgs e)
    {
        TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
    }

La méthode DateChange est connectée à l'événement Calendar SelectionChanged. Cela ressemble à ceci: Image DatePicker

4
Bojan Jovanovic

Essayez bootstrap-datepicker si vous utilisez bootstrap.

3
rockXrock

Sélecteur de date de base Lite

Il s'agit de la version gratuite de leur produit phare, mais elle contient un sélecteur de date et d'heure natif pour asp.net.

3
recursive

Il existe une implémentation simple et prête à l'emploi: le HTML 5 input type="date" et les autres types d'entrée liés à la date.

D'accord, vous ne pouvez pas trop styliser les contrôles et cela ne fonctionne pas sur tous les navigateurs , mais cela peut toujours être une très bonne option à long terme si tous les navigateurs modernes le prennent en charge et ne le font pas ' Je veux inclure des bibliothèques lourdes qui ne fonctionnent pas toujours aussi bien sur les appareils mobiles.

2
Patrick Hofman
@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control", @type = "date" } })

ça marche bien

0
Abdulhakim Zeinu

Si vous souhaitez travailler avec une zone de texte, sachez que la définition de la propriété TextMode sur "Date" ne fonctionnera pas sur Internet Explorer 11, car elle ne prend actuellement pas en charge les valeurs "Date", "DateTime" ou "Time".

Cet exemple illustre comment l'implémenter à l'aide d'une zone de texte, y compris la validation des dates (puisque l'utilisateur peut entrer uniquement des nombres). Il fonctionnera sur Internet Explorer 11 ainsi que sur d'autres navigateurs Web.

<asp:Content ID="Content"
         ContentPlaceHolderID="MainContent"
         runat="server">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
   $(function () {
   $("#
   <%= txtBoxDate.ClientID %>").datepicker();
   });
 </script>
 <asp:TextBox ID="txtBoxDate"
           runat="server"
           Width="135px"
           AutoPostBack="False"
           TabIndex="1"
           placeholder="mm/dd/yyyy"
           autocomplete="off"
           MaxLength="10"></asp:TextBox>
 <asp:CompareValidator ID="CompareValidator1"
                    runat="server"
                    ControlToValidate="txtBoxDate"
                    Operator="DataTypeCheck"
                    Type="Date">Date invalid, please check format. 
 </asp:CompareValidator>
 </asp:Content>
0
José Lugo