jquery - español - datepicker bootstrap ejemplos

Detecta el cambio a la fecha seleccionada con bootstrap-datepicker

Question

Tengo un elemento de entrada con un datepicker adjunto creado usando bootstrap-datepicker .

<div class="well">
<div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">
<input type="text" id="date-daily">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$(''#dp3'').datepicker();
$(''#date-daily'').val(''0000-00-00'');
$(''#date-daily'').change(function () {
console.log($(''#date-daily'').val());
});
});
</script>

Cuando el usuario cambia la fecha al escribir directamente en el elemento de entrada, puedo obtener el valor con el evento onChange del elemento de entrada, como se muestra arriba. Pero cuando el usuario cambia la fecha de datepicker (es decir, al hacer clic en una fecha en el calendario), no se llama al controlador onChange.

¿Cómo puedo detectar cambios en la fecha seleccionada que se realizan a través del datepicker, en lugar de escribir en el elemento de entrada?

Answer 1

Aquí está mi código para eso:

$(''#date-daily'').datepicker().on(''changeDate'', function(e) {
//$(''#other-input'').val(e.format(0,"dd/mm/yyyy"));
//alert(e.date);
//alert(e.format(0,"dd/mm/yyyy"));
//console.log(e.date);
});

Simplemente elimine el comentario que prefiera. La primera opción cambia el valor de otro elemento de entrada. El segundo alerta la fecha con el formato predeterminado datepicker. El tercero alerta la fecha con su propio formato personalizado. La última opción muestra el log (fecha de formato predeterminada).

Es su elección usar e.date, e.dates (para entrada de fecha múltiple) o e.format (...).

aquí algo más de información

Answer 2

Prueba esto:

$("#dp3").on("dp.change", function(e) {
alert(''hey'');
});

Answer 3

Puede usar el evento onSelect

 $("#date-daily").datepicker({
onSelect: function(dateText) {
alert($(''#dp3'').val());
}
});

Se invoca cuando se selecciona el marcador de fecha. La función recibe la fecha seleccionada como texto y la instancia datepicker como parámetros. esto se refiere al campo de entrada asociado.

MIRA AQUÍ

Answer 4

Todas las demás respuestas están relacionadas con jQuery UI datepicker , pero la pregunta es sobre bootstrap-datepicker .

Puede usar el evento changeDate para desencadenar un evento de cambio en la entrada relacionada, y luego manejar ambas formas de cambiar la fecha desde el controlador onChange :

changeDate

Despedido cuando se cambia la fecha.

Ejemplo:

$(''#dp3'').datepicker().on(''changeDate'', function (ev) {
$(''#date-daily'').change();
});
$(''#date-daily'').val(''0000-00-00'');
$(''#date-daily'').change(function () {
console.log($(''#date-daily'').val());
});

Aquí hay un violín funcional: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Answer 5

$(function() {
$(''input[name="datetimepicker"]'').datetimepicker({
defaultDate: new Date()
}).on(''dp.change'',function(event){
$(''#newDateSpan'').html("New Date: " + event.date.format(''lll''));
$(''#oldDateSpan'').html("Old Date: " + event.oldDate.format(''lll''));
});
});

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="col-xs-12">
<input name="datetimepicker" />
<p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p>
</div>
</div>

Answer 6

$(document).ready(function(){
$("#dateFrom").datepicker({
todayBtn: 1,
autoclose: true,
}).on(''changeDate'', function (selected) {
var minDate = new Date(selected.date.valueOf());
$(''#dateTo'').datepicker(''setStartDate'', minDate);
});
$("#dateTo").datepicker({
todayBtn: 1,
autoclose: true,}) ;
});