0

我一直在努力让 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>

index.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>
4

2 回答 2

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>
于 2013-07-16T05:05:57.517 回答
0

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

<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 gem 以及它们如何与所有其他 javascript 文件交互都有一些问题。

于 2013-07-17T12:58:11.593 回答