Element: [Feature Request] Slots on datepicker

[andrewckor]

Existing Component

Yes

Component Name

Datepicker

Description

I would like to create two new slots for Datepicker similar to Dialog component.
One header and one footer that you can put custom views in there.
We can alternatively call them prefix / suffix.

I'm creating this ticket to ask @Leopoldthecoder , if a feature like this could be accepted and worth my time making it. The implementation will be very minimal and will not affect any existing user.

Here is a potential use case:

[wacky6]

You should ask @jikkai and @ziyoung for new feature requests now.

But, from technical perspective, given existing code base: this feature can not be easily implemented. The popup you see is isolated from date-picker's input box. I guess considerable refactor is needed to make these slots possible. You can check refactor considerations here: https://github.com/ElemeFE/element/issues/9878

Though I am stuck with school work at this moment, and do not have time to implement these refactors myself.

[andrewckor]

Your feedback is welcome @wacky6 but I don't know how can I contribute to those tickets, and because #9878 is too big I don't see it finishing any time soon.

Do you have any suggestion on how to proceed with smaller fixes?

[wacky6]

9878 is for major release (currently, no clear timeline). I would allocate at least one month for that.

Thanks for your interest in contributing.

You can look through issue lists for small fixes. I think there are a few date-picker bugs.

For feature requests, ask for project owner's approval before working on them. They have the final say whether a feature is to be accepted.

---

For date picker, https://github.com/ElemeFE/element/issues/11353 could be a good start. Also, there is community requests to add week format to value-format (by modifying the underlying fecha library).

[andrewckor]

I'm afraid that if the datepicker structure changes completely it might be a waste of time to build something at the moment, until you are done. Or not?

[wacky6]

The problem is that I don't know when I would have enough time to do so.

Small changes are ok, like value-format. I don't think they will be thrown away even if we do a major refactor.

As long as the new feature does not change the code structure significantly, and is a non-breaking change, they can be performed now. Also, when I did the refactor for 2.0 last year, most code are reused (but may be cut-pasted into different locations).

If you really want add header / footer, ask for @ziyoung 's approval. I would recommend you come up with more convincing use cases.

Don't worry about API design at the moment. If we are to include 9878 in 3.0 release, most date-picker API will be broken anyway (That's the purpose of doing a major release).

[andrewckor]

Ok thank you, then let's wait for @ziyoung 's approval before I start.

[ziyoung]

@andrewckor Can you explain the usage scenario of this? You can choose week, month or year by setting type now.http://element-cn.eleme.io/#/en-US/component/date-picker#other-measurements

[andrewckor]

My point is that datepicker needs a space equaly on top and bottom to display additional information or actions that are not directly connected to the calendar.

My example above shows the option to display a button checkbox at the top of the datepicker, that let you switch between type: week | month.

Another example would be an option to display an alert message at the top of the calendar that notify your customers. Ex.:

 ⚠️Deliveries might be delayed during christmas holidays, make sure you pick a day at least 3 days before christmas.

[wacky6]

I just want to add that dynamically change type of date picker is to be deprecated in the future. Switching of panel type will require a full remount of the component.

[andrewckor]

@wacky6 This is how I did it today, I used the shortcut links to change the type, then unmount and remount the calendar. It's dirty but it works.

text: 'Weekly',
onClick: (picker) => {
    this.type = 'week';
    this.visible = false;

    this.$nextTick(() => {
        this.visible = true;
        this.$nextTick(() => {
            this.$refs.picker.focus();
        })
    })
}

It works like this:

[andrewckor]

@ziyoung Any thoughts on this:
https://github.com/ElemeFE/element/issues/13040#issuecomment-429364769

[ziyoung]

Another example would be an option to display an alert message at the top of the calendar that notify your customers.

Could you explain why add this attribute?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.