Innologica / vue2-daterange-picker

Vue2 date range picker
https://innologica.github.io/vue2-daterange-picker/
MIT License
329 stars 208 forks source link

CSS classes shown as [object Object] #250

Closed pbowyer closed 2 years ago

pbowyer commented 3 years ago

I included vue2-daterange-picker 0.6.5 in a Vue 2 component following the instructions on the homepage.

When I select a date range the styles aren't correctly applied. Inspecting, there's a problem with the computed CSS classes: image which means the styles for date ranges do not apply: image

I tried using an earlier version 0.6.4 to see if it fixed it (our site uses Bootstrap), but it doesn't.

The relevant bits of the single file component are:

<template>
  <div>

    <date-range-picker
        ref="picker"
        opens="right"
        :locale-data="{ firstDay: 1, format: 'dd-mm-yyyy HH:mm:ss' }"
        :timePicker="true"
        :showDropdowns="true"
        v-model="dateRange"
        @update="updateDateRange"
        :dateFormat="dateFormat"
    >
      <template v-slot:input="picker" style="min-width: 350px;">
        {{ picker.startDate | date }} - {{ picker.endDate | date }}
      </template>
    </date-range-picker>
  </div>
</template>
<script>
import DateRangePicker from 'vue2-daterange-picker'
//you need to import the CSS manually
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css'

export default {
  data() {
    return {
      dateRange: {
        startDate: null,
        endDate: null
      },
    }
  },
  methods: {
    updateDateRange(val) {
      // Called by the date picker when the range changes
      console.log(val)
    },
    dateFormat(dateObj) {
      return dateObj.toLocaleString();
    }
  },
  components: {
    DateRangePicker,
  },
}
</script>
nkostadinov commented 2 years ago

cannot reproduce, may be its fixed now :)