Question

我正在使用https://amsul.ca/pickadate.js/date/日期和时间选择器，但希望对当前流程有所帮助。因此，现在，日期和时间选择器在不同的输入字段中。要选择一个日期，我需要单击日期输入，然后选择一个时间，我需要单击时间输入。

我基本上想要的是两个选择的一个输入。因此，当我单击“唯一”输入时，默认情况下应加载日期选择器，并且一旦选择日期，它应自动打开时间选择器，然后我也将选择时间。要在输入字段中显示，它应该类似于“ 2019年4月29日，14：00”

有人可以帮助我实现这一目标吗？

// DatePicker
$('.datepicker').pickadate({
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
});

// TimePicker
$('.timepicker').pickatime({
  clear: '',
  format: 'HH:i'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker">

Answer 1

您可以这样做：

使用可见性属性隐藏时间选择器
如果用户使用日期选择器选择了日期，则会调度 onSet 事件
在上述onClose事件的回调处理程序中，使用jquery的 click（）方法模拟对不可见时间选择器的点击
就像日期选择器一样，时间选择器也将调度onSet事件。让我们用它最终将日期和时间选择器的值组合为一个

// DatePicker
$('.datepicker').pickadate({
  onSet: function() {
    $('.timepicker').click();
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',

});

// TimePicker
$('.timepicker').pickatime({
  onSet: function() {
    var tempString = $('.datepicker').val() + " at " + $('.timepicker').val();
    $('.datepicker').val(tempString);
  },
  clear: '',
  format: 'HH:i'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker" style="visibility: hidden;">

根据您在评论中的问题，以下是在设置日期和时间后获取个人选择器的方法：

// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";

$('.datepicker').pickadate({
  onSet: function() {
    if (!initialDateSet) {
      $('.timepicker').click();
    } else {
      var tempString = dPicker.get();
      var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
      $('.datepicker').val(tempString + " " + tempString2);
      backup = $('.datepicker').val();
    }

  },
  onOpen: function() {
    dPicker = this;
    if (initialDateSet) {
      var index = $('.datepicker').val().indexOf("at");
      if ($('.datepicker')[0].selectionStart > index) {
        dPicker.close(true);
        $('.timepicker').click();
      }

    }
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
});

// TimePicker
$('.timepicker').pickatime({
  onSet: function() {
    var tempString;
    if (!initialDateSet) {
      tempString = $('.datepicker').val() + " at " + $('.timepicker').val();
      $('.datepicker').val(tempString);
      backup = tempString;
      initialDateSet = true;
    } else {
      tempString = backup.substr(0, backup.indexOf("at"));
      $('.datepicker').val(tempString + "at " + $('.timepicker').val());
      backup = $('.datepicker').val();
    }
  },
  clear: '',
  format: 'HH:i'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker" style="visibility: hidden;">

如何在选择另一个元素时自动打开它？

1 个答案: