Как я могу сделать даты daterangepicker выпадающим меню? - PullRequest
0 голосов
/ 08 мая 2020

Я использую тему бронирования туров. Я не хочу, чтобы даты в календаре резервирования темы открывались в форме календаря, и я хочу удалить пассивные даты, которые отображаются в календаре. Как мне написать для этого код. Вы можете помочь мне? Я хочу сделать: Я хочу сделать: на моем сайте: на моем сайте: плагин календаря: плагин календаря:

(function ($) {
new Vue({
    el:'#bravo_tour_book_app',
    data:{
        id:'',
        extra_price:[],
        person_types:[],
        message:{
            content:'',
            type:false
        },
        html:'',
        onSubmit:false,
        start_date:'',
        start_date_html:'',
        step:1,
        guests:1,
        price:0,
        max_guests:1,
        start_date_obj:'',
        duration:0,
        allEvents:[],
        buyer_fees:[],
    },
    watch:{
        extra_price:{
            handler:function f() {
                this.step = 1;
            },
            deep:true
        },
        start_date(){
            this.step = 1;
        },
        guests(){
            this.step = 1;
        },
        person_types:{
            handler:function f() {
                this.step = 1;
            },
            deep:true
        },
    },
    computed:{
        total_price:function(){
            var me = this;
            if (me.start_date !== "") {
                var total = 0;
                var total_guests = 0;
                var startDate = new Date(me.start_date).getTime();
                for (var ix in me.allEvents) {
                    var item = me.allEvents[ix];
                    var cur_date = new Date(item.start).getTime();
                    if (cur_date === startDate) {
                        if (item.person_types != null) {
                            me.person_types = Object.assign([], item.person_types);
                        } else {
                            me.person_types = null
                        }
                        me.max_guests = parseInt(item.max_guests);
                        me.price = parseFloat(item.price);
                    }
                }
                // for person types
                if (me.person_types != null) {
                    for (var ix in me.person_types) {
                        var person_type = me.person_types[ix];
                        total += parseFloat(person_type.price) * parseInt(person_type.number);
                        total_guests += parseInt(person_type.number);
                    }
                }else{
                    // for default
                    total_guests = me.guests;
                    total += me.guests * me.price;
                }

                for (var ix in me.extra_price) {
                    var item = me.extra_price[ix];
                    var type_total = 0;
                    if (item.enable === true) {
                        switch (item.type) {
                            case "one_time":
                                type_total += parseFloat(item.price);
                                break;
                            case "per_hour":
                                if (me.duration > 0) {
                                    type_total += parseFloat(item.price) * parseFloat(me.duration);
                                }
                                break;
                            case "per_day":
                                if (me.duration > 0) {
                                    type_total += parseFloat(item.price) * Math.ceil(parseFloat(me.duration) / 24);
                                }
                                break;
                        }
                        if (typeof item.per_person !== "undefined") {
                            type_total = type_total * total_guests;
                        }
                        total += type_total;
                    }
                }

                for (var ix in me.buyer_fees) {
                    var item = me.buyer_fees[ix];
                    var type_total = 0;

                    type_total += parseFloat(item.price);

                    if (typeof item.per_person !== "undefined") {
                        type_total = type_total * total_guests;
                    }
                    total += type_total;
                }

                return total;
            }
            return 0;
        },
        total_price_html:function(){
            if(!this.total_price) return '';
            return window.bravo_format_money(this.total_price);
        },
        daysOfWeekDisabled(){
            var res = [];

            for(var k in this.open_hours)
            {
                if(typeof this.open_hours[k].enable == 'undefined' || this.open_hours[k].enable !=1 ){

                    if(k == 7){
                        res.push(0);
                    }else{
                        res.push(k);
                    }
                }
            }

            return res;
        }
    },
    created:function(){
        for(var k in bravo_booking_data){
            this[k] = bravo_booking_data[k];
        }
    },
    mounted(){
        var me = this;
        /*$(".bravo_tour_book").sticky({
            topSpacing:30,
            bottomSpacing:$(document).height() - $('.end_tour_sticky').offset().top + 40
        });*/

        var options = {

            singleDatePicker: true,
            showCalendar: false,
            sameDate: true,
            autoApply           : true,
            disabledPast        : true,
            dateFormat          : bookingCore.date_format,
            enableLoading       : true,
            showEventTooltip    : true,
            classNotAvailable   : ['disabled', 'off'],
            disableHightLight: true,
            minDate:this.minDate,
            opens:'left',
            isInvalidDate:function (date) {
                for(var k = 0 ; k < me.allEvents.length ; k++){
                    var item = me.allEvents[k];
                    if(item.start == date.format('YYYY-MM-DD')){
                        return item.active ? false : true;
                    }
                }
                return false;
            }
        };

        if (typeof  daterangepickerLocale == 'object') {
            options.locale = _.merge(daterangepickerLocale,options.locale);
        }
        this.$nextTick(function () {
            $(this.$refs.start_date).daterangepicker(options).on('apply.daterangepicker',
                function (ev, picker) {
                    me.start_date = picker.startDate.format('YYYY-MM-DD');
                    me.start_date_html = picker.startDate.format(bookingCore.date_format);
                })
                .on('update-calendar',function (e,obj) {
                    me.fetchEvents(obj.leftCalendar.calendar[0][0], obj.leftCalendar.calendar[5][6])
                });
        });
    },
    methods:{
        handleTotalPrice: function () {
        },
        fetchEvents(start,end){
            var me = this;
            var data = {
                start: start.format('YYYY-MM-DD'),
                end: end.format('YYYY-MM-DD'),
                id:bravo_booking_data.id,
                for_single:1
            };
            console.log(data);

            $.ajax({
                url: bravo_booking_i18n.load_dates_url,
                dataType:"json",
                type:'get',
                data:data,
                beforeSend: function() {
                    $('.daterangepicker').addClass("loading");
                },
                success:function (json) {
                    me.allEvents = json;
                    var drp = $(me.$refs.start_date).data('daterangepicker');
                    drp.allEvents = json;
                    drp.renderCalendar('left');
                    if (!drp.singleDatePicker) {
                        drp.renderCalendar('right');
                    }
                    $('.daterangepicker').removeClass("loading");
                },
                error:function (e) {
                    console.log(e);
                    console.log("Can not get availability");
                }
            });
        },
        formatMoney: function (m) {
            return window.bravo_format_money(m);
        },
        validate(){
            if(!this.start_date)
            {
                this.message.status = false;
                this.message.content = bravo_booking_i18n.no_date_select;
                return false;
            }
            return true;
        },

1 Ответ

0 голосов
/ 08 мая 2020

Если вы хотите использовать просто раскрывающийся список, почему бы вам не создать простой, как показано ниже?

<select name="availableDates">
<option value="0">Select a date</option>
<?php
  //get the available dates from your database (or whatever source)
  $getDates = $connection->prepare("select Date from availableDatesTable where hotelID=?");
  $getDates->bind_param('i',$hotelID); //you could get the hotel ID via a $_GET variable
  //store the results into an array
  //loop through the array as follows:
  foreach($resultArray as $res)
  {
    echo '<option value="'.$res.'">'.date('d F Y',$res).'</option>';
  }
?>
</select>

Не уверен, какой источник данных вы используете, но это предложение, которое, мы надеемся, может привести к искомому решению.

...