Uncaught TypeError: Cannot read property 'apply' of undefined - datepicker
<p>I'm having two issues with the same aspect of my application, the abstract view is this:</p>

<p>The app allows users to view different video clips. On the back-end/admin section the admin can track the views of any particular group of clips. For example, the admin can choose <code>Universal Studios</code>, select a <code>date range: Beginning Date: 2015-01-1, End Date: 2016-01-1</code> and hit <code>filter</code>, and see the number of total views that <code>Universal</code> received within this range. </p>

<p>The problem is, for one, <strong>datepicker</strong> is no longer working, so when I click on the date fields, no calendar appears, I manually have to type in the date. And for two, I'm only getting results between furthest: <code>2015-10-18</code> and <code>2016-02-18</code>. When I type in <code>2015-09-18</code> or anything earlier it doesn't generate results.</p>

<p>Below is the error when I click inspect element in Chorme, </p>

<p><strong>error: Uncaught TypeError: Cannot read property 'apply' of undefined</strong></p>

<pre><code> */
 (function($) {
   var _datepicker = jQuery.fn.datepicker;

   $.fn.datepicker = function(options) {
    var $date = _datepicker.apply(this, arguments); &lt;--- this line
</code></pre>

<p><strong>application.js requires</strong></p>

<pre><code>// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui/draggable
//= require jquery-ui/sortable
//= require jquery-ui/autocomplete
//= require bootstrap
//= require carousel.js
//= require hover.js
//= require menu_js/modernizr.js
//= require menu_js/dlmenu.js
//= require custom.js
//= require bootstrap-tabs.js
//= require jquery.raty.js
//= require letsrate.js
//= require rails-timeago
//= require tinymce-jquery
//= require scrollTo.js
//= require clips.js
//= require jquery.sticky.js
//= require jquery-ui.min.js
//= require jquery.dynatable.js
//= require playlist.js
//= require index.js.coffee
</code></pre>

<p><strong>Update as per Robs point:</strong></p>

<p><strong>custom.js</strong></p>

<pre><code>/**
 * Constructor patch for jQuery UI DatePicker
 * Automatically initializes the input with the value from the altField
 */
 (function($) {
   var _datepicker = jQuery.fn.datepicker;

   $.fn.datepicker = function(options) {
    var $date = _datepicker.apply(this, arguments);

    if (options.altFormat &amp;&amp; options.altField) {
      var altValue = $(options.altField).val();
      var value = $.datepicker.parseDate(options.altFormat, altValue);
      var dateFormat = _datepicker.call(this, 'option', 'dateFormat');
      $(this).val($.datepicker.formatDate(dateFormat, value));
    }
  };
})(jQuery);

var $date = $("#search_start_date");

$date.datepicker({
  dateFormat: "yy-mm-dd",
  altFormat: "yymmdd"
});

var $end_date = $('#search_end_date');

$end_date.datepicker({
  dateFormat: "yy-mm-dd",
  altFormat: "yymmdd"
});



});
</code></pre>

<p><strong>index.html.erb</strong></p>

<pre><code>&lt;%= form_for Search.new, url: statistics_search_saas_admin_statistics_path, html: {method: :get, remote: true} do |f| %&gt;
&lt;table id="table_1" class="table" style="margin-bottom: 5px;"&gt;
  &lt;tr&gt;
    &lt;th style="color: black; background: white; border-color: white;"&gt;Studio&lt;/th&gt;
    &lt;th style="color: black; background: white; border-color: white;"&gt;Film&lt;/th&gt;
    &lt;th style="color: black; background: white; border-color: white;"&gt;Clip&lt;/th&gt;
    &lt;th style="color: black; background: white; border-color: white;"&gt;&lt;/th&gt;
    &lt;th style="color: black; background: white; border-color: white;"&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;
    &lt;select multiple id="studio_select" style="height: 150px;"&gt;
      &lt;% Studio.all.each do |studio| -%&gt;
      &lt;option value="&lt;%=studio.id %&gt;"&gt;&lt;%= studio.name %&gt;&lt;/option&gt;
      &lt;% end -%&gt;
    &lt;/select&gt;
    &lt;%= hidden_field_tag :studio_ids %&gt;
  &lt;/td&gt;
  &lt;td&gt;
    &lt;select multiple id="film_select" style="height: 150px;"&gt;&lt;/select&gt;
    &lt;%= hidden_field_tag :film_ids %&gt;
  &lt;/td&gt;
  &lt;td&gt;
    &lt;select multiple id="clip_select" name="search[clip]" style="height: 150px;"&gt;&lt;/select&gt;
    &lt;%= hidden_field_tag :clip_ids %&gt;
  &lt;/td&gt;
&lt;/table&gt;

&lt;div class="span10"&gt;
&lt;table class="table"&gt;
  &lt;tr&gt;
    &lt;th&gt;Beginning Date&lt;/th&gt;
    &lt;th&gt;End Date&lt;/th&gt;
    &lt;th&gt;&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;%= f.text_field :start_date, value: 1.month.ago.strftime('%Y-%m-%d')  %&gt;&lt;/td&gt;
    &lt;td&gt;&lt;%= f.text_field :end_date, value: Time.now.strftime('%Y-%m-%d') %&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;%= f.submit "Filter", class: "btn btn-danger", data: {disable_with: 'Searching...'} %&gt;
      &lt;%= link_to 'Clear Form', '#', id: "clear", class: 'btn btn-default'  %&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;% end -%&gt;
</code></pre>