mengxiong10 / vue-datepicker-next

A datepicker / datetimepicker component for Vue3
https://mengxiong10.github.io/vue-datepicker-next/
MIT License
147 stars 34 forks source link

[CalendarComponent] doesn't support prefix-class or @change event #11

Open runxc1 opened 2 years ago

runxc1 commented 2 years ago

Vue-datepicker-next:

I upgraded from one of the older 4.x beta versions that I had been using and attempted to use the Calendar Component but really found it to be lacking in both the ability to style it as well as respond to other events like the change event that I had been using.

In the end I set :open="true" and ":append-to-body="false" which shows the calendar and then applied some horrible CSS hacks to get it to behave like the older inline CSS calendar, namely to hide the input and keep it from moving in relation to the input that is now hidden.

CSS applied

    $namespace: 'csd'; // <date-picker prefix-class="csd" />

    $default-color: #555;
    $primary-color: #1284e7;

    #TheIDofaContainingDiv {
        @import '~vue-datepicker-next/scss/index.scss';

        .csDatePickerWrap {
            /* height: 280px;
            width: 260px;*/
            padding-top: 5px;

            div.csd-datepicker {
                position: relative !important;
                width: inherit;
            }

            .csd-input-wrapper {
                display: none;
            }

            .csd-datepicker-popup {
                box-shadow: none;
            }

            .csd-datepicker-main.csd-datepicker-popup {
                top: 0 !important;
                position: relative !important;
                border:none;
            }
        }
    }
mengxiong10 commented 2 years ago

You can replace change to update:value, and use provide to replace prefix-class props

  provide: {
    datepicker_prefixClass: 'csd'
  },

I'll update the document.