Динамически выделять даты для datetimepicker - плагин, используемый для datepicker, Jquery datetimepicker full - PullRequest
Новая
       12

Динамически выделять даты для datetimepicker - плагин, используемый для datepicker, Jquery datetimepicker full

0 голосов
/ 27 марта 2020 
 $("#myDate").datetimepicker({
        timepicker: false,
        format: 'Y-m-d',
        scrollInput: false,
        value: new Date(),
            onChangeDateTime: function (dp, $input) {
                LoadBasedOnDate();
        }
        ,
            highlightedDates: [
                dateArray[0]

        ]


        });

dateArray содержит набор дат в виде массива, например [«2020-03-17», «2020-03-18», «2020-03-20»] Здесь dateArray [0], «2020-03 -17 "подсвечивается. Как можно выделить каждую дату из dateArray в datepicker? jquery используется полный плагин datetimepicker

enter image description here

1 Ответ

0 голосов
/ 28 марта 2020

Вот ответ на ваш вопрос. Вам нужно использовать функцию beforeShowDay в указателе даты jquery ui. В этом вы можете сравнить все даты с вашим dateArray. Добавьте css -класс-к-подсветке этот класс, если совпадение найдено. 

<html>

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script>
        $(function () {
           var dateArray  = [ "2020-03-17", "2020-03-18","2020-03-20"];
            $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                beforeShowDay: function (date) {
                    // First convert all values in dateArray to date Object and compare with current date
                    var dateFound =  dateArray.find(function(item) {
                        var formattedDate = new Date(item);
                        return date.toLocaleDateString() === formattedDate.toLocaleDateString();
                    })
                     // check if date is in your array of dates
                    if(dateFound) {
                        // if it is return the following.
                        return [true, 'css-class-to-highlight', 'tooltip text'];
                    } else {
                        // default
                        return [true, '', ''];
                    }

                }
            });

        });
    </script>
    <style type="text/css">
       

        .css-class-to-highlight a{
           background-color: blue !important;
           color: #fff !important;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="NonBusinessDays" />
           <div id="datepicker"></div>
        </div>
    </form>
</body>

</html>
...