jQuery Datepicker và Timepicker cho cùng một trường nhập để bật lên một cái khác

Question

Tôi có một Datepicker và một Timepicker trong 2 trường nhập riêng biệt nhưng tôi cần phải kết hợp 2 trường nhập vào một cho một cuộc gọi cơ sở dữ liệu. Muốn biết liệu tôi chỉ có thể sử dụng 1 trường nhập cho cả hai điều khiển?

trước tiên gọi datepicker và người dùng sẽ nhấp vào ngày muốn và nó sẽ nhập giá trị, sau đó thanh thời gian sẽ bật lên và nối thêm ngày người dùng đã chọn trong hành động đầu tiên.

Tôi đang sử dụng các plug-ins jQuery UI Datepicker và Timepickr

Vì vậy, tôi có một cái gì đó như thế này

<input class="datepicker">2009-06-22</input> 
<input class="timepicker">12:00:00</input> 

Nhưng muốn một cái gì đó như thế này

<input class="datetimepicker">2009-06-22 12:00:00</input> 

<script type="text/javascript"> 
// Date and Time picker same input field 
$("#datepicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    onClose: function(dateText, inst) { 
     var tempDate = $("#datepicker").val(dateText); 
     $("#datepicker").timepickr({ 
     onClose: function(timeText, inst) { 
      var tempTime = $("#datepicker").val(dateText); 
      alert("Temp Time: '" + tempTime.val() + "'"); 
      $("#datepicker").val(tempDate.val() + ' ' + tempTime.val()); 
     } 
     });         
    } 
});    
</script> 

Answer 1

Dưới đây là một sự thay thế:

http://www.r-ip.ru/dev/datetimepicker/index.html

$('#datetimepicker').datetimepicker({ 
    dateFormat: 'yy-mm-dd', 
    timeFormat: ' hh:ii:ss' 
}); 

Answer 2

Bạn có thể liên kết sự kiện với sự kiện onClose() của trình ghi ngày tháng. Làm cho nó mở ra bộ chọn thời gian của bạn. Để cho datepicker viết giá trị cơ bản của đầu vào, và có timepicker nối thêm giá trị của nó sau một khoảng trống cho cùng một đầu vào.

1. Liên kết bộ chọn ngày để nhập.
2. Đính kèm phương pháp để mở trình ghi thời gian vào .onĐóng() sự kiện của bộ chọn ngày.
3. Thêm giá trị bộ chọn thời gian (có khoảng cách trước đó) vào giá trị đầu vào.

Cập nhật: Theo sau là cập nhật do câu hỏi được cập nhật.

Các tài liệu đưa ra một ví dụ ngắn gọn về cách để ràng buộc một sự kiện/hành động để đóng cửa của datepicker:

$('.selector').datepicker({ 
    onClose: function(dateText, inst) { ... } 
}); 

Trong ví dụ này, bạn có thể sử dụng chức năng của bạn sau "onClode:" để viết giá trị vào đầu vào, và bật lên thanh thời gian.

$(".selector").datepicker({ 
    onClose: function(dateText, inst) { 
    $(".selector").val(dateText); 
    // Raise Timepickr 
    } 
}); 

Answer 3

Bạn có thể thử kết hợp các yếu tố đầu từ cả hai điều khiển vào một mặt hàng như

$("#datetime").focus(function() { 
    var mydate = $("#date").val(); 
    var mytime = $("#time").val(); 
    if(mydate && mytime && !this.value) { 
     this.value = mydate + " " + mytime; 
    } 
}); 

Answer 4

Tôi muốn khuyên Any+Time(TM), trong đó bạn có thể kết hợp ngày/giờ trong một lĩnh vực duy nhất với một đơn , bộ chọn kết hợp ngày/giờ dễ sử dụng (và nhanh chóng!).

Answer 5

Vui lòng thanh toán link.

Tôi đã cập nhật một số vấn đề bố trí và thêm thanh trượt thứ hai, mà sẽ được kích hoạt nếu {showTime:true, time24h:true}

Bạn có thể tìm thấy một bản gốc tại Google Code.

Answer 6

Không phải jQuery, nhưng nó hoạt động tốt cho lịch theo thời gian: JavaScript Date Time Picker.

Chỉ cần ràng buộc sự kiện click để bật nó lên:

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

Cá nhân tôi tìm thấy điều này dễ dàng hơn nhiều để làm theo. Nhưng rõ ràng bạn có rất nhiều tùy chọn với nhiều plugin jquery sẵn có để thực hiện công việc của bạn.