jQuery UI: datepicker - Cómo agregar Botón de cerrar (Imagen!) En la parte superior derecha?

Question

Quiero agregar un botón de cierre en la parte superior derecha.

No quiero utilizar el botón de cerrar en la parte inferior con el panel de botones.

¿Cómo puedo hacer eso?

quiero algo así como la "X":

Answer 1

Puede insertar el enlace en el marcado y el estilo como desee, adjuntando un controlador onclick a ella que llamará .datepicker("hide"), un built-in method del planificador de evento:

$("#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); 
    } 
}); 

Además, para hacer espacio para el botón de cierre, es probable que necesite ajustar estos estilos con el fin de mover el botón 'del próximo mes a la izquierda y hacer espacio para 'cerrar' pero tonelada:

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

Nota: que he tomado el código JS encima de this proof of concept y se ajusta en consecuencia. Aunque no lo ha probado.

Answer 2

Usted puede cambiar la ubicación del botón de la siguiente manera:

$("#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"); 
    }); 

espero que ayude. Si no, házmelo saber. :)

Answer 3

seguí recibiendo este error:

$.datepicker.hide() is not a function 

a través de Firebug mediante una solución de @ dalbaeb. Era correcto, pero tuve que ajustarlo un poco para que cerrara el marcador de fecha.

Así es como me pellizqué y funcionó para mí:

$("#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); 
} 
}); 

Acabo de cambiar:

$.datepicker.hide(); 

Con esta:

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

... y se cierra el datepicker ahora! ¡Espero eso ayude!

Answer 4

Moví el botón hacia arriba y luego hice el resto en 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

Utilice esta opción para ocultar el selector de fechas:

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

Answer 6

he hecho esto por el estilo del botón Done

En primer lugar, activar la opción showButtonPanel a continuación, cambiar su texto:

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

A continuación, oculte el botón Today y el estilo th e botón de cierre:

#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; 
}