0

我正在尝试在我的自定义操作中使用相同的 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 自定义操作（视图）中工作的帮助将不胜感激。

4

4 回答 4

0

最后通过包含外部插件解决了它。我在自定义视图本身中添加了 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'
              });
    }
于 2013-09-29T17:40:35.567 回答
0

作为参考，这是使用 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

如您所见，我必须添加区域内容并自己调用日期选择器。

于 2014-12-12T21:49:41.643 回答
0

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

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

并使用：

$('.datepicker').datepicker();
于 2016-09-22T03:27:40.173 回答
-1

为了跟进我上面的评论，这是我使用 jquery.ui.datepicker 的方式，它可以正常工作（请注意，以下代码是一个示例）：

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

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

应用程序/资产/javascripts/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" />
于 2013-09-29T15:17:00.230 回答