vuepic / vue3-date-time-picker Goto Github PK

Describe the bug

I'm parsing a URL query string to get the date/time I want to assign to a Date Picker. Here is some relevant part of the URL I'm parsing.

http://localhost:3000/target?to=1633111200000&clusterType=all

I have a function that parses the URL and assigns that value to the v-model that the DatePicker is assigned to.

Here is my template code:

<div> <p>TO</p> <Datepicker class="date-input" uid="second" v-model="apiToTime" /> </div>

By default in the setup option, it's set to the current date/time:

let apiToTime = ref(new Date());

Here is the code that parses the query.

apiToTime.value = new Date(parseInt(route.query.to))

When I print apiToTime in the template, I get the expected Date and Time, but in the Date Picker it doesn't update until I click on the date and time drop down.

In the first screenshot, you'll see apiToTime printed out and it's different than what the drop down is (I'm expecting the dropdown to match what's printed)

However, if I just click on the dropdown, the date then get's updated to what I expected (see second screenshot below)

Expected behavior
I'm expecting the Datepicker to be updated based on the passed time in the URL without having to click on the drop down. All the other query strings I pass in that is not a date/time, works as expected.

Desktop (please complete the following information):

• OS: Big Sur 11.6
• Browser chrome
• Version 94.0.4606.71

To Reproduce
<datepicker v-model="d" auto-apply month-picker/>
is not emit 'update:model-value'

After selecting the date, I want to update available dates reference first selected dates. Is this possible?

Hey,

first of all thanks for this datepicker component. I really like it.
Unfortunately I discovered a bug with the now button.

Describe the bug
If I have a one screen calendar for a date range and click on the now button I am not able to select a new date or date range.

To Reproduce
Steps to reproduce the behavior:

1. implement datepicker as follows:

<Datepicker :enableTimePicker="false" :locale="'de-DE'" :range="true" :twoCalendars="false" :format="'dd.MM.yyyy'" :showNowButton="true" v-model="date" ></Datepicker>

2. open picker and select a date range
3. click on now button
4. selected range disappears and I am not able to select a new date

Expected behavior
After I click on the now button I should be able to select a new date range.

Desktop (please complete the following information):

• OS: macOS 12.0.1
• Browser: Chrome v. 96.0.4664.55

Describe the bug
minTime prevents choosing a lower minute then minTime.minutes when the hour is higher then minTime.hours is. Same with maxTime: I can't select all minutes when hour is lower then maxTime.hours.
Maybe this is made by design, but for me "minTime - Sets the minimal available time to pick" means: this represents the lowest time you can choose, where minutes and hours combined(!) are the limit and not "lowest hour and independent lowest minute".
Furthermore using maxTime creates an effect of changing value as described in #38. I'm not using @update so I'm not sure why this happens.

To Reproduce
Set minTime and maxTime.
https://codesandbox.io/s/vue3-date-time-picker-demo-forked-31cce?file=/src/components/Demo.vue

Expected behavior
minTime: when an higher hour then minTime.hours is set, there is no limit for the minutes.
maxTime: when a lower hour then maxTime.hours is set, there is no limit for the minutes.
The time should not change when clicking inside the input.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome (96.0.4664.55), Safari (15.1)

Can you also add @opened (or some other name ) event. The same as closed event, opened event would be very usefull. Or maybe you had some other workaround in your mind? :)

Thanks!

Hello,

I am trying to use openMenu method on date-picker. When I call it on date-picker ref nothing happens. This is my code:

Template:
<Datepicker ref="datePickerRef" />

Setup:
const datePickerRef = ref(null);

const openDatePicker = () => { datePickerRef.value.openMenu(); };

Describe the bug
When the text input is focused and tab key is pressed, the next component is focused. However the calendar is still being shown, it doesn't hide.

Describe the bug
The menu has an incorrect position, when using any relative layout in a parent element.
This is due to the use of offsetTop which is then the offset to its relative parent instead of the viewport.

To Reproduce
Steps to reproduce the behavior:

1. Put the component within a container that has a relative CSS layout.
2. Open the menu
3. See the wrong positioning

Expected behavior
The position should be correct even within relative layouts, which is commonly used and needed in certain situations.
The position calculation could be fixed with some approaches like they are presented here: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element#11396681

Screenshots

Desktop (please complete the following information):

• OS: Manjaro Linux
• Browser: Firefox
• Version: 92

I would like to be able to put an icon in the clear-icon slot, but not have it emit the the @cleared event. Is this possible?

I have tried @clear.stop, but the @cleared event still occurs. Many thanks for building this!

