Question

我正在尝试使用相同的Datepicker Railadmin用于我的自定义操作中的“日期”字段。

我的自定义操作中有日期字段

<input type="text" class="hasDatepicker">

我可以使用Jquery Ui Datepicker查看rails_admin。

Started GET "/assets/jquery.ui.datepicker.js?body=1" for 127.0.0.1 at 2013-09-29 19:58:34 +0530

我也明白，他们扩展了datapicker原型。

$.extend(Datepicker.prototype, {
/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: "hasDatepicker" ...

任何有关让日期选择器在rails admin自定义操作（视图）中工作的帮助都将不胜感激。

Answer 1

最后通过包含外部插件来解决它。我在自定义视图中添加了JS库。

<%=javascript_include_tag "/assets/rails_admin/lib/bootstrap-datepicker.js"%>
<%=stylesheet_link_tag "/assets/rails_admin/lib/datepicker.css"%>



function pick_date(){
      var nowTemp = new Date();
      var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
      var a=$('.hasDatepicker').datepicker({
                onRender: function(date) {
                  return date.valueOf() < now.valueOf() ? 'disabled' : '';
                },
                format: 'dd-mm-yyyy'
              });
    }

Answer 2

作为参考，这是使用rails admin datepicker的工作输入的工作自定义操作视图的样子

:javascript
  jQuery(function($) {
  $.filters.options.regional = {
    datePicker: {
    dateFormat: "mm/dd/yy",
    dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    dayNamesShort: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    dayNamesMin: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    firstDay: "1",
    monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
    monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
    }
  }

  });

:javascript
  $(function() {
    $('.date').datepicker($.filters.options.regional);
  });

%form.pjax-form.form-inline{"accept-charset" => "UTF-8", :method => "get"}
  %div{:style => "display:none"}
    %input{:name => "utf8", :type => "hidden", :value => "✓"}/
  .well
    %span#filters_box
      %p.filter.form-search
        %span.label.label-info.form-label
          Created at
        %select.switch-additionnal-fieldsets.input-small{:name => "created_at"}
          %option{"data-additional-fieldset" => "default", :value => "default"} Date ...
          %option{"data-additional-fieldset" => "between", :value => "between"} Between ... and ...
          %option{:value => "today"} Today
          %option{:value => "yesterday"} Yesterday
          %option{:value => "this_week"} This week
          %option{:value => "last_week"} Last week
          %option{:disabled => "disabled"} ---------
          %option{:value => "_not_null"} Is present
          %option{:value => "_null"} Is blank
        %input.date.additional-fieldset.default.input-small{:name => "created_at", :style => "display:inline-block;", :type => "text", :value => ""}/
        %input.date.additional-fieldset.between.input-small{:name => "start_date", :placeholder => "-∞", :style => "display:none;", :type => "text", :value => ""}/
        %input.date.additional-fieldset.between.input-small{:name => "end_date", :placeholder => "∞", :style => "display:none;", :type => "text", :value => ""}/
        %button.btn.btn-primary{"data-disable-with" => "<i class='icon-white icon-refresh'></i> Refresh", :type => "submit"}
          %i.icon-white.icon-refresh
          Refresh

你可以看到我必须添加区域内容并自己调用datepicker。

Answer 3

将datepicker类添加到输入字段。即。

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

并使用：

$('.datepicker').datepicker();

Answer 4

为了跟进我上面的评论，这里是我如何使用jquery.ui.datepicker，它没有问题（注意下面的代码是一个例子）：

应用/视图/模板/ model_action.html.erb

<%= f.text_field :date_of_birth, id: 'user_date_of_birth', class: 'datepicker' %>

应用/资产/ Javascript角/ datepicker.js.coffee

$ -> $('.datepicker').datepicker

来自网页来源的代码段

<link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" /> <script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script> ... <input class="datepicker" id="user_date_of_birth" name="user[date_of_birth]" type="text" />

在railsadmin自定义操作中使用datepicker

4 个答案: