Rails 3.2.12 bootstrap-datepicker不工作

Question

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

Rails -v: 3.2.12jQuery-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代码片段。jquery-ui的日期选择器现在正在为我工作，我将继续使用这个解决方案，稍后再讨论这个解决方案。

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