Allow calendar popup to be permanently showing

[olivertappin]

I can't see from the documentation anything about hiding the input, or allowing the calendar popup to be permanently showing. If this isn't already a feature, it definitely should be.

[mengxiong10]

you can use the css to hide the input. popupStyle={ display: block } can allow the popup permanently showing, but it'll have many problem to the popup position.

[olivertappin]

I've managed to do this with CSS in the mean time, but I would ask this this becomes a feature, baked in with the calendar. I also found it quite frustrating having to essentially un-style the calendar from the styling that comes with it. Maybe this could be a new feature?

[mengxiong10]

I understand. You just want a calendar component instead of calendar-picker component. You can use the inner component like this.

import DatePicker from 'vue2-datepicker'
const CalendarPanel = DatePicker.components.CalendarPanel

/**
 * or
 * import CalendarPanel from 'vue2-datepicker/src/calendar.vue'
 */

export default {
  components: { CalendarPanel },
  data () {
    return {
      value: new Date()
    }
  },
  methods: {
    selectDate (date) {
      this.value = date
    }
  }
}

// cann't use v-model
// I have not considered this kind of demand before, I may improve it later.
<calendar-panel
        visible
        :value="value"
        @select-date="selectDate" />

[olivertappin]

Great, thank you for the workaround.

[Hatteron]

Thank You, how i can change 'calendar-panel' lang ? Property 'lang' - don't work. Example: <calendar-panel visible :value="value" lang="ru" @select-date="selectDate" />

[mengxiong10]

@Hatteron calendar-panle don't support the lang. You need to use date-picker component and to set the style to hide the input.

But you can mock the DatePicker like this.

Vue.component('DatePicker', {
  name: 'DatePicker',
  data () {
    return {
      language: {
        'days': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        'months': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        'pickers': ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
        'placeholder': {
          'date': 'Select Date',
          'dateRange': 'Select Date Range'
        }
      }
    }
  },
  render (h) {
    return h('div', this.$slots.default)
  }
})

<DatePicker>
   <calendar-panel
      visible
      :value="value"
      @select-date="selectDate" />
</DatePicker>
```html

[mengxiong10]

v3.0 add inline feature.

<date-picker inline />

[nelsonSetyawan09]

how i can change theme date-picker, like background-color and color?

[mengxiong10]

@nelsonSetyawan09 change the css by yourself.