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

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

	export default {
		props: ['input_name_1', 'input_name_2', '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>