A datepicker Vue component. Compatible with Vue 2.x.

Overview

@sum.cumo/vue-datepicker @sum.cumo/vue-datepicker

Datepicker

This is a fork from the project vuejs-datepicker which is licensed under the MIT license. Thanks to the original creators charliekassel for the great work.

A datepicker Vue component. Compatible with Vue 2.x.

Features

  • accepts keyboard input
  • internationalized
  • date picker
  • disable dates
  • highlight dates
  • inline calendar
  • auto-alignment
  • compatible with Bootstrap
  • custom slots
  • append to body

Documentation

Checkout the vuepress Documentation. There you will also find the Demo pages and the Migration guide.

Contribution

Please feel free to open up an issue or provide a pull request.

License

Copyright 2019 sum.cumo GmbH

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Issues
  • Keyboard navigation - first-day-of-week - blank days

    Keyboard navigation - first-day-of-week - blank days

    Fix bug where typeable date does not format correctly on blur

    enhancement 
    opened by mst101 10
  • Dom value not updated when using typeable

    Dom value not updated when using typeable

    Hello, I am having issues when reseting a date. When selecting a date using the datepicker every thing works as expected. However when i type the date inside the input (using typeable=true), the dom value is not updated. The prop value however is updated.

    <datepicker
              :typeable="true"
              :value="minDate"
              :language="fr"
              format="dd/MM/yyyy"
              v-on:selected="$emit('min-date', $event)"
              v-on:input="$emit('min-date', $event)"
              input-class="datepicker-input"
            >
    </datepicker>
    
        props: {
          name: String,
          minDate: Date,
          maxDate: Date,
        },
       watch: {
          minDate: function (newVal, oldVal) { // watch it
            console.log('Prop changed: ', newVal, ' | was: ', oldVal)
          }
        },
    

    When changing the value with the datepicker, both newVal & oldVal are correct, and the Dom IS UPDATED But when changing the value using the input, both newVal & oldVal are correct, and the Dom IS NOT UPDATED

    Thanks in advance for any feeback

    bug 
    opened by julsbreakdown 10
  • Various code improvements

    Various code improvements

    e.g. simplify close & showCalendar methods, alphabetical ordering etc.

    enhancement 
    opened by mst101 8
  • feat(datepicker): Make the calendar navigable by keyboard

    feat(datepicker): Make the calendar navigable by keyboard

    Hi @MrWook, please brace yourself - this is a big one :-)

    Firstly, apologies for the Can’t automatically merge. message. I realised too late that I hadn't pulled your changes concerning the 'typeable date timezone' issue. I then had a go at merging those changes in to my work, but for some reason I'm still getting the same message'. I may just need to get round to reading that 'git book' before I do much else... [Update: I've resolved the merge issue now, but the tests are failing due to the :focus-within issue described below...]

    I hope you will find the following notes helpful:

    • Where appropriate, I have switched over from spans to buttons to benefit from their native behaviour.

    • I have removed any references to .disabled classes in favour of a disabled attribute and have updated the stylesheet accordingly.

    • The prev/next buttons are now being properly styled when disabled i.e. grey text (with no change to the background on hover). I have, however, kept a disabled 'up' button as black text (with no hover) as this also acts a heading.

    • I removed the cursor: not-allowed style from the disabled calendar-button as this now uses the browser's default style for a disabled button. Let me know if you'd like to keep it, but if so, we should probably add the same style to the clear-button for consistency. I've kept the class references: vdp-datepicker__calendar-button and vdp-datepicker__clear-button to allow people to customise these buttons easily.

    • Not sure if I'm missing something here, but I have dismantled the headerConfig object in PickerMixin and am now passing the properties into PickerHeader individually as props. The reason for this is that the isNextDisabled, isPreviousDisabled etc. computed properties were appearing as undefined when inside the mixin's config object and the disabled attribute was therefore not being set correctly on the prev/next buttons. I realise that you originally passed these in these as methods and were then calling them from within PickerHeader. This works, however, as we are now also using isNextDisabled and isPreviousDisabled to determine whether to move the focus up or down on pressing the arrow keys, we probably shouldn't be firing these functions more often than we need to.

    • Previously, the DateInput component emitted a close-calendar event on blur. However, as we now want to focus the most relevant part of the calendar when it is opened, I added a defaultFocus method to the pickerMixin's mounted lifecycle hook which determines where to place the focus. Let me know, if you feel these choices should be tweaked in any way. Note that the defaultFocus method is also fired when the prev/next button becomes disabled.

    • The typeable calendar retains focus on the input field at all times, regardless of any clicks made within the picker - and as expected it submits the date on blur.

    • The inline calendar is not focused initally (to avoid any undesired page scrolls), however, once it has been interacted with, its focus will be determined in the usual way.

    • Pressing the escape key now also clears the date as opposed to just closing the calendar. The focus remains on the input field, unless the calendar-button is used (in which case that button is focused).

    • In order to close the calendar when it is not focused, I could no longer rely on the input field being blured, so I have made use of the :focus-within pseudo selector to keep track of whether any element within the datepicker is focused. When I say 'keep track of', since $refs are not reactive in Vue, I actually mean 'fire a check-focus event' each time a focused element within the datepicker is blured. The :focus-within selector is currently supported by over 93% of browsers. Is this good enough, or can you think of a better strategy to achieve this functionality?

    • Annoyingly, although it works in my browser, I get a [Vue warn]: Error in nextTick: "SyntaxError: ':focus-within' is not a valid selector" error message when running the tests. I tried to overcome this by wrapping the 'offending' code in a try/catch block. Whilst this does remove the error message when testing, it introduces a new error message when I run npm run serve: [!] (plugin buble) TypeError: Cannot read property 'type' of null. It would appear that this is an issue with the rollup-plugin-buble package (which has been deprecated in favour of @rollup/plugin-buble), but I haven't had any immediate luck in trying to resolve the issue!

    • Determining how many cells to skip when adjusting the focus with the up/down arrows was a bit of a mental challenge - not made any easier by the recent introduction of the year-picker-range prop(!) - but I think I've cracked it now. :-)

    • While working on this, I noticed that the alignment of the cells on the last row of the YearPicker was incorrect when using a rtl language (the cells were on the left instead of the right), so I fixed that by filling in the gap with some blank, disabled cells.

    • I've managed to get the existing tests to pass (with a few, hopefully minor, adjustments here and there). I still need to write some tests for the new functionality I have created, but while I work on that, I wanted to share with you the current state-of-play and look forward to hearing any comments or suggestions you may have.

    Regards,

    Mark PS. The above changes have caused the minified size of the component to increase from 35 KB to 51 KB (although the css has reduced from 4 KB to 3 KB!). Probably not much that can be done about this, as it's pretty core functionality?

    PPS. Unrelated to the above, but the select lists are not displaying correctly on the demo pages as the small css change I made - height: 2.5em -> line-height: 2.5 em - does not appear to have been applied.

    enhancement 
    opened by mst101 8
  • Add prop to determine first-day-of-week

    Add prop to determine first-day-of-week

    enhancement 
    opened by mst101 8
  • Add fade transition

    Add fade transition

    This adds a fade transition of 250ms on open/close as well as on view change.

    There's one annoying bug in that the background becomes momentarily transparent on view change. To fix this we'd need to set the height of the popup, but I haven't managed to get this to work properly yet. Instead of Popup.vue watching the visible prop, we'd need to watch the view as the height of the popup obviously changes with the view.

    Don't know if you'd have time to have a look? I'd really like to move on to setting up the e2e testing and implementing the keyboard navigation...

    opened by mst101 7
  • Add slide transition

    Add slide transition

    This adds a slide transition between page changes. The default duration is 500 milliseconds and can be overridden via the slide-duration prop.

    enhancement 
    opened by mst101 7
  • Many props not being picked up

    Many props not being picked up

    You appear to have ripped out lots of props from the original object e.g. ref-name, openDate, placeholder to name just a few...

    I'm getting the impression I'd be better off making my own fork of Charlie Kassel's original version of vuejs-datepicker and making my own modifications from there e.g. to allow keyboard navigation.

    It's a shame he's not actively maintaining his project anymore, but to do this to his work just seems careless in the extreme. :-(

    question 
    opened by mst101 6
  • Datepicker should only open when you click the button

    Datepicker should only open when you click the button

    Is it possible that the date picker only opens via the extra button and not via the form field?

    enhancement 
    opened by chriswalg 6
  • Two column layout

    Two column layout

    Thanks for taking over development of vuejs-datepicker.

    Have you considered supporting a two column layout? We're switching to vue-datepicker from a different component that supported this but is otherwise unsuitable for our present-day needs. Having two months side by side (if screen size allows) makes it easier when the current date is close to the end of the month to select a new date at the start of next month in a single click, i.e. without having to page to the next month first.

    enhancement wontfix 
    opened by bg 6
  • Event selected is continuously being triggered when typeable is true

    Event selected is continuously being triggered when typeable is true

    I'm having troubles when implementing the Datepicker in combination with typeable.

    When typeable is true, the selected-event is continuously being triggered, which I'm using to update the users view.

    enhancement 
    opened by Kenvdb 1
  • Disabled next/prev not visually disabled

    Disabled next/prev not visually disabled

    See example:

    https://codesandbox.io/s/charming-pateu-bkc4z?file=/src/App.vue:1054-1259

    The previous button should be disabled (css class is assigned, but its not visible).

    I manually added this css to fix it:

    div.vdp-datepicker__calendar .prev.disabled .default::after{
      border-right-color: #ccc !important;
    }
    div.vdp-datepicker__calendar .next.disabled .default::after{
      border-left-color: #ccc !important;
    }
    
    enhancement 
    opened by arwinvdv 0
  • feat(datepicker): add preservTime property

    feat(datepicker): add preservTime property

    With this property, component will emit new date object but it will use time component that was set as an input.

    enhancement 
    opened by dam1r89 4
  • Time component of the value

    Time component of the value

    Would you accept a PR that would add property called preserveTime (or something similar) that would emit new date but keep the time from the initial input.

    For this setup:

    value = new Date(2021, 8, 8, 13, 35, 2)
    v-model="value"
    

    after picking a date it would emit selected date but with "00:00:00" time.

    My main concern would be timezone problem, so I would use getUTCHours() and setUTCHours(), so it should keep the timezones consistent.

    This would not break existing behavior.

    opened by dam1r89 0
  • Typescript migration

    Typescript migration

    Let's migrate to typescript

    • [x] add typescript setup

    • [ ] move all components to typescript

    • [ ] move all js files to typescript

    • [ ] resolve build and serve script for typescript

    enhancement 
    opened by MrWook 2
  • Commonjs bundle and iOS Safari 9

    Commonjs bundle and iOS Safari 9

    Hello again,

    We are doing cross browser testing after updating to 3.2.1. Ie11 is working fine, but Safari 9 is not, the error we are seeing is:

    Unexpected keyword 'const'
    Const declarations are not supported in strict mode.
    

    what browserlist is babel compiling to for this project? Safari 9 previously worked and I am trying to avoid bundling node_modules if I can.

    Thanks, Brandon

    bug 
    opened by brandonburkett 2
  • Keyboard navigation POC

    Keyboard navigation POC

    My approach as a POC for the keyboard navigiation

    it's still not working correctly but you can see where it goes

    opened by MrWook 2
  • Trap focus

    Trap focus

    • Adds support closing the popup with the escape key
    • Implements focus trapping when the calendar button is used to open the popup

    Please note that much of this depends on #81 as focus trapping is an element of keyboard accessibility.

    opened by betweenbrain 2
  • Aria attributes

    Aria attributes

    • Changes Calendar Button element from span to button.
    • Changes .cell elements from span to button.
    • Adds aria-controls and aria-expanded to Calendar Button.
    • Adds aria-label to Calendar Button and interactive .cell elements.
    • Updates Datepicker.spec.js to look at only class.
    enhancement 
    opened by betweenbrain 5
  • Keyboard navigation

    Keyboard navigation

    @betweenbrain - OK, so this is where I've got to so far with the keyboard navigation...

    As you can see, navigation via tab, space, enter, escape and arrow keys seems to be working well and I've added tests for most of this.

    @MrWook - I've improved upon my initial strategy (#53) by creating FocusedDate, FocusedMonth and FocusedYear classes which expose a nextCell computed property in the relevant picker. This allows us to determine certain properties of the next cell that would be focused up/down/left/right. e.g. in PickerDay for today, 1st Feb 2021 (when showing edge-dates):

    nextCell: {
        down: {
            date: 'Mon Feb 08 2021 00:00:00 GMT+0000 (Greenwich Mean Time)'
            delta: 7
            isDisabled: false
            onOtherPage: false
        },
        left: {
            date: 'Sun Jan 31 2021 00:00:00 GMT+0000 (Greenwich Mean Time)'
            delta: -1
            isDisabled: false
            onOtherPage: false
        },
        right: {
            date: 'Tue Feb 02 2021 00:00:00 GMT+0000 (Greenwich Mean Time)'
            delta: 1
            isDisabled: false
            onOtherPage: false
        },
        up: {
            date: 'Mon Jan 25 2021 00:00:00 GMT+0000 (Greenwich Mean Time)'
            delta: -13
            isDisabled: false
            onOtherPage: 'Previous'
        },
    }
    

    We don't actually need the date property, but I've left it in temporarily for clarity. When remaining on the same month, year or decade, the delta property simply indicates how many cells to move up/down/left or right. However, when a change of focus requires a page change, the delta property refers to the number of cells that the focus should move:

    • forward from the start of the cells array (when onOtherPage is 'Next'), or
    • back from the end of the cells array (when onOtherPage is 'Previous').

    The issue:

    I'm currently having trouble with finding a way to close the calendar when no element within it is focused (see the it('should close when the calendar loses focus' test in Datepicker.spec.js...

    As I mentioned in the PR I referred to earlier (#53), I've been trying to do this by using the :focus-within pseudo selector to keep track of whether any element within the datepicker is focused (see the checkFocus method in Datepicker.vue. Since $refs are not reactive in Vue, we need to fire a check-focus event each time a focused element within the datepicker is blurred, so I'm emitting a check-focus event on blur from any button that can be focused.

    However, I'm not sure if this is a sensible strategy (as I haven't managed to get it to work properly yet!)

    As it stands, the calendar opens and closes correctly by clicking on the input field (or via the calendar-button), but it does not close when the calendar loses focus. However, if you uncomment the return statement in the checkFocus method in Datepicker.vue, you'll see that the calendar does close when the calendar loses focus, but, we now have the problem that it closes - and opens up again! - when the input or calendar-button is clicked.

    This has been driving me a little crazy, so I would really appreciate your help... :-)

    Side note:

    Perhaps unnecessary, but I changed some of the functions & event names to help me reason about what's going on. It seemed strange to me that we are using event names such as show-calendar and close-calendar when show/hide or open/close appear to be a more natural and consistent way to describe what's happening. Personally, I prefer open/close as we are emitting both opened and closed events from the component. @MrWook - let me know if you agree with this change and if you'd like me to create a separate PR for this.

    enhancement 
    opened by mst101 31
