Interfaccia utente jQuery: datepicker - Come aggiungere il pulsante di chiusura (Immagine!) In alto a destra?

Question

Voglio aggiungere un pulsante di chiusura nella parte superiore destra.

Non voglio utilizzare il pulsante di chiusura in basso con il pannello dei pulsanti.

Come posso farlo?

voglio qualcosa come la "X":

Answer 1

È possibile inserire il link nel markup e lo stile come si desidera, allegando un gestore onclick ad esso che chiamerà .datepicker("hide"), un built-in method di datepicker:

$("#datepicker").datepicker({ 
    beforeShow: function(input) { 
     setTimeout(function() { 
      var headerPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-header"); 

      $("<button>", { 
       text: "Close", 
       click: function() { 
        $.datepicker.hide(); 
       } 
      }).appendTo(headerPane); 
     }, 1); 
    } 
}); 

Inoltre, per fare spazio per il pulsante di chiusura, avrete probabilmente bisogno di regolare questi stili in modo da spostare il pulsante 'il prossimo mese' sopra a sinistra e fare spazio per 'chiudere' ma ton:

.ui-datepicker .ui-datepicker-next { right:2px; } 
.ui-datepicker .ui-datepicker-next-hover { right:1px; } 

Nota: ho preso il codice JS sopra da this proof of concept e regolato di conseguenza. Tuttavia non l'ha provato.

Answer 2

È possibile modificare la posizione del pulsante in questo modo:

$("#id_from_date").datepicker({ 
     closeText: "X", 
     showButtonPanel: true, 
    }); 
    $('#id_from_date').click(function() { 
     $(this).datepicker("show"); 
     var button = $(".ui-datepicker-close"); 
     $(".ui-datepicker-buttonpane").remove(); 
     $("#ui-datepicker-div").children().first().before(button); 
     button.css("margin-left", button.parent().width() - 30 + "px"); 
    }); 

Speranza che aiuta. In caso contrario, fammi sapere. :)

Answer 3

ho continuato a ottenere questo errore:

$.datepicker.hide() is not a function 

via Firebug utilizzando la soluzione @ di dalbaeb. Era giusto, ma ho dovuto modificarlo un po 'per farlo chiudere il datepicker.

Ecco come ho ottimizzato e ha funzionato per me:

$("#datepicker").datepicker({ 
beforeShow: function(input) { 
    setTimeout(function() { 
     var headerPane = $(input) 
     .datepicker("widget") 
     .find(".ui-datepicker-header"); 
     $("<button>", { 
      text: "Close", 
      click: function() { 

      $('#ui-datepicker-div').hide();   

      } 
     }).appendTo(headerPane); 
    }, 1); 
} 
}); 

Ho appena sostituito:

$.datepicker.hide(); 

Con questo:

$('#ui-datepicker-div').hide(); 

... e si chiude il datario ora! Spero che sia d'aiuto!

Answer 4

Ho spostato il pulsante in alto e ho fatto il resto in CSS.

$("[data-date-picker]") 
    .datepicker({ 
    showButtonPanel: true, 
    closeText: "X" 
    }) 
    .on('click', function() { 
    var datepicker = $('#ui-datepicker-div') 
    datepicker.prepend(datepicker.find(".ui-datepicker-buttonpane")); 
    }); 

Answer 5

Utilizzare questo per nascondere il datepicker:

$("#datepicker").datepicker('hide'); 

Answer 6

ho fatto questo per lo styling il pulsante Done

In primo luogo, abilitare l'opzione showButtonPanel poi cambiare è il testo:

$(".calendar").datepicker({ 
    showButtonPanel: true, 
    closeText: '×' 
}); 

Quindi nascondere il pulsante Today e lo stile e pulsante di chiusura:

#ui-datepicker-div .ui-datepicker-current { 
    display: none; 
} 
#ui-datepicker-div .ui-datepicker-close { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border: none; 
    background: transparent; 
    box-shadow: none; 
    text-shadow: none; 
    font-size: 26px; 
    line-height: 1; 
    padding: 3px 8px; 
    color: #cc6a6a; 
    font-weight: 600; 
    opacity: 0.8; 
} 
#ui-datepicker-div .ui-datepicker-close:focus { 
    outline: none; 
} 
#ui-datepicker-div .ui-datepicker-close:hover { 
    opacity: 1; 
}