问题：

使用php数组禁用datepicker中的日期和datepicker中onSelect中的timepicker中的时间

曹驰

2023-03-14

我有一个日期选择器输入和一个时间选择器输入，我想用它来安排一个人的约会。

当用户单击输入打开datepicker菜单时，我想灰显特定的日期时间。我有一个php函数，它以“Y-m-d H:I:s”字符串格式返回这个datetimes数组。但我不知道如何使用该函数的返回值为javascript函数提供禁用datepicker中的一系列日期所需的内容。

在日期选择器的onSelect事件中，我希望它根据当天预订的时隙启用/禁用时间选择器中的时间选项。但是我不知道怎么做。

Datepicker使用beforeshowDay：禁用预定日期

用户从日期选择器中选择日期

Datepicker在timepicker中启用/禁用时间

我确实在这里找到了如何禁用时间选择器中的时间。代码示例如下：

$('input.timepicker').timepicker({
    'disableTimeRanges': [
        ['1am', '2am'],
        ['3am', '4:01am']
    ]
});

但这就是我在计时器范围内禁用时间范围的方法。我不知道如何在datepicker中禁用BeforeShowDay？

<script type="text/javascript">   
    $(document).ready(function(){
        $( "#datepickerListAppointments" ).datepicker(
        {
            minDate:'0',
            beforeShowDay:
            function(dt)
            {   // need to disable days other than tuesday and wednesday too.
                return [dt.getDay() === 2 || dt.getDay() === 3, ""];
            },
            onSelect : function(){
                should disable/enable timepicker times from here?
            }
        });

        $('input.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 90,
            minTime: '9',
            maxTime: '10:30am',
            defaultTime: '9',
            startTime: '9:00',
            dynamic: false,
            dropdown: true,
            scrollbar: false                
        });

    });

这是给出日期时间的函数，以防它有助于了解。

function get_next_open_appointments($numAppointments, $timeSlotToExclude = "")
{
    global $db;
    $whereCondition = "WHERE FirstName = :null ";
    if ($timeSlotToExclude != "")
    {
        $whereCondition .= "AND AppointmentTime != '$timeSlotToExclude' ";
    }

    $query = "SELECT DISTINCT AppointmentTime FROM appointments
              $whereCondition
              ORDER BY AppointmentTime ASC LIMIT $numAppointments";
    $statement = $db->prepare($query);
    $statement->bindValue(':null', "");
    $statement->execute();
    $datesArray = array();
    while ($row = $statement->fetch()) 
    {
        array_push($datesArray, $row['AppointmentTime']);
    }
    $statement->closeCursor();
    return $datesArray;
}

更新：

雨果·德卡莫为我指出了正确的方向，我得到了适当禁用/启用的日期。然而，我不知道如何使用我在下面代码中提取的日期时间来禁用/启用计时器中的时间。

以下是新代码：

<script type="text/javascript">   
    $(document).ready(function(){

        // uses php to get open appointments, and put them in a javascript array
        <?php $datetime_openings = get_next_open_appointments(200);
        $date_openings = array();
        foreach ($datetime_openings as $dt)
        {
            array_push($date_openings, substr($dt,0,10)); // just the date part
        }

        $json_date_openings = json_encode($date_openings);
        echo "var arr_Openings = ". $json_date_openings . ";\n";
        ?>

        $( "#datepickerOpenAppointments" ).datepicker(
        {
            minDate:'0',
            beforeShowDay:
            function(dt)
            {
                var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
                var bFound = (arr_Openings.indexOf(string) != -1);
                return [ bFound ]; 
            },
            onSelect : function(){
               //    Should disable/enable time ranges here?
        });

        $('input.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 90,
            minTime: '9',
            maxTime: '10:30am',
            defaultTime: '9',
            startTime: '9:00',
            dynamic: false,
            dropdown: true,
            scrollbar: false                
        });

    });

共有3个答案

汪德明

2023-03-14

是的，您可以使用时间选择器组件的选项方法在选择功能中手动更新时间选择器禁用的时间范围。

我假设：

您正在使用jQuery UI日期选择器（因为您没有用twitter引导标记您的问题，并且引导日期选择器没有minDate选项
您使用的是第一版的get\u next\u open\u约会，它返回一个日期时间数组（如2017-07-25 09:30:00，…）请参见代码片段中的fakeDisabledTimes）

为了简化日期管理，我使用了Momjs。在下面的代码中，我使用了矩解析函数（矩（String）和矩（String， String）），is相同，add和格式。请注意，矩令牌与PHP令牌不同。

这里有一个完整的工作示例：

var fakeDisabledTimes = [
  '2017-07-25 09:30:00', '2017-07-26 10:00:00',
  '2017-08-01 09:00:00', '2017-08-02 09:30:00',
  '2017-08-08 10:30:00', '2017-08-09 10:00:00',
  '2017-07-15 09:30:00', '2017-07-16 10:00:00'
];

