Uso del selector de fecha jQuery con un botón de activación personalizado

Question

¿Cómo puedo hacer que jQuery Datepicker se abra con un botón definido por el usuario?

Answer 1

Hay built-in support for this, que tiene un icono o botón de la derecha a la derecha del cuadro de texto, así:

$("#datepicker").datepicker({ 
    showOn: 'button', 
    buttonImage: 'images/calendar.gif', 
    buttonImageOnly: true 
}); 

Si desea probarlo por medio de otro botón, o en realidad cualquier caso, llamar a la show method, como esta:

$("#myButton").click(function() { 
    $("#datepicker").datepicker("show"); 
}); 

You can try it here

Answer 2

La muestras pa ge como un ejemplo de cómo hacer que el datpicker aparece haciendo clic en un icono:

here

Answer 3

$("#checkin").datepicker({ 
 
    dateFormat: 'dd/mm/yy', 
 
    minDate: '0', 
 
    changeMonth: true, 
 
    numberOfMonths: 1 
 
});

.datedivmng{ 
 
    float: left;position: relative; 
 
} 
 
.datedivmng .datepicker{ 
 
    position: relative;width: 87%!important; 
 
    cursor: pointer; 
 
} 
 
.datedivmng:after { 
 
    /* symbol for "opening" panels */ 
 
    font-family: 'FontAwesome'; 
 
    content: "\f073"; 
 
    color: #329ac4; 
 
    font-size: 16px; 
 
    text-shadow: none; 
 
    position: absolute; 
 
    vertical-align: middle; 
 
    pointer-events: none; 
 
    float: right; 
 
    top: 2px; 
 
    right: 7px; 
 
}

<div class="datedivmng"> 
 
    <input type="text" id="checkin" name="checkin" value="" /></div>

Answer 4

Este es el HTML para el icono de selección de fecha

onclick="show_date_picker('#datepicker_id'); on you icon element 

Esto es función para abrir & cerrar datepicker en el icono haga clic en

function show_date_picker(source_datepicker){ 
    if($(source_datepicker).datepicker("widget").is(":visible")){ 
     $(source_datepicker).datepicker("hide"); 
    }else{ 
     $(source_datepicker).datepicker("show"); 
    } 
}