jQuery UI: datepicker - Как добавить кнопку закрытия (изображение!) Вверху справа?

Question

Я хочу добавить кнопку закрытия справа вверху.

Я не хочу использовать кнопку закрытия внизу с помощью панели кнопок.

Как я могу это сделать?

Я хочу что-то вроде «X»:

Answer 1

Вы можете вставить ссылку в разметке и стиль его, как вы хотите, приложив обработчик OnClick к нему, который будет вызывать .datepicker("hide"), built-in method из 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); 
    } 
}); 

Кроме того, чтобы освободить место для кнопки закрытия, вы, вероятно, нужно настроить эти стили, чтобы переместить кнопку «следующий месяц» на левую и освободить место для «закрыть» но т:

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

Примечание: Я взял выше код JS от this proof of concept и отрегулировать его соответствующим образом. Однако не проверял.

Answer 2

Вы можете изменить расположение кнопки таким образом:

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

Надеется, что это помогает. Если нет, дайте мне знать. :)

Answer 3

Я постоянно получаю эту ошибку:

$.datepicker.hide() is not a function 

через поджигатель, используя решение @ dalbaeb в. Это было правильно, но мне пришлось немного подправить его, чтобы закрыть его.

Это, как я подправил его, и он работал на меня:

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

Я только что заменил:

$.datepicker.hide(); 

С этим:

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

... и она закрывает датапикер сейчас! Надеюсь, поможет!

Answer 4

Я переместил пуговицу на верх, а затем оставил в 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

Используйте это, чтобы скрыть DatePicker:

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

Answer 6

Я сделал это с помощью стилизации кнопки Done

Первое, включите опцию showButtonPanel затем изменить его текст:

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

Затем скрыть кнопку Today и стиль th e кнопка закрытия:

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