구현

2017-02-06 1 views
0

그래서 부트 스트랩 - 날짜 선택기 레일 보석을 실행하고 내 양식에이를 구현하려는 해요 :구현

이 일을 양식 도우미로 보일 것입니다 방법
<div class="input-group date"> 
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
</div> 

$('#sandbox-container .input-group.date').datepicker({ 
    maxViewMode: 2, 
    multidate: true, 
    daysOfWeekDisabled: "0,6", 
    daysOfWeekHighlighted: "1,2,3,4,5", 
    todayHighlight: true 
}); 

? 나의 현재 코드는 다음과 같습니다

<div class="col-md-2 "> 
     <%= f.label :date %><br> 
     <%= f.text_field :date %> 
    </div> 

내가 jQuery 코드는 application.js로 이동합니다 가정합니다.

답변

1

당신은 다음과 같은이 작업을 수행 할 수 있습니다

<div class="col-md-2 "> 
    <%= f.label :date %><br> 
    <%= f.text_field :date, id: "id_datepicker" %> 
</div> 

<script type="text/javascript"> 
    $(function(){ 
    $('#id_datepicker').datepicker({ 
     maxViewMode: 2, 
     multidate: true, 
     daysOfWeekDisabled: "0,6", 
     daysOfWeekHighlighted: "1,2,3,4,5", 
     todayHighlight: true 
    }); 
    }); 
</script> 

jquery datepicker의 공식 문서로 다음, 당신은 jquery 내부에 코드를 삽입해야합니다.

https://jqueryui.com/datepicker/#default

+0

작동하지 않습니다. UI에서 날짜 선택 도구가 표시되지 않습니다. – Karolis

+0

@Karolis 내가 내 대답을 업데이트했습니다. 다시 확인해 볼 수 있습니까? –

+0

굉장해, 고마워! – Karolis