Cách đặt chế độ ghi ngày tháng Pikaday luôn hiển thị

Question

Tôi đang sử dụng Pikaday javascript datepicker.

Chức năng mặc định là đính kèm nó vào đầu vào trong đó việc nhấn vào đầu vào sẽ tải datepicker và vị trí của nó sẽ tương ứng với đầu vào.

Điều tôi muốn là sử dụng thư viện này để hiển thị lịch luôn hiển thị. Tôi đã thử nhiều thứ mà không thành công như gắn nó vào một div. Tôi muốn có thể có nó luôn luôn được hiển thị và có thể kiểm soát vị trí của nó.

Bất kỳ ý tưởng nào?

Answer 1

Trong trường hợp này giúp người khác:

Kể từ thư viện Pikaday là không thực sự có nghĩa là để được sử dụng theo cách này, tôi đã phải thực hiện một công trình xung quanh. Điều tốt là nó không yêu cầu sửa đổi mã Pikaday và do đó hoàn toàn tương thích với các phiên bản tương lai (giả sử chúng không đổi tên chức năng 'ẩn').

Đầu tiên tôi chỉ đính kèm bộ chọn ngày để một div trống và di chuyển nó xung quanh sử dụng css cho đến khi nó ở đúng chỗ:

var datePicker = new Pikaday({ 
    field: $('#empty-div')[0] 
}); 

Sau đó, tôi chỉ đơn giản là proxy ẩn chức năng Pikaday và tạm thời đặt nó vào một noop :

var hideFun = datePicker.hide; 
datePicker.hide = function() {/*noop*/} 

Bây giờ, tôi có thể hiển thị bộ chọn ngày và không lo lắng về nó biến mất vào tôi (vì nội nó sẽ gọi hàm noop ẩn mới):

datePicker.show(); 

Cuối cùng, khi tôi đã sẵn sàng để khôi phục lại hoạt động ban đầu của datepicker, tôi thiết lập lại các chức năng để một bản gốc, và ẩn datepicker (kể từ khi tôi đang thể hiện nó trong một phương thức):

datePicker.hide = hideFun; 
datePicker.hide(); 

Answer 2

Lúc đầu, tôi cũng đã thực hiện một giải pháp hacky, nhưng sau đó tôi tìm thấy một cách thường xuyên để làm Pikaday datepicker luôn có thể nhìn thấy:

var picker = new Pikaday(
{ 
    field: document.getElementById('datepicker'), 
    bound: false, 
    container: document.getElementById('container'), 
}); 

với ví dụ ở đây: http://dbushell.github.io/Pikaday/examples/container.html