Add a prop to control show/hide disabled hours, or minutes, seconds

[angela-1]

What problem does the feature solve?

When I use time-picker to quickly select a time, I wish to just leave the value not disabled on the panel.

Such as I disable every 10 minutes(enable 0, 10, 20...), to choose 08:00, 08:10, 08:20...
But the panel show 9 disabled value and 1 enable value.
It not make me choose value faster but slow down.

So i think if you can add a prop to control the show/hide of disabled hours(minutes, seconds), because these values
have been disabled by user, means user don't want to use them, so these disabled value should not be shown by default.

What does the proposed API look like?

The disabled value should not show by default.

<template>
  <n-time-picker
    v-model:value="time0"
    :show-disabled="true"
    :is-hour-disabled="isHourDisabled"
    :is-minute-disabled="isMinuteDisabled"
    :is-second-disabled="isSecondDisabled"
  />
</template>

name	type	default value
show-disabled	boolean	false

Thank your!

[07akioni]

Add hourStep minuteStep and secondStep prop can solve the problem. Are you willing to create a PR? It won't be hard.

[angela-1]

The xxStep can be done by isMinuteDisabled function like this:

function isMinuteDisabled(minute, selectedHour) {
  if (selectedHour === null) return false;
  return minute % 10 === 0 ? false : true;
}

and add one show-disabled prop can get goal.
It is clear that is-xx-disabled controls disabled values and show-disabled controls show/hide.

Your suggestions has a question.
How to deal with the relationship between xxStep and is-xx-disabled. If a user set both xxStep
and is-xx-disabled, there are two options:

1. which one (step disabled) has higher priority?
2. user should disabled all the values or just disabled values after filtered by step?

I think it is too heavy to add 3 prop for this and will puzzle user, "should i set step or set disabled value? It's not clear"

So far, I don't have a pr this feature: add show-disabled prop. Sorry!
After this, I will have a try.

Thanks for reply! 😄

[07akioni]

2. user should disabled all the values or just disabled values after filtered by step?

I thinks disabled can only controll the what does the item looks like (and whether it can be click). step and disabled shouldn't affect each other.

Maybe we can provide aseconds prop. For example :seconds="[30, 45]". Some people would like to see [0(disabled), 15(disabled), 30, 45] and others may like [30, 45]. Both is reasonable. If user pass just a number to seconds we treat it as a step.

It will be complex for users to define step by xxx-disabled.

[w1301625107]

If user pass just a number to seconds we treat it as a step.
如果用户传 secends 的值为8，如何处理呢？8不可以被60整除，但是可以被24 * 60 * 60 整除

1. 报错
2. 0:0:48- 0:0:56 - 0:1:04 - 0:0:12 - 0:0:20 这样吗

[07akioni]

If user pass just a number to seconds we treat it as a step.
如果用户传 secends 的值为8，如何处理呢？8不可以被60整除，但是可以被24 * 60 * 60 整除

1. 报错
2. 0:0:48- 0:0:56 - 0:1:04 - 0:0:12 - 0:0:20 这样吗

那可选的秒就是 0 8 16 24 32 40 48 56

[w1301625107]

那可选的秒就是 8 16 24 32 40 48 56

0 永远不会出现吗

[07akioni]

那可选的秒就是 8 16 24 32 40 48 56

0 永远不会出现吗

不好意思忘了 0😂 有的

[w1301625107]

那现在需求是这样吗

1. is-xx-disabled 依然保持某些时刻展示但是不能点击的状态
2. 如果需要隐藏某些时刻就用 seconds,minutes,hours
3. 2的优先级比1高

[07akioni]

那现在需求是这样吗

1. is-xx-disabled 依然保持某些时刻展示但是不能点击的状态
2. 如果需要隐藏某些时刻就用 seconds,minutes,hours
3. 2的优先级比1高

大意是对的，不过我想说的是这两个是正交的，不存在优先级的问题，是在做两件事。is-xxx-disabled 还会体现在输入框里面，这个 seconds 之类是不会影响的。

[w1301625107]

我明白了，意思是 seconds:[10,20,30] 会被 is-seconds-disabled 把 30变为不能点击的状态？

[07akioni]

我明白了，意思是 seconds:[10,20,30] 会被 is-seconds-disabled 把 30变为不能点击的状态？

对的，这是两个维度。

[07akioni]

ref #498