hi,
I'm not sure if this is a bug, but I'm consulting the documentation for a couple of days and I can't get through, so I start wonder if it might be a bug (or am I just dumb)

this is an example of what I'm trying to do

Some props like clearable and format are working, some other (enableTimePicker, monthChangeOnScroll and autoApply) have no effect 🤷‍♂️

Describe the bug
if the calendar component place inside a popup with behaviour click outside the popup. the picker will autoclose the popup without selecting any value.

To Reproduce
Steps to reproduce the behavior:

1. Create a popup component (modal)
2. make the modal have behaviour on autoclosing if click outside the modal
3. put the datepicker component inside the modal
4. open the datepicker and click on the picker
5. See error

Expected behavior
should not closing the picker and modal, maybe add event stop propagation on the picker element?

timePickerComponent seems no 'second' field. Is it possible to add 'second' field to Time picker?

Describe the bug

enableTimePicker and autoApply don't work together correctly.

The time doesn't apply unless you select a date from the calendar again.

To Reproduce

<datepicker
  :enable-time-picker="true"
  :auto-apply="true"
/>

Set up a date picker with the properties above.

Expected behavior

After switching to the time input, adjusting the hours or minutes should update the date shown right away.

Screenshots

N/A

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chrome
• Version 94.0.4606.61 (Official Build) (64-bit)

Smartphone (please complete the following information):

N/A

Describe the bug
I would like to set the timezone for the date picker to UTC. By default what I notice is that it picks the timezone from the browser.

To Reproduce
Steps to reproduce the behavior:

1. I am trying to pass disabled dates as an array to the plugin via the :disabledDates="disabledDates" prop.
2. Note that the dates values that I am passing are in UTC format fetched from the server.
3. Now If I change my mac timezone to IST it disables the dates as expected but then if I change the my mac timezone to EST the disabled dates are offset by one day.

Expected behavior
I should be able to specify timezone to the plugin.

Screenshots
IST Timezone

EST timezone

Desktop (please complete the following information):

• OS: Mac
• Browser Firefox
• Version 94

Describe the bug
Time-picker with min-time and max-time props together with a default time set. When the time-picker is opened is showing the browser time, not the time that was set by default. This is true also when the time was set pragmatically.

To Reproduce
The min-time / max-time props are set and also a default time.
Now when I click on the time-picker, the value displayed is current time of the browser and not that that was set by default.
Please check here: https://codesandbox.io/s/vue3-date-time-picker-demo-forked-j3qee?file=/src/components/Demo.vue

Expected behavior
I want that the time should start from the time configured not jumping to the browser time.
This is happening in version 2.3.3

Is your feature request related to a problem? Please describe.
Currently it is not possible to open the menu without clearing the model-value immediately.

Describe the solution you'd like
It would be useful to have a setting to not automatically clear model-value on closeMenu + openMenu events. The model-value in this case would only be changed if you pressed "submit" or if auto-apply enabled when you finish clicking the second date.

Describe alternatives you've considered
The only alternative i see right now is to add a bunch of scaffolding to undo the behaviour manually by hooking into closeMenu event in some way.

Additional context
Add any other context or screenshots about the feature request here.

I am developing a system where it is necessary to include the client's date of birth, and there are clients who are born before the year 1970.
I was really upset about not being able to change the date of this client, and only after a lot of researching, I noticed that any date before 1970 is blocked for selection.

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
add new css variable for on hover text color

Describe the bug
Installed component in a Vue3 app, imported it locally along with the CSS. Component appears on page, however the CSS does not appear to be importing. No errors reported. See attached image - the left is before clicking to open, the right is when you click to open. No calendar appears.

The CSS file exists in the node_modules folder

To reproduce
Simply installed component, imported and added to existing page. Cannot find any cause as to why it's not appearing properly.

Is your feature request related to a problem? Please describe.

I have 2 date selectors and I don't want to use the range selection. But i do want to disable some dates in the second datepicker based on the value of the first datepicker

Describe the solution you'd like
I would love for a more simple way to disable all dates in the second datepicker before the selected date from the first datepicker.

Describe alternatives you've considered
Using a computed disabledDates with an array of al dates prior to selected date

If there is anything i missed that would already make this possible you can slap me with a fish 🥲

Describe the bug
I'm building a website using Bulma CSS framework to help me with styles and have come across the issue when using modal component. What it does is that when clicked on field to select date, the calendar pop up window appears underneath the modal. It can also be seen in the picture https://i.imgur.com/lfISIhv.png

