Forum Documentation Showcase Pricing Learn more

NEW PLUGIN: Date and Time Range Selector

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.

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.



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.


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:

On my android:

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?

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

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.

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

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

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