Owner
sum.cumo GmbH
Made to Innovate – sum.cumo®, an innovative company from Hamburg, is specialized in holistic digitalization for businesses.
sum.cumo GmbH
A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker.

vue-airbnb-style-datepicker This is a VueJs version of the popular AirBnb datepicker. Supports range selection, disabling of dates, custom configurati

Mikael Edebro 501 Dec 8, 2021
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 704 Dec 9, 2021
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.5k Jan 19, 2022
A vue component that provides datepicker for persian developers

vue persian datepicker This is a Jalali date picker component for Vue. این برنامه یک کامپوننت انتخاب تاریخ جلالی می باشد. Demo You can see a demo and

Dyon Software Development Group 100 Dec 14, 2021
datepicker component for Vue 2.x

vue-date-picker datepicker component for Vue 2.x Screenshot Instllation $ npm install vue-date-picker --save Usage <template> <div class="demo">

8788 100 Dec 13, 2021
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 199 Jan 20, 2022
awesome, zero dependency, performant Vue datepicker component

awesome, zero dependency, performant Vue datepicker component

mohammad S. 31 Jan 11, 2022
Vue Datepicker Component

Datepicker Component For Vue

Hatice Edis 373 Jan 7, 2022
Datepicker component for Vue 3

The most complete date picker solution for Vue 3

null 97 Jan 20, 2022
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 183 Dec 15, 2021
Simple datepicker component for Vue 3

Simple datepicker component for Vue 3

Ilya Borovitinov 78 Jan 14, 2022
Vue draggable datepicker component

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

null 0 Jan 20, 2022
A Beautiful Datepicker Component For Vue2

vue-datepicker-local A Beautiful Datepicker Component For Vue2 Lightweight (less than 5kb minified and gzipped) Only dependencies Vue Beautiful! Demo

飞越 294 Jul 17, 2021
A simple datepicker component for vue3.0

A simple datepicker component for vue3.0

Lin Masahiro 29 Dec 7, 2021
Jalaali calendar and datepicker for vue.js 2

vue-jalaali-datepicker Jalaali calendar and datepicker for vue.js 2 Demo Requirements Vue.js ^2.0.0 moment-jalaali ^0.6.0 Installation npm $ npm insta

Peyman 15 Aug 29, 2021
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022
A clean datepicker made with VueJs

vue-datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Props Events Date Formatting Translations Best Practices Demo To

Mathieu Stanowski 150 Jan 11, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021