1

我有一个部分，它有两个日期选择器来显示要在另一个部分中显示的数据的开始和结束。我还有一个下拉列表来确定某些预定事件的日期范围。麻烦的是，更改下拉列表不会更新日期选择器的内容。其次，我还希望更改任何一个日期选择器都会导致下拉菜单恢复为默认的“无事件”，这也不起作用。当谈到 javascript 和 rails 时，我也是一个新手，这在我的代码中可能很明显。

带有日期范围和 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>

控制器中用于更新日期范围更新会话的代码：

  #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

我的 index.js.erb 包括要更新的部分。我知道事件选择正在工作，因为表会适当地更新，并且与日期选择器相同——更改它们会导致表按预期更新。

我尝试过使用 onSelect，但这似乎无关紧要；我现在最好的猜测是 curr_start_date 和 curr_end_date 变量没有得到更新，因为 window.alert 没有触发。发生的事情是更改事件下拉列表正在清空日期选择器的内容。我也为我的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>

再次，同样的行为发生了——日期选择器空白，没有警报被触发，即使表格更新得当。

我应该怎么做才能让日期选择器更新以反映选择下拉列表中的变化，反之亦然？

4

1 回答 1

0

通过jquery指定输入字段的值，您可以做到这一点。像下面

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

这也将更新日期选择器选择下拉列表中的选定日期。

于 2013-03-20T18:11:53.150 回答