<template>
    <div >
        <label v-if="label" for="name">{{ label }}</label>
        <div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
            <datepicker
                :name="input_name" 
                input-class="form-control" 
                :placeholder="placeholder" 
                v-model="form[input_name]"
                @input="form.errors.clear(input_name)"
                format="dd-MM-yy"
                :disabled-dates="state.disabledDates"
            ></datepicker>
            <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import Datepicker from 'vuejs-datepicker';
    import moment from 'moment';

	export default {
		props: ['input_name', 'form', 'placeholder', 'label', 'disable_pass_date'],
        components: {
            Datepicker
        },
        data() {
            let vm = this;
            return {
                state : {
                    disabledDates: {
                        customPredictor: function(date) {
                            if (!vm.disable_pass_date) {
                                if(date < moment().startOf('day') ){
                                    return true
                                }
                            }
                        }
                    }
                }
            }  
        }
    }
</script>