vue-datepicker-next icon indicating copy to clipboard operation
vue-datepicker-next copied to clipboard

feat: add "is-start" and "is-end" to the first and last dates respectively

Open MrMohamedAbdallah opened this issue 1 year ago • 3 comments

That feature allow users to style the first and last cell in the dates range and single date.

For example, adding a border radius to the first and last ones.

image

MrMohamedAbdallah avatar Sep 28 '22 05:09 MrMohamedAbdallah

You can use getClasses prop.

<date-picker :get-classes="getClasses" />
{
  methods: {
    getClasses(cellDate, innerValue) {
        const length = innerValue.length
        const classes = []
        if (length) {
            if (cellDate.getTime() == innerValue[0].getTime()) classes.push('is-start');
            if (cellDate.getTime() == innerValue[length - 1].getTime()) classes.push('is-end');
        }
        return classes
     }
  }
}

mengxiong10 avatar Sep 28 '22 07:09 mengxiong10

Yeah, but that PR is to make it a feature in the library itself. It will make it easier for styling, no need to add the getClasses prop in each instance for such a simple classes.

MrMohamedAbdallah avatar Sep 28 '22 16:09 MrMohamedAbdallah

@mengxiong10 will that be merged soon?

MrMohamedAbdallah avatar Oct 04 '22 05:10 MrMohamedAbdallah