如何在Rails中的部分中更新jQuery Datepicker

Question

I have a partial that has two datepickers to show the beginning and ending of data to be displayed in another partial. I also have a dropdown to determine the date ranges for some predetermined events. Trouble is, changing the dropdown does not update the content of the datepickers. Secondarily, I'd also like that changing either of the datepickers will cause the dropdown to revert to the default of 'No Event', and that's also not working. I'm also a bit of a novice when it comes to javascript and rails, as will probably be evident in my code.

The partial with the date ranges and javascript:

<script type="text/javascript" charset="utf-8">

  var set_default_dates = function() {
    var start = $("#_start_date")
    var end = $("#_end_date")
    var min_date = new Date("<%= @min_date.strftime("%m/%d/%Y") %>")
    var max_date = new Date("<%= @max_date.strftime("%m/%d/%Y") %>")
    start.datepicker('option', 'minDate', min_date);
    start.datepicker('option', 'maxDate', max_date);
    end.datepicker('option', 'minDate', min_date);
    end.datepicker('option', 'maxDate', max_date);
    start.datepicker("setDate", min_date);
    end.datepicker("setDate", max_date);

    var curr_start_date = new Date("<%= session[:dashboards][:start_date].strftime("%m/%d/%Y") %>");
    var curr_end_date = new Date("<%= session[:dashboards][:end_date].strftime("%m/%d/%Y") %>");
    window.alert(curr_start_date);
    start.datepicker("setDate", curr_start_date);
    end.datepicker("setDate", curr_end_date);
  }
  window.onload = set_default_dates;

</script>
<div class="form-inline"  style="width:240px">
  <table>
    <tr>
      <td>
        Start Date:
        <%= datepicker_input "", "start_date", data: {remote: true} %>
      </td>
    </tr>
    <tr>
      <td>
        End Date:
        <%= datepicker_input "", "end_date", data: {remote: true} %>
      </td>
    </tr>
  <tr>
    <td>
      Select Event:
      <%= select_tag(
        :chosen_event,
        options_for_select(get_event_names,
          session[:dashboards][:chosen_event]),
        data: {remote: true,
          chosen_event: :chosen_event
        }
      ) %>
    </td>
  </tr>
  </table>
</div>

The code in the controller that updates the session for date range updates:

  #just gets the first and last date from the database to determine ranges
  @min_date = get_first_date
  @max_date = get_last_date

  if params[:start_date] || params[:end_date]
    session[:dashboards][:chosen_event] == DashboardsHelper::NO_EVENT
  end

  if params[:chosen_event]
    session[:dashboards][:chosen_event] = params[:chosen_event]
    if params[:chosen_event] == DashboardsHelper::NO_EVENT
      session[:dashboards][:start_date] = @min_date
      session[:dashboards][:end_date] = @max_date
    else
      event = Event.order(:name).where(name: params[:chosen_event]).find(:all)[0]
      session[:dashboards][:start_date] = event.start
      if (event.end)
        session[:dashboards][:end_date] = event.end
      end
    end
  end
  ....

  respond_to do |format|
    format.html
    format.js
  end

and my index.js.erb includes the partial to be updated. I know that the event selection is working, because the table updates appropriately, and same with the datepickers-- changing them causes the table to update as expected.

I've tried experimenting with onSelect, but that doesn't seem to matter; my best guess right now is that the curr_start_date and curr_end_date vars aren't getting updated, because that window.alert isn't firing. What is happening is that changing the event dropdown is emptying the contents of the datepickers. I've also tried this for my javascript:

<script type="text/javascript" charset="utf-8">

  var set_current_dates = function(){

    var start = $("#_start_date")
    var end = $("#_end_date")
    var curr_start_date = new Date("<%= session[:dashboards][:start_date].strftime("%m/%d/%Y") %>");
    var curr_end_date = new Date("<%= session[:dashboards][:end_date].strftime("%m/%d/%Y") %>");
    window.alert(curr_start_date);
    start.datepicker("setDate", curr_start_date);
    end.datepicker("setDate", curr_end_date);
  }

  var set_default_dates = function() {
    var start = $("#_start_date")
    var end = $("#_end_date")
    var min_date = new Date("<%= @min_date.strftime("%m/%d/%Y") %>")
    var max_date = new Date("<%= @max_date.strftime("%m/%d/%Y") %>")
    start.datepicker('option', 'minDate', min_date);
    start.datepicker('option', 'maxDate', max_date);
    end.datepicker('option', 'minDate', min_date);
    end.datepicker('option', 'maxDate', max_date);
    start.datepicker("setDate", min_date);
    end.datepicker("setDate", max_date);
    set_current_dates();
  }
  window.onload = set_default_dates;
  $("#chosen_event").onchange = set_current_dates;

</script>

Again, the same behavior happens-- the datepickers blank out, and no alert is fired, even though the table updates appropriately.

What should I be doing to have the datepickers update to reflect a change in the select dropdown, and vice versa?

Answer 1

By specifying the value of the input field by jquery , you can do this. Like below

$('#_start_date').val(min_date);
$('#_end_date').val(max_date);

This will also update the selected date in the datepicker select dropdown.