テキストボックスにdatetimepickerを追加するには？

Question

私は、レールにtext_field_tagを持っています。

<%=text_field_tag 'promocode_expiration','',class: "promoExp form-control",id: "datetimepicker1",size: 10%> 

このtext_fieldをクリックすると、datetimepickerを開き、フィールドに日付を追加します。

どうすれば達成できますか？誰でも助けてくれますか？前もって感謝します。

Answer 1

この機能を追加するには、jquery datetimepicker gemを追加する必要があります。ここにリンクは次のとおりです。https://github.com/Envek/jquery-datetimepicker-rails

Answer 2

まず、あなたのGemfile

gem 'bootstrap-datepicker-rails' 

実行bundle install

アプリ/資産/スタイルシートに次の行を追加/ application.css

*= require bootstrap-datepicker 

にdatapicker宝石を追加する必要があります

この行をapp/assets/javascripts/application.jsに追加します

//= require bootstrap-datepicker 

ビューで

ちょうどHTMLコードを貼り付け

<input type="text" data-provide='datepicker' > 

または

<input type="text" class='datepicker' > 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.datepicker').datepicker(); 
    }); 
</script> 

Answer 3

あなたはこの2行を追加する必要があります。

gem 'momentjs-rails', '>= 2.9.0' 
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37' 

はその後、あなたが実行する必要があります。

を

$ bundle 

次に、JavaScriptのマニフェストファイルに（application.js）に以下を追加します。

//= require moment 
//= require bootstrap-datetimepicker 

そして、あなたのapplication.cssを変更し、追加します。

*= require bootstrap 
*= require bootstrap-datetimepicker 

そして最後に、あなたのビューファイルで：

<div class='input-group date' id='datetimepicker1'> 
    <input type='text' class="form-control" /> 
    <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 
<script type="text/javascript"> 
    $(function() { 
    $('#datetimepicker1').datetimepicker(); 
    }); 
</script> 

これは私のために働いていました。