Giao diện người dùng jQuery: datepicker - Cách thêm Nút đóng (Hình ảnh!) Ở trên cùng bên phải?

Question

Tôi muốn thêm nút đóng ở phía trên cùng bên phải.

Tôi không muốn sử dụng nút đóng ở dưới cùng bằng bảng điều khiển nút.

Tôi có thể làm như thế nào?

Tôi muốn một cái gì đó giống như "X":

Answer 1

Bạn có thể chèn liên kết trong đánh dấu và tạo kiểu theo ý muốn, gắn một handler onclick để nó sẽ gọi .datepicker("hide"), một built-in method của 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); 
    } 
}); 

Ngoài ra, để tạo khoảng trống cho nút đóng, bạn có thể cần phải điều chỉnh các kiểu này để di chuyển nút 'tháng tiếp theo' sang bên trái và tạo khoảng trống cho 'đóng' nhưng tấn:

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

Lưu ý: tôi đã đưa ra những mã JS trên từ this proof of concept và điều chỉnh nó cho phù hợp. Đã không thử nghiệm nó mặc dù.

Answer 2

Bạn có thể thay đổi vị trí của các nút theo cách này:

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

Hy vọng nó giúp. Nếu không, hãy cho tôi biết. :)

Answer 3

tôi vẫn tiếp tục nhận được lỗi này:

$.datepicker.hide() is not a function 

qua firebug sử dụng giải pháp @ dalbaeb của. Nó đã đúng nhưng tôi đã phải tinh chỉnh nó một chút để có được nó để đóng datepicker.

Đây là cách tôi tinh chỉnh nó và nó làm việc cho tôi:

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

Tôi vừa thay thế:

$.datepicker.hide(); 

Với điều này:

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

... và nó đóng các datepicker ngay bây giờ! Hy vọng nó giúp!

Answer 4

Tôi đã di chuyển nút chế độ lên trên cùng và sau đó thực hiện phần còn lại trong 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

Sử dụng này để ẩn datepicker:

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

Answer 6

Tôi đã làm điều này bằng cách tạo kiểu tóc nút Done

Đầu tiên, bạn hãy chọn showButtonPanel sau đó thay đổi đó là văn bản:

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

Sau đó ẩn nút Today và kiểu thứ e nút đóng:

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