NEW PLUGIN: Date and Time Range Selector

Showcase
1

I needed a date and time range selector for my application, so I’ve made this one.
Please do let me know what I can do to improve it.

More documentation coming ASAP, for now here is a screenshot and a silent walkthrough video.

date%20time%20range%20selector
date%20time%20range%20selector982×552 39 KB

Walkthrough video:

A few notes:

  1. the element triggers on anything you give an id of ‘dateselector’ to allow for flexibilty
  2. the start and end dates are held in the element’s state
  3. On page load, range defaults to current month.

Enjoy!
Scottie

9 Likes
2

Nice work Scottie!

Is there a reason you default to todays date, rather than empty?
Can you supply a default range to the plugin?
How does it look on small mobile screens?

Its good to have a video. It’d be nice to hear a voiceover, even if its " … and we wait with bated breath as the leopard inches its way forward, the yeti twitches its ears nervously, somehow sensing danger is approaching … "

I can give some critique on the plugin coding too, if you want.

3 Likes
3

That’d be great @mishav, I’ll add a default range to the dev backlog, shouldn’t be difficult (famous last words).

I default date start and date end to the first day and last day of the month respectively, because in general my users want to see a month’s worth of data. For sure there are other use cases so I’ll definitely add a default range option.

Re: video - you’re right… I’ll do something proper in the next day or two, would like to have it done properly and in depth so I’ll wait 'til I’m fresh.

Re: mobile screens -

I’ve tested a bit on a mobile version, and it works - although I haven’t specifically designed it for this purpose. It’ll work, not sure if it’d be optimal.

On Chrome, with minimal width:

small%20screen
small%20screen452×639 40.4 KB

On my android:
on%20android
on%20android1080×1920 180 KB

1 Like
4

For some reason every time I click on any of the options on the left such as last 7 days or this month, the element disappears…anybody else have the same issue?

5

Would be a great feature to add Auto-binding to this plugin… as the value is changed, auto-bind it to parent.

Just a thought! @scott3

6

Thanks for the input guys! I’m swamped with projects at the moment so can’t support this properly. I think it’s open source - let me know if not and/or if you want the code and/or to be added.

7

That would be great to have the code or for it to be added.

8

It’s open source, MIT - you should be able to see the code now

9

If it could be changed to be an input, that would greatly increase its functionality.

10

Could someone guild me on how I can use this selector in more than one place in a single page? I have a few dashboards which needs their own data range selector. I’m unable to enable the date range selector more than once in the page. any suggestions ?

11

@scott3: Great plugin!

Is it possible to give an option of ignoring today while selecting the last 7 days, 21 or 30 days?

Currently, it selects today also in picking up the last 7, 21 and 30 days

12

where you able to fix this issue, For me it was working fine till today morning, now it is not working fine, Its makeing the entire popup disappear.

13

No, I just made my own.