jQuery ui Datepicker

时间:2017-04-29 17:19:34

标签: javascript php jquery jquery-ui datepicker

我目前正在使用jQuery UI Datepicker脚本来显示租借的可用日期。我使用推荐的方式来提供脚本是一系列的禁用日,但我的问题是,每天的租赁结束也应该作为新租赁的开始日期。客户要求在第一天和最后一天使用红色三角形表示它应该可用。如何使用此插件实现这一目标?

$(function() {
    <?php

    $date_range = array();
    $select = mysql_query("SELECT * FROM reservation WHERE cid='$chalet[id]' and status='1'");
    while ($r = mysql_fetch_array($select)) {
        $date_range1 = createDateRangeArray(date("Y-m-d", $r[arrive]), date("Y-m-d", $r[depart]));

        // How can i use those 2 arrays to detect the right triangle to display and make sure the day is selectable
        $first[] = reset($date_range1);
        $last[] = end($date_range1);

        $date_range = array_merge($date_range, $date_range1);
    }

    foreach ($date_range as $key => $values) {
        $dates .= '"' . $values . '", ';
    }
    if ($dates) {
        echo 'var disableddates = [' . substr($dates, 0, -2) . "];\n";
    } else {
        echo "var disableddates = [];\n";
    }

    ?>
    function DisableSpecificDates(date) {
        var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
        return [disableddates.indexOf(string) == -1];
    }
    $( "#calendrier" ).datepicker({
        beforeShowDay: DisableSpecificDates
    });
});

以上代码呈现以下内容

enter image description here

我需要它看起来像这样:

enter image description here

1 个答案:

答案 0 :(得分:2)

希望你能得到这个想法,请原谅,如果有任何错误,直接从脑中直接书写而不进行任何测试。这会将.arrival / .departure类添加到给定的日期。

PHP:

$arrivals = $departures = $disabledDates = array();
while ($r = mysql_fetch_array($select)) {
    $arrivals[] = $r['arrive'];
    $departures[] = $r['departure'];
    $disabledDates[] = ....

JS

var arrivals = <?=json_encode($arrivals)?>;
var departures = <?=json_encode($departures)?>;
var disabledDates = <?=json_encode($disabledDates)?>;


$( "#calendrier" ).datepicker({

    beforeShowDay: function(date){
        var myDate = jQuery.datepicker.formatDate('YYYY-mm-dd', date);

        if($.inArray(myDate, disabledDates)) 
            return [false];
        else if($.inArray(myDate, arrivals)) 
            return [true, 'arrival', 'Arrival day'];
        else if($.inArray(myDate, departures)) 
            return [true, 'departure', 'Departure day'];
        else
            return [true];
    }
}