首页 > 解决方案 > jQuery DateTimePicker 在 Safari 上不起作用

问题描述

下面链接的 jQuery DateTimePicker 在 Safari 上似乎无法正常工作(它在 Chrome 上完美无缺):

html.erb


    <label for="pickup-date"><p class="times"><strong><%= t('checkout-pickup')%></strong></p></label>
    <div class="input-group">
      <input type="text" id="pickup_picker" name="booking[pickup_date]" class="form-control" autocomplete="off" readonly="readonly" required>
      <label class="input-group-addon my-auto p-2" for="pickup_picker">
              <span class="fa fa-calendar"></span>
          </label>
    </div>


    <label for="return-date"><p class="times"><strong><%= t('checkout-return')%></strong></p></label>

    <div class="input-group">
      <input type="text" id="return_picker" name="booking[return_date]" class="form-control" autocomplete="off" placeholder="Kies retourdatum en tijd" readonly="readonly" required>
      <label class="input-group-addon my-auto p-2" for="return_picker">
              <span class="fa fa-calendar"></span>
          </label>
    </div>


JS

    $('#pickup_picker').datetimepicker({
      timepicker: true,
      datepicker: true,
      format: 'Y-m-d H:i',
      locale: 'nl',
      value: new Date('<%= params[:pickup_date] %>' + ' ' + '<%= params[:pickup_time] %>'),
      minDate: 0, // ignore days in the past
      allowTimes: [
        '08:00', '09:00', '10:00',
        '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'
      ]
    });

    $('#pickup_picker').on('click', function(e) {
      e.preventDefault();
      $(this).attr("autocomplete", "off");
    });

    var checkPastTime = function(inputDateTime) {
      if (typeof(inputDateTime) != "undefined" && inputDateTime !== null) {
        var pickupDate = new Date($('#pickup_picker').val())

        //check past year and month
        console.log(inputDateTime.getDate())
        console.log(pickupDate.getDate())
        console.log((inputDateTime.getDate() < pickupDate.getDate()))
        if (inputDateTime.getFullYear() < pickupDate.getFullYear()) {
          $('#return_picker').datetimepicker('reset');
          alert("Oeps! Je probeert een tijd voor het ophaalmoment te selecteren. Helaas hebben wij nog geen tijdreisfunctie.");
        } else if ((inputDateTime.getFullYear() == pickupDate.getFullYear()) && ((inputDateTime.getMonth() < pickupDate.getMonth()) || (inputDateTime.getDate() < pickupDate.getDate()))) {
          $('#return_picker').datetimepicker('reset');
          alert("Oeps! Je probeert een tijd voor het ophaalmoment te selecteren. Helaas hebben wij nog geen tijdreisfunctie.");
        }

        // 'this' is jquery object datetimepicker
        // check input date equal to todate date
        if (inputDateTime.getDate() == pickupDate.getDate()) {
          if (inputDateTime.getHours() < pickupDate.getHours()) {
            $('#return_picker').datetimepicker('reset');
          }
          this.setOptions({
            minTime: pickupDate.getHours() + ':00' //here pass current time hour
          });
        } else {
          this.setOptions({
            minTime: false
          });
        }
      }
    };

    var currentYear = new Date();
    $('#return_picker').datetimepicker({
      format: 'Y-m-d H:i',
      minDate: 0,
      locale: 'nl',
      yearStart: currentYear.getFullYear(), // Start value for current Year selector
      onChangeDateTime: checkPastTime,
      minDate: $('#pickup_picker').val() ? $('#pickup_picker').val() : 0,
    });

    $('#return_picker').on('click', function(e) {
      e.preventDefault();
      $(this).attr("autocomplete", "off");
    });

我的想法是新的 Date 实例返回一个不受支持的值,即 YYYY-MM-DDDD,HH:II。

当我在 Windows 笔记本电脑上工作时,我无法重建问题。

非常感谢您的帮助。

亲切的问候,杰伦

标签: javascriptruby-on-railssafaridatetimepicker

解决方案


推荐阅读