부트 스트랩 datepicker가 한 번에 2 필드 씩 하나씩 추가됩니다.

Question

레일 3.2.9에서 부트 스트랩의 datepicker를 사용하여 날짜를 표시하고 있습니다. 단일 폼에서 두 필드에 대한 datepicker를 표시해야합니다. 첫 번째 필드를 클릭하면 datepicker가 팝업됩니다. 그런 다음 '탭'버튼을 클릭하면 첫 번째 날짜 표시기에 추가하여 두 번째 필드의 날짜 표시기가 팝업됩니다. 특정 필드의 onclick에 대해 한 번에 하나의 날짜 피커를 표시해야합니다. '탭'버튼을 클릭하면 첫 번째 필드의 datepicker가 숨겨지고 두 번째 필드의 datepicker가 팝업됩니다.

자바 스크립트 내가 자세한 내용은 이미지를 추가 한 위

<%= f.input :start_date, :as=>:string, :label =>"Start Date", :required => false, 
    :input_html=>{:readonly=>true, :value=>@user.start_date.blank? ? "" : @user.start_date} %> 

<%= f.input :end_date, :as=>:string, :label =>"End Date", :required =>false, 
    :input_html=>{:readonly=>true, :value=>@user.end_date.blank? ? "" : @user.end_date} %> 

<script type="text/javascript"> 
currentDatePicker('user_start_date'); 
currentDatePicker('user_end_date'); 
</script> 

,

function currentDatePicker(id){ 
var nowTemp = new Date(); 
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

$('#' + id).datepicker({ 
    format: "yyyy-mm-dd", 
    onRender: function(date) { 
     return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
    } 
}); 

} 뷰에서

이하 같다. 이 문제를 해결하도록 도와주세요.

Answer 1

날짜 선택 도구에 다른 ID를 사용하고 ID에 이벤트 처리를 사용할 수 있습니다. 두 번째 datepicker를 클릭하면 수동 첫 번째 datepicker를 숨 깁니다. 또는 datepicker의 autoclose 속성을 사용하십시오. $ ('# from'). datepicker ({autoclose : true, startDate : today.getDate.toString()}); $ ('# to'). datepicker ({autoclose : true, startDate : today.getDate.toString()});

양식 및 #to는 ID입니다.

Answer 2

정확히 동일한 문제가 발생했습니다. 나는 다음을 수행하여 그것을 해결했다 :

var pickers = $(".datepicker") 
    .datepicker({ 
     format: "mm/dd/yy", 
     autoclose: true 
    }) 
    .on("show", function(e){ 
     pickers.not(e.currentTarget).datepicker("hide"); 
    });