<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)}">
                    <datetime
                        type="datetime"
                        class="form-control"
                        v-model="form[input_name_1]"
                        value-zone="Asia/Singapore"
                        zone="Asia/Singapore"
                        @input="form.errors.clear(input_name_1)"
                    ></datetime>
                    <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)}">
                    <datetime
                        type="datetime"
                        class="form-control"
                        v-model="form[input_name_2]"
                        value-zone="Asia/Singapore"
                        zone="Asia/Singapore"
                        @input="form.errors.clear(input_name_2)"
                    ></datetime>
                    <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 { Datetime } from 'vue-datetime';
    import 'vue-datetime/dist/vue-datetime.css';
    import moment from 'moment';

    export default {
        props: ['input_name_1', 'input_name_2', 'form', 'placeholder', 'label', 'disable_pass_date'],
        components: {
            Datetime
        },
        data() {
            let vm = this;
            return {
            }
            
        }
    }
</script>