Utilizzo del selettore di date jQuery con un pulsante di attivazione personalizzato

Question

Come si attiva jQuery Datepicker con un pulsante definito dall'utente?

Answer 1

C'è built-in support for this, avendo un'icona o un pulsante a destra a destra della casella di testo, in questo modo:

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

Se si desidera visualizzare da un altro pulsante, o realmente ogni caso, chiamare il show method, in questo modo:

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

You can try it here

Answer 2

i campioni pa ge come un esempio di come rendere il datpicker apparire facendo clic su un'icona:

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

Questo è HTML per l'icona di selezione data

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

Questo è funzione per open & close datepicker sull'icona icona

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