To Reproduce
Steps to reproduce the behaviour:
Clone repo https://github.com/moreorover/vue3-date-time-picker-boiled install dependencies, serve the app, in the home page there is a button, press it, modal will show up, press on the field to pick date. A calendar pop up window will appear underneath the modal window.

Expected behaviour
Calendar pop up window expected to be on top of everything allowing user to pick date.

Screenshots
https://i.imgur.com/lfISIhv.png

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
I am using the datepicker inside a bootstrap dropdown menu and for any click action on the calendar (ex. select a day from the calendar, or change to month/year views) the click event propagates and closes the dropdown menu (parent container of the datepicker component).

Describe the solution you'd like
Can we add e.stopImmediatePropagation() to all events which triggered by click action?
I added it manually to vue3-date-time-picker.esm.js file

t("div",{role:"gridcell",class:"dp__calendar_item",key:o+s,onClick:e=>{e.stopImmediatePropagation();r.$emit("selectDate",n)},

and it worked as expected.

Describe alternatives you've considered
I don't consider alternatives for now.

Additional context

Issue:
https://drive.google.com/file/d/1VkypEwg2IBucVFJhn-HuLFTWGBprsLvQ/view?usp=sharing

After manually adding stopImmediatePropagation() method to selectDate event:
https://drive.google.com/file/d/12biokxxg2vqOF7S3g2ot8Zjhhotv5AO7/view?usp=sharing

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
it will be good to have scrolling if the date is open, what i mean by scrolling is when the calendar open, we can move the datepicker using scroll and the date will move by month, i.e : scroll up will bring the datepicker move to previous month and vice versa.

Additional context
will be usefull rather than have to click next or previous button

Describe the bug

when weekStart="1" and the first day of the month is sunday(0),
you will get the wrong calendar.

Screenshots

when weekStart="0" :

when weekStart="1" the wrong calendar :

Describe the bug
When using modal, the calendar pop up window always opens at the top centre of the page, regardless of the page scroll position.

To Reproduce
Steps to reproduce the behaviour:

1. Reproduction https://github.com/moreorover/vue3-date-time-picker-boiled
2. Go to home page.
3. Scroll down the page.
4. Open modal using a button in the table.
5. Click on date input field to open a calendar pop up window.
6. Calendar window opens at the very top of the page and is not visible if the page is scrolled.

Expected behaviour
Calendar window to open underneath the input field even if the page is scrolled.

Screenshots
https://i.imgur.com/eE7WTT8.gif

Is your feature request related to a problem? Please describe.
Once more about auto-applying value. My use-case is as follows: user clicks on the input, types the text and leaves the input clicking on another input. The value is not applied, because there's neither tab, nor enter. Do you have any ideas on how could this be solved?

Describe the bug
When datepicker is opened, there is no way to focus and select values via keyboard.

To Reproduce

1. Click input field (datepicker opens, focus stays on input); focusing input with tab key does not open datepicker at all though.
2. Press tab (focus goes away from input and closes datepicker)

Expected behavior

1. Focus input (input emits focus event, datepicker opens, focus shifts to datepicker, input does not emit a blur event)
2. Pressing tab should cycle focus on datepicker elements, pressing arrows should increment/decrement values
3. Pressing space/enter should confirm selection (pressing esc should close the datepicker) and emit blur event.

Screenshots
video - https://drive.google.com/file/d/1O8y7BOiE4r-IdztgoqWwEDKgJZPh8nkP/view?usp=sharing

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context
Additional but closely connected feature request: Consider implementing @focus/@blur events. The ability to control and manage input via javascript is hindered because there is no sensible way of knowing when the input or datepicker was focued/blurred even with extensive workardounds.

AM / PM Button with is24 = FALSE
Many attributes of the calendar (pictures, etc.) can be slotted in. One of the few missing slots that could be useful would be for the inline AM / PM selector when the is24 prop is false. It would be nice to allow for customization here for custom sliders, selectors, etc. to match the style of existing sites.

Also, the width of the AM / PM button is variable between the two selections, causing the time selector to shift over when selecting between the two. I've just overridden the CSS in .dp__pm_am_button to 43px for now, but don't believe this would be intended.

Time Picker Overlay
The time picker is currently just an overlay on the calendar. This doesn't allow for easy adjustment of the height on an inline calendar. For example, when switching to the time selector, adjusting the inline container size to match the content of only the time picker isn't easy because the calendar is still open behind it. It would be great to toggle these views with a v-show instead of overlaying them so each div can be adjusted independently.

Describe the bug
When the text input is cleared and tab is pressed, the value model of the component is not set to null

Describe the bug
I'm building a website using Bulma CSS framework to help me with styles and have come across the issue when using modal component from inside Table cell. When modal component is inside table row the calendar pop up windows gets offset to the left to corner of the window.

To Reproduce
Steps to reproduce the behaviour:
Clone repo https://github.com/moreorover/vue3-date-time-picker-boiled install dependencies, serve the app, in the home page there is a table, in the first row of the table there is a button to open modal with date picker field inside. Modal opens when button is pressed, press on date picker input field and a calendar pop up window appears at top: 10px, left: 0px

Expected behavior
Calendar pop up window expected to appear underneath or above (depending on available space) the input field.

Screenshots
https://i.imgur.com/smh6ijp.png

Is your feature request related to a problem? Please describe.
User experience is suboptimal when dealing with ranges, due to being constrained to one month at the time.

Describe the solution you'd like
When dealing with ranges there could be two Calendar.vue instances rendered next to each other.

Describe alternatives you've considered
Two separate input fields - results in the UX that is yet more crippled

Additional context
Not much. It is considered to be a good practice to have two months visible at the time.

It would be very helpful to be able to pass an id attribute to the Datepicker component. When needing to programmatically populate data in the input field (e.g. in testcafe tests) it's currently not possible to target the input directly with an id selector. Instead we have to put an id on an enclosing div and then drill down to the input via selectors.

Why this happens

For default 1rem is 16px
It is common to use html{ font-size: 62.5% }
This makes the 1rem be equal to 10px which is easier to work with

The problem:

This plugin uses rem for font sizes all over the place thus everything is smaller

Describe the solution you'd like

The plugin could use font sizes with em so that the base font size could be set by the parent element font size
or have a sass configurable font-size which i think is a better solution

Alternatives i've been using

I've been manually changing font sizes for every small text in the datepicker component
which is cumbersome af

Hi,

Is there currently a way to set default Time of Day.

1. After loading picker shows Current Date + Default Time ( predefined, e.g. 3:00 PM )
2. Date and Time can be modified by user.

If not - is that a planned feature?
Thanks!

Describe the bug
Having issues adding this component to my application. Here's the error I'm receiving on compile:

error in ./node_modules/vue3-date-time-picker/dist/vue3-date-time-picker.esm.js

Module parse failed: Unexpected token (1:92573)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I have css-loader, sass, sass-loader, style-loader, vue-style-loader etc. all installed in my package.json. I'm currently running Vue 3.2.6. I'm using a vue.config.js file, not sure if I need to register these loaders here, but I thought there were no dependencies on this package.

To Reproduce
Just npm installed and added the module into one of my Vue components. On compile, I receive the above error, as well as the entirety of the js file text. Not sure if a bug or I'm installing this wrong, but I am stumped here. Thanks!

Describe the bug
I try to set the value programmatically to a time-picker, however the value is not visible until I click on the input.

To Reproduce
Please see the example here https://codesandbox.io/s/vue3-date-time-picker-demo-forked-7zney?file=/src/components/Demo.vue

Expected behavior
I expect that the value in the field to be updated without necessary clicking on the input.

Describe the solution you'd like
instead of overwrite the action-select slot for creating a today button
it will be good to have it supported by default.

The scss theming page has this string as the main .scss file import:

@import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';

when in reality it should be

@import 'vue3-date-time-picker/src/Vue3DatePicker/style/main.scss';

Describe the bug
I started using your component in my Vue 3 project on version ^2.1.2.
The component with :range=true was allowing users to pick either one OR two dates but not since version 2.1.5.

Case 1 : dates model looks like [A Date, null] => It was possible in 2.1.2 and 2.1.3
Case 2 : dates model looks like [A Date, A Date] => It was possible in 2.1.2 and 2.1.3

Since 2.1.5 the case 1 is impossible, if user pick only one date (the first) then the "Select" button has no effect at all and the model is not updated with [Date, null] like it could before.

To Reproduce
Steps to reproduce the behavior:

1. Init a Datepicker component

<Datepicker v-model="dateRange"
:range="true"
locale="fr"
:disabledDates="someDisabledDates"
:maxDate="maxDateForPicker"
placeholder="Sélectionner une date de début ou une période connue"
:enableTimePicker="false"
:startTime="{ hours: 0, minutes: 0 }"
@cleared="clearDateRange"/>

2. In your app, try to select only the first date of the range and click the button "select" to validate the selection => Nothing is happening.

Expected behavior

I wonder if this is a choice you made to not allow the selection of only 1 date for a range or if it is a bug, but the way it was in 2.1.2/2.1.3 was perfect for me, it allowed users to create à defined Range OR a possibly period without an end date (like for a Job contract with no determined end date...)

I then downragred from your latest version 2.3.4 to 2.1.2 and checked every single version, and the "break" seems to happen at 2.1.5 version.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome : 95.0.4638.69 (Build officiel) (64 bits)

Describe the bug
Using startTime in timePicker only mode has no effect.

To Reproduce
Add startTime to a element:
https://codesandbox.io/s/vue3-date-time-picker-demo-forked-mv7fd?file=/src/components/Demo.vue
For comparison I added a normal Datepicker where startTime has effect when entering time selection.

Expected behavior
In timePicker only mode the startTime should be used as default, not the current system time.

Is your feature request related to a problem? Please describe.
textInputOptions are a bit inflexible, I am not able to apply a value on hitting a tab key.

Describe the solution you'd like
Either add tabSubmit to textInputOptions or this or other way make the actual input component a component that's possible to overwrite, just as the others

Describe alternatives you've considered
Thought of showing an info popup on focusing the text input, but there's no such an event emitted (if you keep tabbing between fields). Tabbing into menu doesn't open it as well, so there's no closed event available

Describe the bug
if we scroll the month from dec to january, the year is not changing to the next year

Expected behavior
supposed to change the year on scroll dec to the next january

Describe the bug

When using the #clear-icon slot with a custom element, clicking clear also seems to remove focus from the component, so you have to click again to focus, then again to re-open.

To Reproduce
Steps to reproduce the behavior:

1. Use the #clear-icon slot - anything works, ie. (with Tailwind) <div class="h-4 w-4 bg-green-500" />.
2. Click the clear icon.
3. Click the input box. (Nothing happens.)
4. Click the input box again to finally open the calendar.

Expected behavior

The calendar should open on the first click.

Screenshots

N/A

Desktop (please complete the following information):

• OS: Ubuntu 18.04
• Browser Chrome
• Version 96.0.4664.45 (Official Build) (64-bit)

Smartphone (please complete the following information):

N/A

Additional context

N/A

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
Actually I'm not sure if this is a bug or I'm just doing something wrong.
My web app has static elements for header, navigation and footer. The content is inside a container with overflow-y: auto; so that it is scrollable.
The calendar / time picker overlay is not scrolling when scrolling inside the scrollable container. This results in a static position of the overlay while the input field is moving up and down.

To Reproduce
https://codesandbox.io/s/vue3-date-time-picker-demo-bn8h2?file=/src/components/Demo.vue

1. click inside one of the picker (upper: auto position, lower: altPosition)
2. scroll inside the scrollable container (overlay not moving)
3. scroll outside the container (overlay moving)

Expected behavior
I would expect scrolling inside the container refreshes the overlays position.

P.S.: Sorry for all the issues I'm opening 🤭

Describe the bug

Was just updating to latest to grab a bug fix and came across the following error when installing via yarn:

$ yarn
yarn install v1.22.15
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=14". Got "12.22.1"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Previous versions do not appear to produce this error.

To Reproduce
Steps to reproduce the behavior:

1. Add 2.4.0 to package.json.
2. Install with yarn, although probably npm works too.

Expected behavior
Should install the latest version.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser: N/A
• Version: N/A

Smartphone (please complete the following information):
N/A

Additional context
2.3.5 appears to install correctly. I have pinned my version to that dependency for now.

Describe the bug

When the model value of a date picker is updated programmatically somewhere else in the Vue app and not by using the actual UI of the date picker itself the input with the human readable representation of the set model value is not refreshed immediately. Clicking into the date picker open ups the menu with the correct programmatically set date selected in the calendar and refreshes the content of the input.

Use case is a meeting creation form where based on a manually set start the end is automatically calculated and set to half an hour later.

To Reproduce

A demonstration can be seen on https://codesandbox.io/s/vue3-date-time-picker-demo-forked-s4vyc?file=/src/components/Demo.vue where setting a date in the first picker does not update the input content of the second date picker. The example is based on https://vue3datepicker.com/api/props/#modelvalue and therefore I assumed that setting date picker values should be possible also via code not only via manual user interaction.

Expected behavior

I would like that programmatically updating the model value also immediately updates the input content.

Screenshots

I hope the codesandbox.io example is enough otherwise I will provide more stuff.

Desktop:

• OS: Linux / Manjaro
• Browser: Chromium
• Version: 94