Question

我只想在星期日设置一个特定的时间段。因此，隔天的“允许时间”是从18:00到22:30，但在星期日的12:30到20:30。我正在搜索过去两天的解决方案，但没有找到它。 HTML

<div class="form-group">
  <input type="text" id="date" name="txtDate" class="form-control"  placeholder="Date">
</div>
<div class="form-group">
  <input type="text" id="time" name="txtTime" class="form-control" placeholder="Time">
</div>

JQUERY

//Time Picker
$('#time').datetimepicker({
  datepicker:false,
  format:'H:i',
  step:15,
  allowTimes:['18:00','18:15','18:30','18:45','19:00','19:15','19:30','19:45','20:00','20:15','20:30','20:45','21:00','21:15', '21:30', '21:45', '22:00', '22:15','22:30']
});

// Date Picker
$('#date').datetimepicker({
  timepicker:false,
  format:'d/m/Y',
});

Answer 1

您的问题比看起来要棘手，因为实例中的jQuery DateTimePicker ，而且事实是，一旦初始化，您就无法更改选项。

但是总会有人来回走！

这里的诀窍是，当天数更改为（星期日为0到星期六为6）时，在输入的时间上“销毁”实例，并使用正确的时间表对其进行重新初始化。现在，如果新时间表中不存在所选时间，请强制用户重新选择时间。

看起来简单吗？查看代码：

console.clear();

var schedule_week = ['18:00','18:15','18:30','18:45',
                     '19:00','19:15','19:30','19:45',
                     '20:00','20:15','20:30','20:45',
                     '21:00','21:15','21:30','21:45',
                     '22:00','22:15','22:30'];

var schedule_sunday = ['12:30','12:45',
                       '13:00','13:15','13:30','13:45',
                       '14:00','14:15','14:30','14:45',
                       '15:00','15:15','15:30','15:45',
                       '16:00','16:15','16:30','16:45',
                       '17:00','17:15','17:30','17:45', 
                       '18:00','18:15','18:30','18:45',
                       '19:00','19:15','19:30','19:45',
                       '20:00','20:15','20:30'
                      ];

var prev_dayNum;
var schedule_used = schedule_week;  // Use the week schedule by default.

// Function to initialise the time picker input.
function initTime(){
  $('#time').datetimepicker({
    datepicker:false,
    format:'H:i',
    step:15,
    allowTimes: schedule_used
  });
}
// On load time initialisation.
initTime();

// Initialise the date input.
$('#date').datetimepicker({
  timepicker:false,
  format:'d/m/Y',

  // On change callback
  onChangeDateTime:function(dp,$input){

    var dateVal = $input.val();
    var timeVal = $('#time').val();
    //console.log(dateVal +" - "+ (timeVal||"No Time"));

    // Because of the d/m/Y format, have to process the date a bit to get the day number.
    val = dateVal.split("/");
    var dayNum = new Date(val[2]+"/"+val[1]+"/"+val[0]).getDay();
    //console.log("dayNum: "+dayNum);

    // if dayNum is zero (sunday), use sunday schedule... Else use the week schedule.
    schedule_used = (dayNum == 0) ? schedule_sunday : schedule_week;

    // If the dayNum changed.
    if( prev_dayNum != dayNum  ){
      console.log("Changed day!");
      // Re-initialise datetimepicker
      $('#time').datetimepicker("destroy");
      initTime();

      // If the actual time value is not in schedule.
      if($.inArray(timeVal,schedule_used) == -1){
        console.log("Wrong time!");
        // Clear the time value.
        $('#time').val("");
        // Focus the time input so it's obvious the user has to re-select a time.
        $('#time').focus();
      }
    }
    // Keep this dayNum in memory for the next time.
    prev_dayNum = dayNum;
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>

<div class="form-group">
  <input type="text" id="date" name="txtDate" class="form-control"  placeholder="Date">
</div>
<div class="form-group">
  <input type="text" id="time" name="txtTime" class="form-control" placeholder="Time">
</div>

现在您可以看到，星期日的时间表与其他日子不同。并且它“强制”用户仅在输入的内容不符合计划的情况下仅输入/重新输入时间。

我未在CodePen中注释控制台日志。

如何在星期日显示不同的时间段-jQuery datetimepicker

1 个答案: