Question

我一直在努力让bootstrap-datepicker在我的rails应用程序中运行。任何帮助，将不胜感激。谢谢！

Rails -v：3.2.12 jquery-rails：3.0.4,3.0.2，....

这是我的html文件中的js：

<link href="/assets/datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>

html片段：

<div class="control-group">
    <label class="control-label" for="vps_eta_date">Estimated arrival date</label>
    <div class="controls">    
        <div class="input-append date" id="dp3" data-date-format="dd-mm-yyyy">
             <input class="span2" size="16" id="vps_eta_date" name="vps[eta_date]" type="text" value="12-02-2013" readonly>
             <span class="add-on"><i class="icon-th"></i></span>
        </div>
    </div>
</div>

html文件还包括以下脚本从示例（http://vitalets.github.io/bootstrap-datepicker/）复制此内容：

<script>
    $(function(){
        window.prettyPrint && prettyPrint();
        $('#dp1').datepicker({
            format: 'mm-dd-yyyy',
            todayBtn: 'linked'
        });

        $('#dp2').datepicker();
        $('#btn2').click(function(e){
            e.stopPropagation();
            $('#dp2').datepicker('update', '03/17/12');
        });             

        $('#dp3').datepicker();


        var startDate = new Date(2012,1,20);
        var endDate = new Date(2012,1,25);
        $('#dp4').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                } else {
                    $('#alert').hide();
                    startDate = new Date(ev.date);
                    $('#startDate').text($('#dp4').data('date'));
                }
                $('#dp4').datepicker('hide');
            });
        $('#dp5').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() < startDate.valueOf()){
                    $('#alert').show().find('strong').text('The end date can not be less then the start date');
                } else {
                    $('#alert').hide();
                    endDate = new Date(ev.date);
                    $('#endDate').text($('#dp5').data('date'));
                }
                $('#dp5').datepicker('hide');
            });

        //inline    
        $('#dp6').datepicker({
            todayBtn: 'linked'
        });

        $('#btn6').click(function(){
            $('#dp6').datepicker('update', '15-05-1984');
        });            

        $('#btn7').click(function(){
            $('#dp6').data('datepicker').date = null;
            $('#dp6').find('.active').removeClass('active');                
        });            
    });
</script>

Answer 1

您可以使用bootstrap-datepicker-rails gem，我建议您使用它。

将bootstrap-datepicker-rails放入Gemfile;

gem 'bootstrap-datepicker-rails'

然后运行bundle，然后将此行添加到 app / assets / stylesheets / application.css

 *= require bootstrap-datepicker

将此行添加到 app / assets / javascripts / application.js

 //= require bootstrap-datepicker

关于观点（例如表格）

<%= f.text_field :mydate, 'data-behaviour' => 'datepicker' %>

<script type="text/javascript">
  $('[data-behaviour~=datepicker]').datepicker();
</script>

或作为组件：

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
    <%= f.text_field :mydate, 'data-behaviour' => 'datepicker', :disabled => 'disable' %><span class="add-on"><i class="icon-th"></i></span>
</div>

<script type="text/javascript">
  $('.datepicker').datepicker();
</script>

Answer 2

我已直接在我的部分中包含以下内容：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

我使用了前面提到的表单和javascript snippent。 jquery-ui的datpicker现在正在为我工作，我将继续使用这个解决方案并稍后重新审视。

感谢您的帮助，但是bootstrap-datepicker-rails和jquery-ui-rails gems以及它们与所有其他javascript文件的交互方式都有些麻烦。

Rails 3.2.12 bootstrap-datepicker不能正常工作

2 个答案: