Element: [Bug Report] Start & End Time, Steps with Datetime picker does not work

Created on 12 Oct 2017 · 13Comments · Source: ElemeFE/element

Element UI version

2.0.0-alpha.2

OS/Browsers version

Chrome 61

Vue version

2.4.4

Reproduction Link

https://jsfiddle.net/q017hro4/

Steps to reproduce

Just enter the start time, end time, and steps to the pickoptions of a datetime picker.

What is Expected?

The time should have a set start, end time and use steps.

What is actually happening?

It is not using those time options.

Source

Chris1904

Most helpful comment

About date-time-picker selectableRange's not working, I find a trick way to slove the problem.
let range = [moment('2018-12-11 12:00:00','YYYY-MM-DD HH:mm:ss').toDate(), moment().toDate()];
this.$refs.dateTimePicker.picker.$refs.timepicker.$refs.spinner.selectableRange=[range];

hiro0729 on 11 Dec 2018

🎉2 👍2

All 13 comments

start,end, step only work for TimeSelect, use selectableRange for DateTimePicker

wacky6 on 13 Oct 2017

Thanks for the response. I guess I didn't fully understand the documentation. I assume steps are not allowed selectableRange? Any plan of implementing it? Thanks for all your work. Love this datetimepicker!

Chris1904 on 13 Oct 2017

DateTimePicker basically = DatePicker + TimePicker

TimePicker = choose any time, eg: 10:00, 10:01, 10:02, ....
TimeSelect = choose from a list time points, eg: 10:00, 10:15, 10:30, ...

I think currently there is no plan to support TimeSelect in DateTimePicker

wacky6 on 13 Oct 2017

Thanks @wacky6 ! Appreciate your support.

My bad, I thought the Time Select was a part of the Time Picker, I misunderstood that part. Ok, fair enough. Would love to see it sometime though :-)

Chris1904 on 13 Oct 2017

@wacky6 selectableRange 需要在 DateTimePicker 上设置还是在它的picker-options 上设置

mcdongWang on 17 Jan 2018

picker-options

wacky6 on 17 Jan 2018

@wacky6 并没有生效可以来个demo么?

mcdongWang on 17 Jan 2018

@Leopoldthecoder
date-time-picker 不能用 selectableRange 么？

wacky6 on 17 Jan 2018

@wacky6 我看你在其它issue的回答里提到了可以用=.= 所以才问的

mcdongWang on 19 Jan 2018

@Leopoldthecoder
date-time-picker 不能用 selectableRange 么？

https://jsfiddle.net/Lcqmjxb6/
date-time-picker 的picker-options selectableRange 没有效果

eicoder on 1 Nov 2018

hiro0729 on 11 Dec 2018

🎉2 👍2

Interesting, can you make a pr? Seems date-range.vue fails to proxy relevant props.

wacky6 on 11 Dec 2018

About date-time-picker selectableRange's not working, I find a trick way to slove the problem.
let range = [moment('2018-12-11 12:00:00','YYYY-MM-DD HH:mm:ss').toDate(), moment().toDate()];
this.$refs.dateTimePicker.picker.$refs.timepicker.$refs.spinner.selectableRange=[range];

thk to this,
I set pickerOptions.onPick around here

// import dayjs or moment
// next line added out of pickerOptions
const vm = this;


onPick({ maxDate, minDate}) {
  // same day
  if (dayjs(minDate).isSame(dayjs(), 'day')) {
    const range = [dayjs().set('hour', 0).set('minute', 0).set('second', 0).toDate(), dayjs().toDate()]
    this.$nextTick(() => {
      vm.$refs.dateTimePicker.picker.$refs.minTimePicker.$refs.spinner.selectableRange = [range];
    })
  }
  if (dayjs(maxDate).isSame(dayjs(), 'day')) {
    const range = [dayjs().set('hour', 0).set('minute', 0).set('second', 0).toDate(), dayjs().toDate()]
    this.$nextTick(() => {
      vm.$refs.dateTimePicker.picker.$refs.maxTimePicker.$refs.spinner.selectableRange = [range];
    })
  }
},