ventana modals modal español ejemplos dentro bootstrap twitter-bootstrap datepicker bootstrap-datepicker

twitter-bootstrap - modals - datepicker bootstrap php



Selector de fecha Twitter Bootstrap (10)

Algunas personas publicaron el http://www.eyecon.ro/bootstrap-datepicker/ a esta implementación de bootstrap-datepicker.js. Utilicé ese de la siguiente manera, funciona con Bootstrap 3.

Este es el marcado que utilicé:

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014"> <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" /> <span class="input-group-addon add-on"> <span class="glyphicon glyphicon-calendar"</span> </span> </div>

Este es el javascript:

$(''.date'').datepicker();

También incluí el archivo javascript descargado desde el enlace de arriba, junto con su archivo css, y por supuesto, debe eliminar cualquier clase de cuadrícula bootstrap como col-md-3 para satisfacer sus necesidades.

¿Cómo puedo usar el selector de fecha de Twitter Bootstrap? Usé el código a continuación pero no funciona.

<html> <head> <title>DatePicker Demo</title> <script src="js/jquery-1.7.1.js"></script> <link href="css/datepicker.less" rel="stylesheet" type="text/css" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="js/bootstrap-datepicker.js"></script> </script> </head> <body> <form > <div class="input"> <input class="small" type="text" value="01/05/2011" data-datepicker="datepicker"> </div> </form> </body> </html>

Cree un tema personalizado con themeroller, luego en la página de descarga, elija ''Configuración avanzada del tema''. Establezca el alcance de CSS en ''cuerpo'' . Como las reglas de CSS que descargue estarán precedidas del selector de etiquetas corporales, tendrán una mayor especificidad y anularán las reglas de arranque .

Estaba teniendo el mismo problema pero cuando creé un proyecto de prueba, para mi sorpresa, el datepicker funcionó perfectamente usando Bootstrap v2.0.2 y Jquery UI 1.8.11. Aquí están los guiones que incluyo:

<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

Mucha confusión se debe a la existencia de al menos tres bibliotecas principales llamadas bootstrap-datepicker:

  1. Una popular bifurcación de fechador de eyecon por Andrew ''eternicode'' Rowls (¡usa esta!) :
  2. La versión original de Stefan ''eyecon'' Petre, todavía disponible en http://www.eyecon.ro/bootstrap-datepicker/
  3. Un widget datepicker totalmente independiente que ''storborg'' buscaba haberse fusionado con bootstrap . No se fusionó y nunca se creó una versión de lanzamiento adecuada del widget.

Si está comenzando un nuevo proyecto, o diablos, incluso si está tomando el control de un proyecto anterior usando la versión eyecon, le recomiendo que use la versión de eternicode, no la de eyecon . La versión original de eyecon es absolutamente inferior en términos de funcionalidad y documentación, y es poco probable que cambie, no se ha actualizado desde marzo de 2013.

Puede ver la mayoría de las capacidades del eternicode datepicker en la página de demostración que le permite jugar con la configuración del selector de fecha y observar los resultados. Para obtener más detalles, consulte la http://bootstrap-datepicker.readthedocs.org/en/latest/ , que probablemente pueda consumir en su totalidad en menos de una hora.

Sin embargo, en caso de que esté impaciente, esta es una guía paso a paso muy breve sobre el caso de uso más simple y común para el selector de fecha.

Guía de inicio rápido

  1. Incluya las siguientes bibliotecas (versiones mínimas indicadas here ) en su página:

  2. Ponga un elemento de input en su página en alguna parte, por ejemplo

    <input id="my-date-input">

  3. Con jQuery, seleccione su entrada y llame al método .datepicker() :

    jQuery(''#my-date-input'').datepicker();

  4. Cargue su página y haga clic o tabice en su elemento de input . Aparecerá un datepicker:

añadir

z-index:1151;

a la hoja de estilo en

.datepicker

data-datepicker="datepicker" Debe ser date-provide="datepicker"

Además, incluyó 2 hojas de estilos bootstrap.css y bootstrap.min.css

También prefiero usar bootstrap-datepicker3.min.css que datepicker.less

Full Html:

<html> <head> <title>DatePicker Demo</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css"> <script src="js/jquery-1.7.1.js"></script> <script src="js/bootstrap-datepicker.js"></script> </head> <body> <form> <div class="input"> <input data-provide="datepicker" class="small" type="text" value="01/05/2011"> </div> </form> </body> </html>