Cách mở Datepicker UI thứ hai khi đóng cửa sổ đầu tiên

Question

Tôi đang cố gắng thêm một số chức năng vào biểu mẫu bằng Datepicker của UI của jQuery.

Khi người dùng chọn ngày đến (onSelect), một vài điều nên xảy ra:

1. Cập nhật sự ra đi đến 3 ngày kể từ ngày đến (Điều này làm việc bây giờ :))
2. Chia ngày khởi hành trong 3 và thêm từng phần vào trường nhập (xem ví dụ về ngày đến trong Fiddle)
3. Khi ngày đến-datepicker đóng (onClose), trình khởi động-datepicker sẽ tự động mở, mặc định là d ate được chọn tại điểm 1 (ví dụ: http://www.kayak.es)

Tôi đã đạt được điểm 1 để làm việc, nhưng tôi bị mất một chút với các tính năng khác. Nếu bất cứ ai có thể chỉ cho tôi cách thực hiện điều này hoặc giúp tôi đi đúng hướng sẽ thực sự tuyệt vời! Tôi vẫn là người mới bắt đầu nhưng học nhanh.

Here's một Fiddle về những gì tôi có bây giờ: http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

Chia ngày khởi hành trong vòng 3 và thêm từng phần đến một lĩnh vực đầu vào

Hình như bạn đã có mã bằng văn bản cho điều này trong các onSelect xử lý của datepicker đích. Thật không may, nó trông giống như setDatedoes not trigger that event và bạn không thể kích hoạt theo cách thủ công.Những gì tôi muốn giới thiệu là phá vỡ mã mà ra thành một chức năng riêng biệt mà bạn có thể gọi từ cả hai nơi:

function splitDepartureDate(dateText) { 
    var depSplit = dateText.split("-", 3); 
    $('#alt-vertrek-d').val(depSplit[0]); 
    $('#alt-vertrek-m').val(depSplit[1]); 
    $('#alt-vertrek-y').val(depSplit[2]); 
} 

Sau đó thay đổi khởi datepicker bạn onSelect handler để trỏ đến hàm:

$('#vertrek').datepicker({ 

    // Prevent selecting departure date before arrival: 
    beforeShow: customRange, 
    onSelect: splitDepartureDate 
}); 

Cuối cùng, gọi hàm từ handler onSelect sự kiện của bạn đến:

/* snip: */ 

// Populate departure date field 
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d'); 
nextDayDate.setDate(nextDayDate.getDate() + 3); 
$('#vertrek').datepicker('setDate', nextDayDate); 

// Manually call splitDepartureDate 
splitDepartureDate($("#vertrek").val()); 

---

Khi sự xuất hiện-datepicker đóng (onClose), sự ra đi-datepicker nên mở tự động, mặc định vào ngày đã chọn tại điểm 1

Đây là chỉ là vấn đề sử dụng onClose xử lý sự kiện:

onClose: function() { 
    $("#vertrek").datepicker("show"); 
} 

Dưới đây là ví dụ cập nhật của bạn: http://jsfiddle.net/zXMke/

Answer 2

điểm 3 câu trả lời:

$(function() { 
    $('#aankomst').datepicker({ 
    onClose: function(dateText, instance) { 
     $('#vertrek').datepicker('show'); 
    },  
    onSelect: function(dateText, instance) { 

     // Split arrival date in 3 input fields       
     var arrSplit = dateText.split("-"); 
     $('#alt-aankomst-d').val(arrSplit[0]); 
     $('#alt-aankomst-m').val(arrSplit[1]); 
     $('#alt-aankomst-y').val(arrSplit[2]); 

     // Populate departure date field 
     var nextDayDate = $('#aankomst').datepicker('getDate', '+3d'); 
     nextDayDate.setDate(nextDayDate.getDate() + 3); 
      $('#vertrek').datepicker('setDate', nextDayDate); 
      }     
     }); 
}); 

bạn đã có giải pháp cho điểm 2?

Chúc mừng, Daddy

Answer 3

Trả lời câu hỏi của tiêu đề:

$("#firsDate").datepicker('option',"onClose", function() { $("#secondDate").datepicker("show"); }); 

Nguồn:

http://api.jqueryui.com/datepicker/#method-show

http://api.jqueryui.com/datepicker/#option-onClose

Tôi khuyên bạn nên sử dụng onSelect thay vì sự kiện onClose để chắc chắn rằng ngày 1 đã được được chọn trước khi mở trình ghi ngày tháng thứ hai.