Verwenden Sie JQuery DatePicker auf Textbox asp.net

Question

Wie Sie einen DatePicker an Textbox in JQuery anfügen.

Answer 1

Sie sollten die jQuery UI DatePicker überprüfen.

ASP.NET Beispiel

<script> 
$(function() { 
    $("#<%= txtDate.ClientID %>").datepicker(); 
}); 
</script> 

<form id="form1" runat="server"> 
    <div> 
    <asp:TextBox ID="txtDate" runat="server" /> 
    </div> 
</form> 

Answer 2

$(function() { 
     $("#txtDatepicker").datepicker(); 
}); 

siehe Beispiel dafür, wie diese Funktion zu nutzen.

Answer 3

Geburtsdatum ist eine Textbox.

Ein einfaches Beispiel:

$(document).ready(function() { 
      $("#DateOfBirth").datepicker(   
      }); 
     }); 

Komplexere Beispiel:

$(document).ready(function() { 
    $("#DateOfBirth").datepicker({ 
     defaultDate: "-25y", 
     dateFormat: "dd-mm-yy", 
     yearRange: "c-80:c+40", 
     inline: true, 
     showAnim: 'fadeIn', 
     changeMonth: true, 
     changeYear: true, 
     minDate: "-120y", 
     maxDate: "-18y", 
     }); 
}); 

Einige Erläuterungen: defaultDate ist auf heute minus 25 Jahren.

dateFormat wird auf 26/12/2014 festgelegt. Verwenden Sie nicht "JJJJ", sonst wird das 4-stellige Jahr zweimal angezeigt.

yearRange legt die Anzahl der Jahre im Dropdown-Feld "Jahr" (aktiviert durch "changeyear: true" -Option) auf das aktuelle Jahr minus 80 Jahre und plus 40 Jahre fest (aber auf Min- und Max-Datumseinstellungen beschränkt)

Einige grundlegende Optionen:

1. showOn: Taste (zeigt, wenn der Kalender-Schaltfläche geklickt wird)
2. showOn: Fokus (zeigt, wenn der Eingang der Kalender auf den Fokus erhält angeschlossen ist)
3. showsOn: beide (zeigt beide wie oben)
4. defaultDate: new Date (2014, 12, 26)
5. defaultDate: "-25y" (zeigt das heutige Datum minus 25 Jahre)
6. minDate: new Date (1926, 1, 1)
7. MaxDate: "+ 1m + 1W" (addiert 1 Monat und 1 Woche aktuell eingestellte Datum)
8. MaxDate: new Date (2012, 1, 1)
9. Datumsformat: „yy -mm-dd "
10. dateFormat:" TT-MM-JJ "
11. dateFormat: 'TT, MM d, yy'
12. navigationAsDateFormat: true (löscht den Text 'prev' und 'next' und ersetzt durch prev und die Namen des nächsten Monats).
13. stepMonths: 3 (wenn die Schaltflächen next oder prev angeklickt werden, werden diese mehrere Monate gleichzeitig verschoben).
14. NUMBEROFMONTHS: [2, 3] (3-Kalender zeigt auf einmal)
15. showCurrentAtPos: 2 (muss in Verbindung mit oben verwendet werden 'NUMBEROFMONTHS:' setzt den gegenwärtigen Monat in ausgewählter Position, wo sie mehr Monate gezeigt..)
16. showButtonPanel: true (zeigt unter dem cal mit ‚Heute‘ Taste ein Tastenfeld für das Datum heute Einstellung und Schaltfläche ‚Fertig‘, die den Kalender ')
17. showWeek schließen: true (zeigt die Wochennummer aus von 52 für das Jahr)
18. changeMonth: true (dem Benutzer erlauben, den Monat über eine Dropdown-Liste)
19. changeYear zu ändern: true (erlauben dem Benutzer, das Jahr über ein Drop-Down-Liste)
20. yearRange zu ändern : "c-80: c + 40" (c steht für current. Jahresbereich ist aktuelles Jahr minus 80 Jahre und plus 40 Jahre, aber dies wird durch die Einstellungen für die Min- und Max-Daten eingeschränkt.
21. yearRange: "1990: 2014" (im Jahr Dropdown-Liste zeigt den Bereich von Jahren in der Dropdown-Liste verfügbar)

Sie sich hier über die volle Referenz: http://api.jqueryui.com/datepicker/