$(document).ready(function(){
  $( "#datepickerListAppointments" ).datepicker({
    minDate:'0',
    beforeShowDay:
    function(dt){
      // need to disable days other than tuesday and wednesday too.
      return [dt.getDay() === 2 || dt.getDay() === 3, ""];
    },
    onSelect : function(dateText){
      //should disable/enable timepicker times from here!
      // parse selected date into moment object
      var selDate = moment(dateText, 'MM/DD/YYYY');
      // init array of disabled times
      var disabledTimes = [];
      // for each appoinment returned by the server
      for(var i=0; i<fakeDisabledTimes.length; i++){
        // parse appoinment datetime into moment object
        var m = moment(fakeDisabledTimes[i]);
        // check if appointment is in the selected day
        if( selDate.isSame(m, 'day') ){
          // create a 30 minutes range of disabled time
          var entry = [
            m.format('h:mm a'),
            m.clone().add(30, 'm').format('h:mm a')
          ];
          // add the range to disabled times array
          disabledTimes.push(entry);
        }
      }
      // dinamically update disableTimeRanges option
      $('input.timepicker').timepicker('option', 'disableTimeRanges', disabledTimes);
    }
  });

  $('input.timepicker').timepicker({
    timeFormat: 'h:i a',
    interval: 90,
    minTime: '9',
    maxTime: '10:30am',
    defaultTime: '9',
    startTime: '9:00',
    dynamic: false,
    dropdown: true,
    scrollbar: false                
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.css" rel="stylesheet"/>

<input id="datepickerListAppointments" type="text">
<input class="timepicker" type="text">

殷安顺

2023-03-14

这里已经有人回答了这个问题。

无论如何，下面的代码应该可以让您了解如何解决问题。

// supose your script return a json similar to the following
{
    "data": [
        // ...
        "17-07-11"
    ]
}

$(function() {
  $.getJSON("/path/to/script", function(response){
    $('#datepickerListAppointments').datepicker({
      beforeShowDay: function(dt) {
        var config = [];
        config[1] = 'class';

        if ((dt.getDay() === 2) || (dt.getDay() === 3)) {
          config[0] = false;
          return config;
        }

        var string = jQuery.datepicker.formatDate('yy-mm-dd', dt);
        config[0] = (response.data.indexOf(string) === -1);
        return config;
      }
    });
  });
});

我假设您正在使用某种API与服务器交换数据，因此使用getJSON，如果您想处理服务器错误，那么我建议您使用ajax结合Promise。

编辑1

您可以使用DateTime类提取日期中的所有内容，下面是一个片段：

$openings = array();

$date = DateTime::createFromFormat("y/m/d H:i", "17/07/15 08:30");

if (!isset($openings[$date->format("y-m-d")])) {
    $openings[$date->format("y-m-d")] = array();
}

$openings[$date->format("y-m-d")][] = array(
    "hour" => $date->format("Ha"),
    "minute" => $date->format("i")
);

/* result
array(1) {
  ["17-07-15"]=>
  array(1) {
    [0]=>
    array(2) {
      ["hour"]=>
      string(4) "08am"
      ["minute"]=>
      string(2) "30"
    }
  }
}
*/

然后您可以根据日期禁用timepicker中的时间，您可能需要在datepicker中注册一个回调函数以根据选择的日期更新timepicker，或者您必须使用新设置覆盖timepicker。

徐高韵

2023-03-14

请尝试此操作，
抱歉，我没有使用beforeshowDay
选择日期2017-7-14和2017-7-17，然后查看

var disabledDateTime = {
  '2017-7-14':[
  	['2:30am','3:00am'],
    ['6:30am','9:00am']
  ],
	'2017-7-17':[
  	['1:00am','3:00am'],
    ['5:30am','7:00am'],
    ['11:30am','2:00pm']
  ]
};

$(function() {
  $('#pickTime').timepicker();
  $('#pickDate').datepicker({
    'format': 'yyyy-m-d',
    'autoclose': true
  }).on('changeDate',function(e){
    var ts = new Date(e.date);
    var m = ts.getMonth()+1;
    var dt = ts.getFullYear() + '-' + m + '-' + ts.getDate();
    var opt = {'disableTimeRanges': []}
    if(typeof(disabledDateTime[dt])!='undefined'){
      $('#pickTime').timepicker('setTime', '');
      opt = {'disableTimeRanges': disabledDateTime[dt]}
    }
    $('#pickTime').timepicker('option',opt);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
<script src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>

<input id="pickDate" type="text" class="date" />
<input id="pickTime" type="text" class="time" />

类似资料：

禁用html5 datepicker中的某些日期

我想禁用一个场景的当前日期和其他场景的未来日期时，是否可以禁用日期。我应该如何禁用日期？
Amsul DatePicker-如何禁用日历上的日期？

我刚刚安装了amsul日期选择器，但我无法弄清楚如何禁用日期？例如，如果我希望日历显示今天的日期和1年前的未来日期。例如：2019年5月2日- 此外，我正在尝试从- 谢谢 Amsul：https://amsul.ca/pickadate.js/
使用datePicker禁用基于先前填充的日期UI日期

我有一个编辑屏幕，其中在我的开始日期和结束日期是从数据库中预先填充的。该控件是一个UIdatePicker插件。我想根据来自服务器的开始日期限制/禁用以前的日期。此外，当我更改日期时，我希望结束日期从开始日期后的一天开始。由于首先填充值，然后将控件添加到输入字段，因此我无法控制它。任何帮助都将不胜感激。代码如下：
如何使用Appium在datepicker中更改日期

我正在尝试使用Appium更改datepicker元素中的日期。我不能使用findElement（by.id（“id”）；因为我运行的是版本4.2.2（API 17）,而且据我所知,这个版本不支持by.id。使用selendroid,我可以像这样更改日期：在我的appium代码中，我尝试在默认日期之前访问它。例如，我试图像这样更改月份： noSuChelementException：无法使用给定
仅在datePicker中选择日期

是否可以允许datePicker只显示日期而隐藏年和月？我有两个活动，在活动A中，我有datePicker，它只显示月份和年份。在活动B中，我希望datePicker只显示日期，但无法从Internet上找到任何解决方案。活动A截图活动B
使用JavaFX Datepicker在MySql数据库中插入日期

我正在尝试使用JavaFX从数据选择器向mysql数据库插入日期。我累了提交这个代码。当我运行我的程序时，它给了我这个错误

使用php数组禁用datepicker中的日期和datepicker中onSelect中的timepicker中的时间

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档