2012-06-09 31 views
5

Tôi đang sử dụng Jquery Timepicker.Jquery TimePicker: Cách tự động thay đổi tham số

Tôi có hai trường nhập - để Chấp nhận thời gian.

<input id="startTime" size="30" type="text" /> 
<input id="endTime" size="30" type="text" /> 

Tôi đang sử dụng một bộ đếm thời jquery UI theo documentation

$('#startTime').timepicker({ 
    'minTime': '6:00am', 
    'maxTime': '11:30pm', 
    'onSelect': function() { 
     //change the 'minTime parameter of #endTime <--- how do I do this ? 
    } 
}); 
$('#endTime').timepicker({ 
    'minTime': '2:00pm', 
    'maxTime': '11:30pm', 
    'showDuration': true 
}); 

Tôi muốn rằng khi timePicker đầu tiên được chọn, 'minTime' tham số cho phần thứ hai được thay đổi. Về cơ bản, tôi đang cố gắng thu thập thời gian bắt đầu và thời gian kết thúc cho một số hoạt động nhất định. Và tôi muốn rằng hộp nhập thứ hai hiển thị các tùy chọn từ giá trị của trường nhập đầu tiên (chính thời gian bắt đầu).

+0

Tôi nghĩ cùng một câu hỏi sẽ hợp lệ đối với các phần tử JQuery khác. –

+0

Trang đó có ví dụ (trang cuối cùng) nơi trang này thực hiện cùng với [nguồn] (http://jonthornton.github.com/jquery-timepicker/lib/datepair.js). – sachleen

Trả lời

6

Bạn sẽ làm một cái gì đó như thế này,

$('#startTime').timepicker({ 
       'minTime': '6:00am', 
       'maxTime': '11:30pm', 
        'onSelect': function() { 

        $('#endTime').timepicker('option', 'minTime', $(this).val());       
       } 
      }); 

gì bạn đang làm ở đây là trong onSelect chức năng của #startTime, bạn thiết lập các tùy chọn minTime của #endTime với giá trị của #startTime

Xem này JS Fiddle.

+0

Tuyệt vời! Cảm ơn bạn đời. Điều này làm việc. Chúc mừng! –

+3

nó không làm việc cho tôi cũng như JS Fiddle của bạn –

+1

JS Fiddle này cho thấy không có sự thay đổi của minTime. Nó luôn luôn là 2PM – ivanacorovic

4

Tiện ích jQuery-UI thường hỗ trợ phương thức options cho phép bạn thay đổi các tùy chọn trên phiên bản hiện tại. phương pháp Widget được gọi bằng cách cung cấp một chuỗi như là đối số đầu tiên các cuộc gọi plugin:

$(...).widget_name('method_name', arg...) 

vì thế này nên làm việc cho bạn:

$('#endTime').timepicker('option', 'minTime', new_min_time) 
+0

Cảm ơn ngài! Điều này hữu ích :) –

+0

Tùy chọn hoạt động hoàn hảo, Điều này sẽ được đánh dấu là câu trả lời đúng! – ivanacorovic

6

Bạn có thể đi cho onchange sự kiện:

 $('#startTime').timepicker(); 

     $('#endTime').timepicker({ 
      'minTime': '12:00am', 
      'showDuration': true 
     }); 

     $('#startTime').on('changeTime', function() { 
      $('#endTime').timepicker('option', 'minTime', $(this).val()); 
     }); 

Tôi đã sửa đổi mã một bit được đăng trong trả lời đầu tiên ở đây là fiddle hoạt động cho nó http://jsfiddle.net/NXVy2/215/

Bạn có thể sử dụng ('thay đổi' ... quá

$('#startTime').on('change', function() { 
     $('#endTime').timepicker('option', 'minTime', $(this).val()); 
    }); 
+0

Câu trả lời được chấp nhận không hoạt động (nữa?), Nhưng điều này làm việc hoàn hảo cho tôi. – nematoth

+0

Đây là câu trả lời đúng! Cám ơn vì cái này – marknt15

Các vấn đề liên quan