jQuery UI: datepicker - Jak dodać przycisk Zamknij (obraz!) Na prawym górnym rogu?

Question

Chcę dodać przycisk zamykania po prawej stronie.

Nie chcę używać przycisku zamykania na dole z panelem przycisków.

Jak mogę to zrobić?

chcę coś jak „X”:

Answer 1

Można wstawić link w znacznikach i styl go jak chcesz, dołączenie obsługi onclick do niego, że będzie zadzwonić .datepicker("hide"), A built-in method z 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); 
    } 
}); 

Ponadto, aby zrobić miejsce dla przycisku zamykania, prawdopodobnie trzeba dostosować te style, aby przesunąć przycisk „następny miesiąc” na lewo i zrobić miejsce dla „blisko” ale ton:

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

Uwaga: Wziąłem powyższy kod JS od this proof of concept i dostosować go odpowiednio. Nie testował tego jednak.

Answer 2

Można zmienić położenie przycisku w ten sposób:

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

nadzieję, że to pomaga. Jeśli nie, daj mi znać. :)

Answer 3

Ciągle otrzymuję ten błąd:

$.datepicker.hide() is not a function 

poprzez Firebug stosując rozwiązanie @ dalbaeb użytkownika. Miał rację, ale musiałem go nieco poprawić, aby zamknąć go w datepicker.

To jak ja manipulowane i to pracował dla mnie:

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

po prostu zastąpić:

$.datepicker.hide(); 

z tym:

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

... i zamyka teraz datepicker! Mam nadzieję, że to pomoże!

Answer 4

Przesunąłem przycisk do góry, a następnie resztę w 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

Użyj tego, aby ukryć datepicker:

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

Answer 6

Zrobiłem to przez stylizacji przycisk Done

pierwsze, włączyć opcję showButtonPanel następnie zmienić jego tekst:

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

Następnie ukryj przycisk Today i styl e close button:

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