# VueJS

## Component

The VueJS Component is new and currently under development.
Integration

The VueJS Component can be easily imported and used in VueJS.

    <template>
        <div id="app">

            <div class="field">
                <label class="label">Date</label>
                <div class="control">
                    <bulma_calendar type="date" v-model="date" :options="options" dialog range />
                </div>
            </div>

            <div class="field">
                Selected Range: {{ displayDate }}
            </div>

        </div>
    </template>

    <script>

        import bulma_calendar from "bulma-calendar/dist/components/vue/bulma_calendar.vue";

        export default {
            components: { bulma_calendar },
            computed: {
                displayDate() {
                    if (!this.date[0] || !this.date[1]) return '- n/a -';
                    return this.date[0] + ' to ' + this.date[1];
                }
            },
            data() {
                return {
                    date: [null, null],
                    options: {
                        dateFormat: 'dd.MM.yyyy',
                        labelFrom:  'From',
                        labelTo:    'To',
                    }
                }
            }
        }

    </script>

Events

Name | Description | Values
--- | --- | ---
Name | Description | Values
`save` | Triggered when start / end date is saved | `date | [date, date]`
`select` | Triggered when start / end date is selected, but not yet validated and saved | `date | [date, date]`

Options

Name | Description | Type | Default value
--- | --- | --- | ---
Name | Description | Type | Default value
`type` | Bulma Calendar Type: date|time|datetime | `String` | `datetime`
`clearable` | Date / Time is clearable | `Boolean` | `false`
`dialog` | Display Mode: Dialog | `Boolean` | `false`
`inline` | Display Mode: Inline | `Boolean` | `false`
`range` | Range Selection instead of Single Date | `Boolean` | `false`
`options` | JS Object with regular Bulma Calendar Options | `Object` | `{}`
`value` | Initial Start- / End-Time | `Date | [Date, Date] | null` | `null`