0

I'm making a scheduling tool using the jquery-timepicker. I have a @tour that has a start_date and an end_date, that I've passed in through the controller.

In the timepicker, I'd like to limit the hourMin and the hourMax to the current start_date and end_date of @tour, respectively. Right now, I'm getting an error that tour does not exist.

Not really familiar with how ajax code works in terms of getting information from the current start_date and end_date of tour, and how to access this tour variable.

Really appreciate the help in advance!!

<div class="panel-body">
  <%= form_for [@facility, @tour] do |f| %>
    <div class="row">
      <div class="col-md-6">
        <label>Start Availability</label>
        <%= f.text_field :start_date, readonly: true, placeholder: "Start Date", class: "form-control datepicker" %>
      </div>

      <div class="col-md-6">
        <label>End Availability</label>
        <%= f.text_field :end_date, readonly: true, placeholder: "End Date", class: "form-control datepicker"%>
      </div>
    </div>
    <br/>
    <%= f.submit "Save", id: "btn_book", class: "btn btn-normal btn-block", disabled: true %>
  <% end %>
</div>

<script>

  function checkDate(date) {
    dmy = (date.getDate()-1) + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    return [$.inArray(dmy, unavailableDates) == -1];
  }

  $(function() {
    unavailableDates = [];
    $.ajax({
      url: '<%= preload_facility_path(@facility) %>',
      dataType: 'json',
      success: function(data) {

        $.each(data.unavailable_dates, function (arrID, arrValue) {
            console.log(arrValue)
            unavailableDates.push($.datepicker.formatDate('yy-mm-dd', new Date(arrValue)));
        });
        console.log(unavailableDates)

        var startDateTextBox = $('#tour_start_date');
        var endDateTextBox = $('#tour_end_date');

        $.timepicker.datetimeRange(
          startDateTextBox,
          endDateTextBox,
          {
              dateFormat: "yy-mm-dd",
              timeFormat: "H:mm:ss",
              hourMin: tour.start_date,
              hourMax: tour.end_date,
              stepHour: 1,
              stepMinute: 15,
              range: true,
              minDate: '2d',//how many days after current day
              start: {}, // start picker options
              end: {}, // end picker options
              beforeShowDay: checkDate,
              onSelect: function(selected) {
                $('#btn_book').attr('disabled', false);
              }
          }
        );
      }
    });
  });
</script>

1

1 Answer 1

0

Is this where to error occurs? And are you trying to get the rails object?

hourMin: tour.start_date
hourMax: tour.end_date

If so the rails object is not available in the javascript/jquery code. So you have to return the value with the ajax request, use a gem like "gon", place the value in a hidden field or just get the value out of the textbox. "gon" is a gem that makes it possible to access rails variables in a javascript/jquery file.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.