tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
15.52k stars 1.63k forks source link

Allow for date-picker range to have a single panel #4188

Open wc-davide opened 1 year ago

wc-davide commented 1 year ago

This function solves the problem (这个功能解决的问题)

Especially in mobile, having two panels makes the page scroll horizontally, see:

image

Having an option to toggle between 1 or 2 panels could easily solve this issue, together with being a useful feature in desktop too (example: when you don't want the calendar to take up too much horizontal space)

Expected API (期望的 API)

Option single-pane="boolean", default false

zxj17815 commented 1 year ago

+1

jamalsaidapp commented 1 year ago

+2

i use css fix for this option 👍

.n-date-panel .n-date-panel-calendar.n-date-panel-calendar--end{
  display: none !important;
}
stylefieber commented 1 year ago

Another solution to have the calendars among themselves:

.n-date-panel { width: min-content!important; display: flex!important; flex-wrap: wrap; }

But this or another solution should definitely be built in for mobile view.

But anyway, props for that amazing framework!

ronannnn commented 1 month ago

+1