jQuery datepicker mà không cần nhập

Question

Tôi có một ứng dụng web khá phức tạp mà tôi muốn thêm một số giao diện người dùng chọn ngày vào.

Vấn đề tôi đang gặp phải là tôi đã không thể tìm ra từ các tài liệu về cách thực sự kiểm soát cách thức và thời điểm trình hiển thị ngày xuất hiện. Không có yếu tố hình thức nào liên quan (và không, tôi sẽ không thêm một trường biểu mẫu bí mật), vì vậy cách tiếp cận đơn giản chết đơn giản sẽ không hoạt động.

Tôi hy vọng một người nào đó có thể cung cấp một hướng dẫn nhỏ về một mẫu cho phép tôi gọi trình ghi ngày tháng theo chương trình. Tôi tin rằng tôi biết làm thế nào tôi sẽ sử dụng các sự kiện tùy chỉnh của datepicker để initalize và vị trí của nó, và để phục hồi các giá trị được lựa chọn khi người dùng loại bỏ nó. Tôi chỉ gặp khó khăn trong việc tạo ra một datepicker, vì tôi không ghép nối nó với một phần tử.

Đây là những gì không phải là làm việc:

function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only 
    var bIsDate = !isNaN((new Date(sCurrent)).getTime()); 

    jQuery.datepicker('dialog', 
     (bIsDate ? new Date(sOriginal) : new Date()), // date 
     function() { console.log('user picked a date'); }, // onSelect 
     null, // settings (i haz none) 
     event // position 
    ); 

} 

Lý do là "jQuery.datepicker" không phải là một hàm. (Tôi đang làm điều đó sai.)

Tôi không kết hôn với cách tiếp cận 'hộp thoại' - đó chỉ là phỏng đoán tốt nhất của tôi khi gọi một thiết bị mà không cần tham chiếu đến phần tử biểu mẫu.

Tôi đang sử dụng jQuery 1.4.3 và 1.8.6 jQueryUI

Answer 1

Tôi đọc qua mã datepicker, và dường như, như viết, datepicker phải gắn liền với một thẻ đầu vào, div, hoặc span.

Vì vậy, nếu phản đối duy nhất của bạn là sử dụng một yếu tố hình thức, sau đó gắn vào một div hoặc span có lẽ là lựa chọn tốt nhất của bạn, và có một ví dụ về làm thế nào để làm điều đó ở đây: https://stackoverflow.com/a/1112135

Nếu bạn tìm một số cách khác để kiểm soát datepicker, sau đó bạn có thể phải mở rộng mã datepicker để làm những gì bạn muốn nó làm, và nếu bạn đi con đường đó, tôi khuyên bạn nên bắt đầu bằng cách xem phương thức riêng _inlineDatepicker trong datepicker code, là phương thức gắn datepicker vào thẻ div hoặc span.

Answer 2

Bạn phải xác định lĩnh vực Input động sau đó đính kèm datepicker bạn lớp vừa tạo Nếu không có lĩnh vực I Do not nghĩ vậy Nó sẽ làm việc.

<input type="hidden" id="yourField" /> 

và sử dụng

$("#yourField").datepicker({ 
     buttonImage: '../yourImage.png', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'both', 
    }); 

Answer 3

Từ trang plugin: http://jqueryui.com/demos/datepicker/#inline

<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
</script> 


<div class="demo"> 
    Date: <div id="datepicker"></div> 
</div><!-- End demo --> 

Display datepicker nhúng trong trang thay vì trong một lớp phủ. Chỉ cần gọi .datepicker() trên div thay vì đầu vào.