Which date-time picker do you use?

1

I’m in need of adding a date-time picker to my app, and I’m wondering which ones you use. I’m currently using Bootstrap 5 + Aurelia 1.

Flatpickr seems to be a dead project, and the Aurelia npm package aurelia-flatpickr is 6 years old!

Tempus Dominus is in version 6-alpha, but seems like it’s under active development. There is no Aurelia npm package for it, but that’s ok.

npm package aurelia-bootstrap-datetimepicker is no longer current, and it’s GitHub repo was actually removed, and it’s replacement aurelia-bootstrap-plugins hasn’t been updated in 3 years. I’m not even sure they would work with Bootstrap 5, anyway.

The native HTML5 date input seems limited.

Thoughts?

2 Likes
2

We were in the same situation some weeks ago. As we did not find a date picker that meets our requirements and is still under active development, we decided to build one ourselves.

With the support of DayJs as our date library, it’s not that complex!

If you are interested, I would share the code.

image
(culture in screenshot: german, additional cultures supported)

3 Likes
3

Awesome! Have you considered open sourcing it? Maybe create a GitHub/npm account for Aurelia components?

4

i’ve used https://litepicker.com/ for one of my projects and am pretty happy with it

this.createdAtPicker = new Litepicker({
      element: this.txtCreatedAt,
      numberOfMonths: 2,
      numberOfColumns: 2,
      singleMode: false,
      delimiter: " .. ",
      useResetBtn: true,
      onHide: () => {
        this.txtCreatedAt.dispatchEvent(new CustomEvent("change"));
      }
    });

the example shows one additional bit where I trigger the change event when hiding the picker so that aurelia picks up the change

2 Likes
5
  • For simple entries, I use input of type date
  • For the time entry I use
  • For entries with complex validation (no week, no holidays, only from/to), I use jQueryUI DatePicker .
    See Datepicker | jQuery UI
1 Like
6

I’ve been using LitePicker too

1 Like
7

To offer this as “ready to use” open source library, it would need further work in terms of flexibility, configurability, styling, build pipeline, etc.

As it’s little, simple and clean code, I could share the code and you could use it directly in your codebase with customisations according to your needs.

8

Sure, that would be great!

9

LitePicker looks, good. And I could always just write my own time selector. By the way, have you guys noticed the calendar tool for comment entry?

image

10

nope, I’ve merely used it in dual mode for selecting a day range. but looks interesting

11

For all of my projects I’ve been using FlatPickr. When used on mobile, it’ll use the native time/date pickers instead. You can force it to just stick to the web version though. Lightweight and no other dependencies.

1 Like
12

I looked at Flatpickr but it seems to be a dead project. Am I wrong?

13

I’ve just had a look at the issues/commits and it still seems very alive, with donations streaming in for the maintainer too.

14

If you use mdc components then there’s a date picker aurelia-toolkit/packages/mdc-datepicker at master · aurelia-toolkit/aurelia-toolkit · GitHub

15

@MaximBalaganskiy Is that your repo? Nice collection. I was thinking of doing the same for the Toast-UI components. Maybe I can contribute to your repo if you want to extend it’s offerings/functionality.

16

what did you end up choosing?

17

@manks sure, why not… this set is basically shared code for all my projects across several orgs :slight_smile: except mdc components , which live separately

18

I got hit with two bugs today that set me back a day. I guess next weekend I can start on playing with the toast-ui editor and calendar. Nothing is ever smooth.