Disable a day in a datepicker that is not in the list-CodePudding

I have a variable that will receive some data, specifically the day of the week and something else.

let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]

I also have a bootstrap datepicker, and in it I need to determine which day is not in the wTime variable and disable this day.

How can i do this? Specifically, there is no Th day right now, and for now I manually disable it using daysOfWeekDisabled: '4'

let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let restaurantReserve = {
    init: function() {
        let _self = this;
        let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');

        $('#reservation-date').datepicker({
            startDate: ' 0d',
            daysOfWeekDisabled: '4'
        }).on('changeDate', function(e) {
            const arDate = e.date.toString().split(' ');
            let input = $('[name="RestaurantReservationForm[date]"]');
            input.val(arDate[3]   '-'   (e.date.getMonth()   1)   '-'   arDate[2]);
            _self.unSetError(input);
            $('#reservation-date .js-value').text(arDate[2]   ' '   arDate[1]);
        });

        $("#reservation-date").datepicker("setDate", today);
    },
    setError: function(ob) {
        $('#'   ob.data('btnId')).addClass('btn-error');
    },
    unSetError: function(ob) {
        $('#'   ob.data('btnId')).removeClass('btn-error');
    }
}

restaurantReserve.init();

.btn {
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

.btn-fourth {
    text-decoration: none;
    background: #e3e5e8;
    color: #747b8b;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<a  id="reservation-date" data-date=">">
  <span ></span> <span >click</span>
</a>

CodePudding user response：

Enhancing your current function with an Enum that gives us each day correlating to a number. Then simply filter that enum with the wTime array to find the missing days and disable them.

let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let wTimeEnum = {'Mon':'1', 'Tue':'2', 'Wed':'3','Thur':'4', 'Fri':'5', 'Sat':'6', 'Sun':'0'};
let restaurantReserve = {
    init: function() {
        let _self = this;
        let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');

        $('#reservation-date').datepicker({
            startDate: ' 0d',
            daysOfWeekDisabled: Object.keys(wTimeEnum).map((k) => wTime.every((d) => d.day != k) && wTimeEnum[k])
        }).on('changeDate', function(e) {
            const arDate = e.date.toString().split(' ');
            let input = $('[name="RestaurantReservationForm[date]"]');
            input.val(arDate[3]   '-'   (e.date.getMonth()   1)   '-'   arDate[2]);
            _self.unSetError(input);
            $('#reservation-date .js-value').text(arDate[2]   ' '   arDate[1]);
        });

        $("#reservation-date").datepicker("setDate", today);
    },
    setError: function(ob) {
        $('#'   ob.data('btnId')).addClass('btn-error');
    },
    unSetError: function(ob) {
        $('#'   ob.data('btnId')).removeClass('btn-error');
    }
}

restaurantReserve.init();

.btn {
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

.btn-fourth {
    text-decoration: none;
    background: #e3e5e8;
    color: #747b8b;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<a  id="reservation-date" data-date=">">
  <span ></span> <span >click</span>
</a>

CodePudding user response：

Why not make a day checker? If you want to dynamically get rid of a day, simply check to see which day is missing and set that to your daysOfWeekDisabled:

You could do something like this:

let dayCheck = ['Mon', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let disabledDay;

wTime.map(x => !dayCheck.includes(x['day']) ? disabledDay = x['day'] : '' )

daysOfWeekDisabled: disabledDay

This can be easily modified to accompany more days by simply turning disabledDay into an array and pushing the values into it within the conditional.

EDIT: One issue that has not been clarified is where is the user interacting with wTime. As in, how are you getting the user interaction to decide which day should be omitted? This solution is assuming wTime is somehow being modified through a user interaction. If that part is already decided, then this should work. If you need help with actually setting wTime up to be accessible to user engagement, then we'll need more code.

Full code would look like this:

let wTime = [{"day":"Mon"},{"day":"Tue"},{"day":"Wed"},{"day":"Fri"},{"day":"Sat"},{"day":"Sun"}]
let dayCheck = ['Mon', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
let disabledDay;
wTime.map(x => !dayCheck.includes(x['day']) ? disabledDay = x['day'] : '' )

let restaurantReserve = {
    init: function() {
        let _self = this;
        let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' ');

        $('#reservation-date').datepicker({
            startDate: ' 0d',
            daysOfWeekDisabled: disabledDay
        }).on('changeDate', function(e) {
            const arDate = e.date.toString().split(' ');
            let input = $('[name="RestaurantReservationForm[date]"]');
            input.val(arDate[3]   '-'   (e.date.getMonth()   1)   '-'   arDate[2]);
            _self.unSetError(input);
            $('#reservation-date .js-value').text(arDate[2]   ' '   arDate[1]);
        });

        $("#reservation-date").datepicker("setDate", today);
    },
    setError: function(ob) {
        $('#'   ob.data('btnId')).addClass('btn-error');
    },
    unSetError: function(ob) {
        $('#'   ob.data('btnId')).removeClass('btn-error');
    }
}

restaurantReserve.init();