#frontend #vuejs

The Datepicker Problem

Nowadays, many applications incorporate date-picking tools; nevertheless, problems still crop up continually with them. Therefore, sum.cumo has developed a fork of the Vue.js datepicker project which already implements many easily extensible features.

Problems with the native datepicker

Calendar control elements are always needed and represent an important part of front-end development. One problem often encountered is that different datepicker implementations look and feel different and use differing APIs. This also compromises the usability, since dates cannot be typed in manually. Many of the datepicker components available for Vue.js are outdated, no longer maintained, or lacking basic features.

A fork of the vuejs-datepicker as a solution from sum.cumo

For the reasons outlined above, sum.cumo went looking for a solution that could be used uniformly throughout the company and its projects. We found a Vue.js datepicker available under the MIT license that incorporates many easily extensible features. However, we discovered that this solution was not likely to be satisfactory in the long term, because its latest release was about a year and a half old and reactions to pull requests were infrequent. Collaboration with the project's initiator was not possible, so we decided to create a fork and continue developing it on GitHub.

Our datepicker provides the following features:

  • Direct keyboard input
  • Internationalization
  • Inline calendar
  • Dates can be deactivated or highlighted
  • Automatic orientation
  • Compatibility with Bootstrap
  • User-defined slots
  • No dependencies
Foto von datepicker
Beispielhafte Einbindung des Datepickers

Formatting

In general, the integrated date formatting is entirely sufficient. If necessary, however, it can easily be extended using date-fns or moment.js. The datepicker's template is easy to adapt and modify in many other respects, allowing it to accommodate custom wishes and requirements.

For on-the-fly input formatting, we recommend Cleave.js. Feel free to check out the example in our documentation.

Internationalization

Currently there are 48 languages available. Use of the desired language is optimized using tree shaking.

Validation

Form validation is an important topic. An example in our documentation shows the correct way to use vee-validate 2.x.x.

Summary

In short, we've created a lightweight, flexible datepicker that provides lots of features and plenty of room for customization.

Try out our vue-datepicker on the demo page.
We look forward to your feedback! Feel free to report any issues you may encounter.

Read more on the subject of front-end development at sum.cumo here.