时间戳

首页 > 解决方案 > Kartik Multidate DatePicker 和 beforeShowDay 在 Yii2 中使用 AJAX

jquery - Kartik Multidate DatePicker 和 beforeShowDay 在 Yii2 中使用 AJAX

问题描述

我正在使用Kartik datepicker并尝试AJAX以array. 现在日子变得大胆了，但是它打了太多AJAX电话，每当我想更改月份时，都需要很长时间才能更改。这是我的代码

<?php
                echo DatePicker::widget([
                         'name' => 'check_multiple_date',
                         'type' => DatePicker::TYPE_INLINE,
                         'options' => ['placeholder' => 'Select issue date ...', 'id' => 'date-picker-multiple', 'toggleActive' => true],
                         'pluginOptions' => [
                             'format' => 'dd-M-yyyy',
                             'todayHighlight' => false,
                             'multidate' => true,
                             'beforeShowDay' => new JsExpression($JsBeforeDay)
                         ],
                    ]);
?>

下面是一些日子JQuery的呼吁AJAX和大胆。

<?php
 $JsBeforeDay = <<<EOF
 [enter image description here][1]function(date){
    var dates;
    var duration =30;
    $.ajax({
            async: false,
            url: siteDomain+'/reservation/find-reservations-by-duration?duration='+duration,
            type: 'POST',
            data: {format: 'json'},
            success: function(response) {
                dates = response; 
            },
            error: function(response) {
            }
        });

    var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
    for (var i=0; i < dates.length; ++i)
        if (year == parseInt(dates[i][0]) && month == parseInt(dates[i][1]) - 1 &&  day == parseInt(dates[i][2]))
        return {classes: 'bold-text'};
    return [false];

 }
 EOF;
 ?>

AJAX结果，具体的日期格式正在改变，但是如图所示， 它拨打了太多电话点击查看图片

标签： jqueryajaxyii2

解决方案

我认为您可以通过在此处执行一些技巧来解决此问题： 1）您可以从当前操作而不是 Ajax 请求传递日期（ajax 响应），例如：

render(..., ['datesInAction' => reservation::find....()])

然后您可以将 $datesInAction 直接传递给 $JsBeforeDay。

2）如果您需要通过ajax执行此操作而不传递php变量，您可以在ajax请求之前设置标志...如果成功停止ajax请求并继续使用旧日期，但您需要在这里使用localstorage或全局js变量数据, 和标志...像这样：

var dates = localStorage.getItem('dates');
if(!dates){ 
$.ajax({
            async: false,
            url: siteDomain+'/reservation/find-reservations-by-duration?duration='+duration,
            type: 'POST',
            data: {format: 'json'},
            success: function(response) {
                dates = response;
                localStorage.setItem('dates', dates);
            },
            error: function(response) {
            }
        });
}

注意：Kartik DatePicker 是 Bootstrap-date-picker 的构建依赖，请查看此参考。引导日期选择器

推荐阅读