Plugin page: Air Date/Time Picker
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.
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.
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.
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)
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:
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:
Added support for multiple dates. This means that the picker can return different data depending on what option is currently selected.
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.
Added support for Russian language.
Fixed an issue with one of the date formats.
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.
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
Added ability to block some days of the week. For example you can prevent your users from selecting weekends.
Fixed an issue with having multiple instances of the picker on a page (thanks @jarrad)
Added ability to set Monday as the start of the week, similar to the default date/time picker.
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
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.
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.