🗓 [FREE Plugin] Air Date/Time Picker

Showcase
1

Plugin page: Air Date/Time Picker

Updates
12) **New (18/06/2017)
Added ability to block dates dynamically. The source should be a list of dates.
Note that you can have all the different block types at the same time.
For example you can statically set some days as blocked days. Then provide a dynamic list of days to block as well as a dynamic list of dates to block.
NB: If Today is included in block dates/days, then even if you have check “Show Today’s button”, the button will not show as one will expect.

blocked days dynamic full.png1130×773 50.3 KB

  1. **New (18/06/2017)
    Added ability to block days of the week dynamically. The source should be a list of numbers from 0 for Sunday to 6 for Saturday. So if you want to block Saturdays and Sundays you source should be a number list with 0 and 6 (i.e [0,6]).
    Note that this new feature works nicely with the static dates. Meaning that you can set both static block days as well as dynamic block days. In such case the blocked days will be the union of the two sets.

  2. **New (18/06/2017)
    Added ability to set any day as first day of the week’s (previously you could select only sunday or monday).
    If no day is selected the value is taken from current localization.

  3. **New (18/06/2017)
    Changed
    Previous: Calling Picker’s value list when a date range was selected returned a list of 2 dates with the first and last dates in the range:
    Current: Calling Picker’s value list when a date range is selected returns a list of dates from the range’s start to end dates inclusive. I think this makes more sense because calling Picker’s range will give you the range (i.e first and last)

  4. (13/06/2017)
    Added ability to set the initial view for the date picker. Options are days(default), month and year.
    This feature really makes it quick to get to the intended date.
    With most date pickers, you always start from the days, navigate to the month, year and then navigate back to month, and finally day. So imagine your picker is for birthdates, your users will have to do this back and forth navigation.
    With this feature, you can set your initial view to “years” so when the picker shows, it will display the years and your users can easily move forward.
    See demo below:

  5. (13/06/2017)
    Added several options for timepicker.

  • Select time format. 12 hour (AM/PM) or 24 hour
  • Set minimum and maximum hours
  • Set hours increment
  • Set minimum and maximum minutes
  • Set minutes increment
    See options below:
    time options.png400×522 14.3 KB
  1. (12/06/2017)
    Added support for multiple dates. This means that the picker can return different data depending on what option is currently selected.
    multi-date.png1629×770 65.6 KB

    See below.
    Fields-----------
    Multiple dates (unlimited): When checked your users can select unlimited number of dates.
    Multiple dates (max): The number entered here will be the maximum dates your users can pick. When a value is set for this option it will override the previous option ( Multiple dates (unlimited) ).
    Enable date range?: When checked it will allow you to select a date range, start date and end date. This option overrides the two previous fields.
    You can also set the initial content (dates) for your range.
    Multiple Dates Seperator: A text to use to separate multiple dates in the picker input. Default is a dash (-).

Blocked days still work when multipled dates is chosen.

Date returned -------------------
There are currently 3 main data types that can be returned by Air Date/Time picker.

  • Picker’s value: Retuns a single date. This will return the current selected date. If multiple date is selected this will return the last selected date.
    IMPORTANT: Currently there is a bug for time. So if you’re interested in the correct time or want to use only time picker, instead of calling value, call range:start (or range:end, will be same date for single date selection.)

  • Picker’s value list. Returns a list of dates.If the datepicker is a range it will return a date list with 2 elements (first and last). [Changed see update 9) above]

  • Picker’s range. Returns a data range. You can get the start date by calling, Picker’s range:start. Similarly you can get the end by calling Picker’s range:end. If multi date is not used or only a single date is selected, both start and end will be the same date, similar to what value returns.

  1. (12/06/2017)
    Added support for Russian language.
    Fixed an issue with one of the date formats.

  2. Added ability to choose to navigate the datepicker with the keyboard. This one of my favorite features of the plugin because it makes the picker accessibility friendly. Also it makes it so easy to quickly move to a certain year especially for birth dates.
    Hot keys:
    Ctrl + → | ↑- move one month forward
    Ctrl + ← | ↓- move one month backward
    Shift + → | ↑- move one year forward
    Shift + ← | ↓- move one year backward
    Alt + → | ↑- move 10 years forward
    Alt + ← | ↓- move 10 years backward
    Ctrl + Shift + ↑- move to next view
    Esc- hides datepicker

  3. Added ability to block some days of the week. For example you can prevent your users from selecting weekends.

    blocked days.png1920×1080 83.5 KB

  4. Fixed an issue with having multiple instances of the picker on a page (thanks @jarrad)

  5. Added ability to set Monday as the start of the week, similar to the default date/time picker.

Initial post
Hey bubblers,
I’m excited to share with you my very first bubble plugin that i just published.

