Как отобразить другой стиль для первой и последней даты, выбранной в DatePicker - PullRequest
Новая
       28

Как отобразить другой стиль для первой и последней даты, выбранной в DatePicker

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

Я пытаюсь создать форму с датой проверки и оплаты, все сделано .. За исключением того, что я просто не могу создать другой стиль для первой и последней даты.

даты со связанными цветами становятся оранжевыми, но я хочу красный цвет фона для первой и последней даты

Так есть ли способ добавить отдельный класс только для первой и последней даты

вот код, реплицированный на

https://jsfiddle.net/termi1290/a0L6y1zb/10/

Ниже приведен код, который я пробовал до сих пор 

 $(function() {
        dpmode='';
        var startDate='0';
        var endDate='0';
        $( "#ibe-from" ).datepicker({
            minDate: 0,
            dateFormat:"yy-mm-dd",
            changeMonth: true,
            numberOfMonths: 2,
            beforeShow:function(input, calendar){
                menuLocked=true;
                dpmode='depart';
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#ibe-from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#ibe-to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];

            },
            onClose: function( selectedDate ) {
                $( "#ibe-to" ).datepicker( "option", "minDate", selectedDate );
                $('#ibe-to').datepicker('show');
                startDate = selectedDate;
            }
        });
        $( "#ibe-to" ).datepicker({
            dateFormat:"yy-mm-dd",
            minDate:2,
            setDate: new Date(),
            changeMonth: true,
            numberOfMonths: 2,
            beforeShow:function(){
                dpmode='return'; 
            },
            beforeShowDay: function(date) {
                var date1 = $.datepicker.parseDate("yy-mm-dd", $("#ibe-from").val());
                var date2 = $.datepicker.parseDate("yy-mm-dd", $("#ibe-to").val());
                return [true, date1 && date2 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
            },
            onClose: function( selectedDate ) {
                // $( "#ibe-from" ).datepicker( "option", "maxDate", selectedDate );
                endDate = selectedDate;
            }
        });

        $('#ui-datepicker-div').delegate('.ui-datepicker-calendar td', 'mouseover', function() {
            if ($(this).data('year')==undefined)return;
            if (dpmode=='depart' && endDate=='0')return;
            if (dpmode=='return' && startDate=='0')return;

            var currentDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();
            currentDate = $.datepicker.parseDate("yy-mm-dd",currentDate).getTime();
            if (dpmode=='depart') {
                var StartDate = currentDate;
                var EndDate = $.datepicker.parseDate("yy-mm-dd",endDate).getTime(); 
            }else{
                var StartDate = $.datepicker.parseDate("yy-mm-dd",startDate).getTime();
                var EndDate = currentDate; 
            };


            $('#ui-datepicker-div td').each(function(index, el) {
                if ($(this).data('year')==undefined)return;

                var currentDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();

                currentDate=$.datepicker.parseDate("yy-mm-dd",currentDate).getTime();
                if (currentDate >= StartDate && currentDate <= EndDate) {
                    $(this).addClass('dp-highlight')
                }else{
                    $(this).removeClass('dp-highlight')
                };
            });
        });
    });

Может кто-нибудь, пожалуйста, помогите мне, чтобы сделать это, пожалуйста

...