yuche / vue-strap

Bootstrap components built with Vue.js
http://yuche.github.io/vue-strap/
MIT License
4.71k stars 929 forks source link

Datepicker disabled days not working #288

Open likeadeckofcards opened 8 years ago

likeadeckofcards commented 8 years ago

I have tried both version 1.0.11 and 1.0.10 and neither one work. I am trying to disable days based on the selection above the datepicker. Basically if they chose a value that is a sunday I want everything else to be disabled. Everything I have tried it passes in the array of disabled days but it won't disable those days to make it where the user can only choose that day of the week.

My Vue file:

<template>
    <div class="col-xs-12">
        <label for="session">Skate session preference:</label>
        <br>
        <select id="session" name="session" class="form-control" v-model="selectedSessionId">
            <option value="">Select a Session</option>
            <option :value="session.id" v-for="session in sessions">{{session.session_description}}</option>
        </select>
        <datepicker
                :value.sync="selectedDate"
                :disabled-days-of-Week="getDays"
                format="yyyy-MM-dd"
        >
        </datepicker>
    </div>
</template>

<script>
    var Datepicker = require('vue-strap/dist/vue-strap.min').datepicker;
    export default{
        data(){
            return{

            }
        },
        computed: {
            selectedSession() {
                if(this.selectedSessionId != "") {
                    for(var session in this.sessions) {
                        if(this.sessions[session].id == this.selectedSessionId) {
                            return this.sessions[session];
                        }
                    }
                } else {
                    return "";
                }
            },
            getDays() {
                var avail = [0,1,2,3,4,5,6];
                if(this.selectedSessionId != "") {
                    return avail.filter( function(day) {
                        return day != this.selectedSession.day;
                    }.bind(this));
                } else {
                    return [];
                }
            }
        },
        components:{
            'datepicker':Datepicker
        },
        props:{
            sessions:{
                default() {
                    return [];
                }
            },
            selectedSessionId:{
                default:""
            },
            selectedDate:{
                default:""
            }
        }
    }
</script>

Here is a screen capture of the data being passed in and the datepicker itself where you can see that it is not disabling days. datepicker

likeadeckofcards commented 8 years ago

@yuche or anyone else have you encountered this problem at all?

wffranco commented 8 years ago

You wrote disabled-days-of-Week, your W is in uppercase. vue is case sensitive, put all in lowercase.


EDIT: sorry I test it and that work if is uppercase, so I don't know what could be the problem...

wffranco commented 8 years ago

I did some tests and work right... You tested the last version?