It is a new date/time picker called Air Date/Time Picker which is based off the open source jquery datepicker of similar name.
It’s as light as air :smiley:

The goal is to address some of the usability issues with the current date/time picker or date input.

The plugin is very beautiful and lightweight and has tons of features.
As you can see from the property editor below there are so many customizations you can make including the standard input styling.

property1.JPG695×868 33.3 KB

Below is a quick demo showing how easy it is to select the year.

In the coming days i will be implementing more features.

Please note, this is my first ever bubble plugin so it might not be the most elegant or robust. I will be glad if the experience plugin creators can take a look at my source code and recommend ways of improving the code.

I will later be adding the ability select date ranges, block some days, set begining of the week, etc.

Currently 4 languages are supported, English (default), French, Spanish, German. I can add more language support if desired.

Please pm me or report any bug you discover here.
Happy bubbling.
Seanhoots

56 Likes
2

Well done mate :slight_smile:

3

Feature Showcase - auto-positioning.

This is one of my favorite features of the plugin. It is often the case that you want your datepicker to display is a certain position. But as users resize their browser window this can lead to some usability issues.

With this plugin you can set your default position of the date/picker but tell Air Date/Time picker to dynamically position the picker if the default position is getting out of the viewport.
See demo below:

The positioning algorithm seems to do a descent job so far with my limited testing.

Btw currently you have 6 different positioning options . The current positioning is either top or bottom, and then to the left, center or right. i.e (top-left, top-center,top-right, bottom-left, bottom-center, bottom-right)
In coming days i will add option for you to be able to have another additional 6 positions from the sides (left-top, left-center, left-bottom, right-top, right-center, right-bottom).
After all life is full of choices. :smiley:

Happy bubbling :smiley:
seanhoots

8 Likes
4

Thanks @jarrad

6

Love it!

1 Like
7

Can we also have an optional time. This way we can fully replace the current element and use this

1 Like
8

Hey @AliFarahat i’m not sure if i get you. Do you mean you want a separate element for time only?
Currently if you check “Only time picker” option in the property window you will get only a timepicker.

Btw note that currently the time picker is not properly sending the right value in some cases so i’m still working on it.

9

This is great! Would it be possible to make available weekdays dynamic (source could be a list of weekday numbers)?

10

Hey @pnodseth,
Actually that was the initial intention but I was having some technical issues that is why i resorted to this simple approach for now.
So it’s something i’m definitely going to implement (i actually have the code there) and when done you will be able to provide a list of numbers for available days.

2 Likes
11

Oh I missed that. So if under stand this correct this plugin has these options

1 date only
2 time only
3 date and time

Let me know. Will be able to select the date and format like AM/PM or 24 hours

Love this plugin.

Another thing I would appreciate some helpon getting me started with designing my on. Can we Skype sometime?

1 Like
12

Yep you’re right.

Yes you can select the date format. See the property editor.
I haven’t implemented the time formats yet but is on the plan. Currently the time component is not behaving the way it should so i want to fix that first before adding several options to the time just like the date.[quote=“AliFarahat, post:11, topic:14328”]
Another thing I would appreciate some helpon getting me started with designing my on. Can we Skype sometime?
[/quote]
I think you’re asking the wrong guy. lol. This is my very first plugin and I have only 2days experience developing bubble plugins. I basically just looked at several of the plugins and did try and error, and hacked this together. But there are guys like @jarrad who i think are very experience in developing plugins. He’s been very helpful to me in the past two days with fixing some issues with this plugin so talk to him.
Hopefully once i finish with this plugin and do another one i will have the right experience to teach others.

13

Hey @jarrad looks like high praise. Will be able to spare a few minutes to get me started on the plugin editor. I am very good with the API area it’s just I don’t know from where and how to begin. Let me know.

Thanks

14

Just pushed a major update for multi-date support.
See beginning of post (Update 5 and 6)

15

Yer mate no problem, flick me a message with what exactly your struggling with and i will help you out :slight_smile:

16

Hey Ali,
I just pushed a new update that allow you to choose the time format (12 hours or 24 hours).
Have also added several options for time. See update list at top of this page.

2 Likes
17

Nice one man.

Is it possible to type the date?

Thanks.

18

No you can’t type in the date and this is by design.
Are there any use cases where you will want users to type in date. I think this picker make it super easy and fast to pick dates so may not be necessary to type in dates.
Note that you can use the keyboard to easily navigate dates.
See update for in the top post here for the hot keys (keyboard shortcuts)

19

I will give it a try. Thanks

20

New update: Added support to set initial view (days, months, years) of datepicker. See top post for details and demo.

Choice is power :facepunch:
seanhoots

1 Like
21

@seanhoots

It just me or this plugin doesn’t work when is used into reusable elements?:cold_sweat:

edit: i made test in pages and groups and it works fine, but into reusable elements nothing :confused: