Changing the displayed values on shortcut select

[boriskogan81]

I would like, when a shortcut is selected, for that shortcut's text to be displayed in the input field.

EG, if I select "Last 7 Days," I'd like the input field to say "Last 7 Days" instead of the two date range.

My code:

                        <date-picker v-model="options.datePickerModel"
                                 type="datetime"
                                 range
                                 id="datepicker"
                                 format="YYYY-MM-DD hh:mm:ss"
                                 :minute-step="1"
                                 :shortcuts="datePickerShortcuts"
                                 :lang="lang"/>

...
                datePickerShortcuts: [
                    {
                        text: '24 hours',
                        start: new Date() - 3600 * 1000 * 24,
                        end: new Date()
                    },
                    {
                        text: '48 hours',
                        start: new Date() - 3600 * 1000 * 48,
                        end: new Date()
                    },
                    {
                        text: '7 days',
                        start: new Date() - 3600 * 1000 * 24 * 7,
                        end: new Date()
                    },
                    {
                        text: '30 days',
                        start: new Date() - 3600 * 1000 * 24 * 30,
                        end: new Date()
                    }
                ],

[mengxiong10]

Implementing this feature requires a breaking change. I will provide an interface to implement it in the next big version, then I'll close it.

[druxik]

selectNextThreeDay(emit) {
  const start = new Date();
  const end = new Date();
  end.setTime(end.getTime() + 3 * 24 * 3600 * 1000);
  const date = [start, end];
  emit(date);
},

The example from the documentation does not work, what am I doing wrong? TypeError: emit is not a function

[mengxiong10]

@druxik If you are in v3.x. You just need return the date;

selectNextThreeDay(emit) {
  const start = new Date();
  const end = new Date();
  end.setTime(end.getTime() + 3 * 24 * 3600 * 1000);
  const date = [start, end];
  return date;
},

[druxik]

Hey. Thanks for the answer. My version is that I had version 2 :)

[adjenks]

You can just replace the input element with your own input element using the slot and create buttons in the side panel instead of using the shortcut. Then change the value and the display yourself. Ha, sorry, didn't realize how old this was.

[sandeepblockb]

Is this issue any solution ? I want to show the Shortcut text in the input box in addition to the date range