Bộ chọn ngày / giờ của jQuery [đã đóng]

Tôi đã tìm kiếm một plugin jQuery tốt có thể xử lý cả ngày và giờ. Giao diện người dùng cốt lõi DatePickerrất tuyệt, nhưng thật không may, tôi cũng cần phải có thời gian.

Tôi đã tìm thấy một vài bản hack để DatePicker hoạt động theo thời gian, nhưng tất cả chúng đều có vẻ không phù hợp và Google sẽ không tạo ra bất cứ điều gì tốt đẹp.

Có một plugin jQuery tốt để chọn ngày và giờ trong một điều khiển UI với giao diện có thể sử dụng không?

Cho đến nay, tùy chọn bộ chọn DateTime đẹp nhất và đơn giản nhất là http://trentrichardson.com/examples/timepicker/ .

Nó là một phần mở rộng của Datepicker jQuery UI vì vậy nó sẽ hỗ trợ các chủ đề tương tự cũng như nó hoạt động rất giống nhau, cú pháp tương tự, v.v. Điều này nên được đóng gói với imo UI UI.

@David, cảm ơn lời khuyên! @fluid_chnes, tôi vừa phát hành phiên bản Any + Time (TM) 3.x sử dụng jQuery thay vì Prototype và có giao diện được cải thiện nhiều, vì vậy tôi hy vọng nó hiện đáp ứng nhu cầu của bạn:

http://www.ama3.com/anytime/

Bất kỳ vấn đề, xin vui lòng cho tôi biết thông qua liên kết bình luận trên trang web của tôi!

Theo quan điểm của tôi, ngày và giờ nên được xử lý như hai hộp đầu vào riêng biệt để nó có thể sử dụng và hiệu quả nhất cho người dùng nhập. Hãy để người dùng nhập một thứ tại một thời điểm là một nguyên tắc tốt, imho.

Tôi sử dụng UI DatePicker lõi và bộ chọn thời gian sau.

Cái này được lấy cảm hứng từ một Lịch Google sử dụng:

jQuery timePicker :
ví dụ: http://labs.perifer.se/timedatepicker/
dự án trên github: https://github.com/perifer/timePicker

Tôi thấy nó là tốt nhất trong số tất cả các lựa chọn thay thế. Người dùng có thể nhập nhanh, trông sạch sẽ, đơn giản và cho phép người dùng nhập thời gian cụ thể xuống từng phút.

PS: Theo quan điểm của tôi: thanh trượt (được sử dụng bởi một số bộ chọn thời gian thay thế) mất quá nhiều lần nhấp và yêu cầu độ chính xác của chuột từ người dùng (làm cho đầu vào chậm hơn).

Trải nghiệm tốt nhất của tôi với một người hẹn hò là với AnyTime dựa trên nguyên mẫu . Tôi biết đó không phải là jQuery, nhưng nó vẫn có thể là sự thỏa hiệp cho bạn. Tôi biết hoàn toàn không có nguyên mẫu, và nó vẫn đủ dễ để làm việc với.

Một cảnh báo tôi đã tìm thấy: nó không tương thích về phía trước trên một số trình duyệt. Đó là, nó không hoạt động với phiên bản nguyên mẫu mới hơn trên Chrome.

Chỉ cần thêm vào thông tin ở đây, Dự án Fluid có một bài viết wiki tuyệt vời tổng quan về một số lượng lớn các công cụ chọn ngày và / hoặc thời gian ở đây .

Tôi đã nghiên cứu điều này chỉ gần đây và vẫn chưa tìm thấy một công cụ chọn ngày tốt bao gồm cả công cụ chọn thời gian đàng hoàng . Cuối cùng, thứ tôi sử dụng là DatePicker tuyệt vời của Eyecon , với hai lần thả xuống đơn giản theo thời gian. Tôi đã cố gắng sử dụng Timepickr.js , có vẻ như là một cách tiếp cận thực sự tốt đẹp.

Tôi đã gặp vấn đề tương tự. Tôi thực sự đã phát triển bằng cách sử dụng lập trình phía máy chủ, nhưng tôi đã tìm kiếm nhanh để thử và giúp bạn và tìm thấy điều này.

Có vẻ ổn, đã không nhìn vào nguồn quá nhiều, nhưng dường như hoàn toàn là JavaScript.

Hãy xem:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htmlm

Đây là liên kết trang demo:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

chúc may mắn

Đây là một số mã tôi sử dụng để người dùng chọn một datetimepicker, đặt datetime và để datetimepicker khác thêm một phút vào thời điểm đó.

Tôi cần điều này để kiểm soát thuốc tùy chỉnh ....

Dù sao, nghĩ rằng nó có thể giúp đỡ người khác vì tôi không thể tìm thấy câu trả lời bất cứ nơi nào trực tuyến ...

(ít nhất không phải là một câu trả lời đầy đủ)

Hãy nhớ rằng 60000 được thêm vào, thêm một phút. (60 * 1000 mili giây)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });

Hãy xem các plugin JavaScript sau đây.

Lịch Javascript với ngày và giờ

Tôi đã làm cho nó đơn giản nhất có thể. nhưng nó vẫn còn trong những ngày đầu của nó. Hãy cho tôi biết thông tin phản hồi để tôi có thể cải thiện nó.

Không phải jQuery, nhưng nó hoạt động tốt cho một lịch với thời gian: Bộ chọn thời gian ngày JavaScript .

Tôi chỉ ràng buộc sự kiện nhấp để bật lên:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

Tôi thực hiện một chức năng như thế này:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Sau đó, tôi sử dụng công cụ cập nhật giao diện người dùng jQuery như thế này:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

Vì vậy, tôi nhận được giá trị như thế này: 2010-10-31 12:41:57

Chúng tôi gặp khó khăn khi tìm một cái hoạt động theo cách chúng tôi muốn nó nên tôi đã viết một cái. Tôi duy trì nguồn và sửa lỗi khi chúng phát sinh cộng với hỗ trợ miễn phí.

http://www.yart.com.au/Resource/Programming/ASP-NET-JQuery-Date-Time-Control.aspx