Utilisation du sélecteur de date jQuery avec un bouton de déclenchement personnalisé

Question

Comment faire pour que jQuery Datepicker s'ouvre par un bouton défini par l'utilisateur?

Answer 1

Il y a built-in support for this, ayant une icône ou un bouton à droite à droite de la zone de texte, comme ceci:

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

Si vous voulez montrer de un autre bouton, ou vraiment tout état de cause, appelez le show method, comme ceci:

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

You can try it here

Answer 2

Les échantillons par an ge comme un exemple de la façon de faire la datpicker apparaît en cliquant sur une icône:

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

Ceci est HTML pour l'icône de sélecteur de date

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

C'est fonction pour ouvrir & fermer datepicker on icon cliquer sur

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