Use datepicker in railsadmin custom action

Question

I am trying use the same Datepicker Railadmin using for "Date" fields in my custom action.

I have date field in my custom action

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

I can see rails_admin using Jquery Ui Datepicker.

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

I also understood , they extending datapicker prototype.

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

Any help for getting date picker to work in rails admin custom action (view) will be appreciated.

Answer 1

Finally solved it by including external plugin. I added the JS library in Custom view itself.

<%=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

For reference this is how a working custom action view looks like with a working input that uses the 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

As you can see i had to add the regional stuff and call the datepicker myself.

Answer 3

Add the datepicker class to the input field. i.e.

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

and use:

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

Answer 4

To follow up on my comments above, here is how I'm using jquery.ui.datepicker which has worked without problems (note that the following code is an example):

app/views/templates/model_action.html.erb

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

app/assets/javascripts/datepicker.js.coffee

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

And the snippet from page source:

<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" />