Use JQuery DatePicker en Textbox asp.net

Question

Cómo adjuntar un DatePicker a Textbox en JQuery.

Answer 1

Deberías echarle un vistazo al jQuery UI DatePicker.

ASP.NET Ejemplo

<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(); 
}); 

Ver el ejemplo para el uso de esta función.

Answer 3

Donde la fecha de nacimiento es un cuadro de texto.

Un ejemplo básico:

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

Un ejemplo más complejo:

$(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", 
     }); 
}); 

Algunas explicaciones: defaultDate se establece en la actualidad menos 25 años.

dateFormat está configurado a 26/12/2014. No use 'aaaa' de lo contrario, el año de 4 caracteres se mostrará dos veces.

yearRange establece el número de años que aparecen en el cuadro desplegable del año (habilitado por la opción 'changeyear: true') para ser el año actual menos 80 años y más 40 años (pero limitado a las configuraciones de fecha máxima y mínima)

Algunas opciones básicas:

1. showOn: botón (Aparece cuando se hace clic en el botón de calendario)
2. showOn: de enfoque (espectáculos cuando la entrada está fijado el calendario para obtiene foco)
3. showsOn: ambos (muestra tanto como antes)
4. defaultDate: new Date (2014, 12, 26)
5. defaultDate: "-25y" (muestra la fecha de hoy, menos de 25 años)
6. MinDate: new Date (1926, 1, 1)
7. MaxDate: "+ 1m + 1W" (se añade 1 mes y 1 semana para la fecha actual conjunto)
8. MaxDate: new Date (2012, 1, 1)
9. dateFormat: "yy -mm-dd "
10. dateFormat:" dd-mm-yy "
11. dateFormat: 'DD, MM d, yy'
12. navigationAsDateFormat: true (elimina el tonto texto de botón 'anterior' y 'siguiente' y reemplaza con prev y los nombres del próximo mes).
13. stepMonths: 3 (cuando se hace clic en los botones siguiente o anterior se moverán tantos meses a la vez).
14. NUMBEROFMONTHS: [2, 3] (muestra 3 calendarios a la vez)
15. showCurrentAtPos: 2 (debe ser usado en conjunción con sobre 'NUMBEROFMONTHS:' Establece el presente mes en la posición seleccionada donde varios meses se muestran..)
16. showButtonPanel: true (muestra un panel de botones debajo de la tecla con el botón 'Hoy' para establecer la fecha y el botón 'Listo' que cerrará el calendario ')
17. showWeek: true (muestra el número de la semana de 52 horas durante el año)
18. changeMonth: verdadero (permite al usuario cambiar el mes a través de una lista desplegable)
19. changeYear: verdadero (permite al usuario cambiar el año a través de una lista desplegable)
20. yearRange : "c-80: c + 40" (c es para el actual. El rango del año es el año actual menos 80 años y más 40 años, pero esto está restringido por la configuración de las fechas mínimas y máximas es
21. yearRange: "1990: 2014" (en el año lista desplegable muestra el rango de años disponible en la lista desplegable)

Marque aquí para la referencia completa: http://api.jqueryui.com/datepicker/