pignosecalenar: когда я нажимаю на календарь, получаю эти даты и их активные временные интервалы - PullRequest
0 голосов
/ 08 мая 2019

Я использую плагин pignoseclaendar.здесь у меня есть календарь pignose в div календаря, а в другом слоте с названиями слотов есть кнопки с 9:00 до 18:00.В текущую дату некоторые слоты отключены по текущему времени.Когда я нажимаю один раз на текущую дату в pignose, активные кнопки отключены, значит отключение становится ложным.После этого мне нужно, когда я нажимаю на дату и выбираю выбранный временной интервал, после выбора другой даты предыдущий выбор в временном интервале должен удалить, если я выбираю ранее выбранную дату, она должна показывать предыдущее выбранное время. enter image description hereenter image description here введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 08 мая 2019
its my script
$(document).ready(function() {

            // $(".slot_div").hide();
            //$('.pignose-calender-unit-active').prop('disabled', true);


            // var ampm = hour >= 12 ? 'pm' : 'am';
            // hour = hour % 12;
            // hour = hour ? hour : 12; // the hour '0' should be '12'
            // //minutes = minutes < 10 ? '0'+minutes : minutes;
            // var strTime = hour + ':' + 00 + ' ' + ampm;
            var today = '<?php  echo $today ?>' ;
            var hour = new Date().getHours();
            var min = new Date().getMinutes();
            $(".time-button").each(function() {

            if (hour > $(this).val())
                $(this).prop("disabled", true);
                $(this).addClass('disable_btn');

            });
});
 var d = new Date();
    var delay = 500;
    var month = d.getMonth()+1;
    var day = d.getDate();
    var output = d.getFullYear() + '/' +
        ((''+month).length<2 ? '0' : '') + month + '/' +
        ((''+day).length<2 ? '0' : '') + day;

    // console.log(today);
    var full_date;
    var prev;
    var dateselected;
         $('#calendar').pignoseCalendar({
            minDate: output,
            init: function(context) {
                        setTimeout(function() {

                        }, delay);

            },
            next: function(info, context) {
                setTimeout(function() {

                }, delay);
            },
            prev: function(info, context) {
                setTimeout(function() {

                }, delay);
            },

            select: function(date, obj) {
                var full_d=date[0].format('YYYY-MM-DD');
                var prev=date[0];
                var curnt=date[1];
                var full_date=new Date(full_d);
                $('#boxx').html(full_d);

                    $('#box').html(full_date.toDateString());
                    $('.time-button').prop('disabled', false);
                    if(date[0]){
                        //if ($('.time-button').hasClass('active')) {
                         $('.time-button').toggleClass('active');
                    }
                    if(date[1]){
                        $('.time-button').removeClass('active');
                    }

            }

        });
0 голосов
/ 08 мая 2019
   its my html code

 <div class="row">
                            <div class="col-md-7">
                                <div id="calendar1">
                                </div>
                                <div id="boxx1"></div>
                            </div>
                            <div class="col-md-5">
                                    <div class="slot_div" id="slot_div">
                                        <div class="media">
                                            <div class="media-body">
                                                <h2 class="slot_date"><div id="box1"></div></h2>
                                            </div>
                                            <div class="media-right">
                                                <div class="details-item"><i class="fas fa-clock"></i> 15 min</div>
                                            </div>
                                        </div>
                                            <div class="slot-list">
                                                    <p class="slot_text"><i>* Time slots are in IST</i></p>
                                                <div class="slot is-available">
                                                    <button class="time-button" id="update" type="button" value="9">
                                                        <span class="time-button-title">09.00am</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="10">
                                                        <span class="time-button-title">10.00am</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="11">
                                                        <span class="time-button-title">11.00am</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button" id="update" type="button" value="12">
                                                        <span class="time-button-title">12.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="13">
                                                        <span class="time-button-title">01.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button" id="update" type="button" value="14">
                                                        <span class="time-button-title">02.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="15">
                                                        <span class="time-button-title">03.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="16">
                                                        <span class="time-button-title">04.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="17">
                                                        <span class="time-button-title">05.00pm</span>
                                                    </button>
                                                </div>
                                                <div class="slot is-available">
                                                    <button class="time-button"id="update" type="button" value="18">
                                                        <span class="time-button-title">06.00pm</span>
                                                    </button>
                                                </div>
                                                {{-- <div class="slot is-available">
                                                        <button class="time-button"  id="update" type="button" value="7.00pm">
                                                            <span class="time-button-title">07.00pm</span>
                                                        </button>
                                                </div> --}}
                                            </div>

                                    </div>
                                </div>

                        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...