🗓 [FREE Plugin] Air Date/Time Picker

seanhoots · February 14, 2018, 6:57pm

You should use the minimum and maximum date options
If you want the user to be able to select only dates from current month you can do something like below.
The challenge is knowing the last day for the current month. Example here it’s 28.
For next month it will be 31.
So you will need some function to give you last day of the current month.

seanhoots · February 14, 2018, 7:08pm

I looked at your demo and i think you’re not doing it correctly.
Cover the whole date picker element with the button it will still work.
Then put whatever placeholder text into the button text.

hi1 · February 14, 2018, 7:12pm

Yes! Sorry, I’m in there working now. It was covered but I couldn’t access the popup panel.
I’m playing with the month selection now.

hi1 · February 14, 2018, 7:22pm

Okay! I think I got it. I’ve decided to pull the start date/end date from a Data Type. This way I can pass info through the URL so that the users can update their March, April, whatever, calendars and save that info.

Thanks so much for sticking with me! I think this is going to work like a charm.

vstsang · February 22, 2018, 8:26am

Thanks @seanhoots for making this plugin!

I wish to display the datepicker permanently as per here.

There’s currently no option inside the plugin to do this. So I tried both wrapping the element with <div></div> and setting inline="true" (code below) as stated in the doc. However because it’s a plugin and not a JavaScript instance, I couldn’t get it to work.

<input type="text" id="dp9d9c6523bd0b6" placeholder="22/2/2018" inline="true"> doesn’t show the datepicker permanently

Can someone suggest how I can get into inline mode?
Would @seanhoots kindly consider adding this into the plugin?

Thanks!

multiproduktion · February 22, 2018, 9:02am

Is there any way I can calculate days in the range of the excluded weekdays? Eg. If I select a month in a range, and I want to exclude Sat & Sun - I get the number of days minus all sat & sun in that range?

seanhoots · February 22, 2018, 1:41pm

@vstsang, yes I’m aware inline mode and if you scroll up this thread you will see I have it planned (see the trello board).
The thing is the inline mode is simply not just setting the inline=true. You also need to instantiate it on a non-input field such as a div. The plugin instantiates on an input field so even if you you wrap it in a div it won’t work as you’ve seen.
It will requires me to rewrite the plugin, something I haven’t found time to do.
If you’re comfortable with some Javascript you can manually do it yourself without using the plugin.
Or you can wait for me to release it in a later date. If the above two options don’t work for you and you really really need it, you can sponsor it too.

seanhoots · February 22, 2018, 1:44pm

I think this is something outside the plugin that you should be able to do with some workflow calculations.

vstsang · February 23, 2018, 5:43am

Thanks for replying @seanhoots. I would be happy to sponsor.

I would also like to request an additional feature, here is the full list.

Please let me know offline how much you’re looking for and how long you expect this to take.

Thanks again.

seanhoots · February 23, 2018, 1:32pm

What will you want to add to the cell content for the custom cell content?

I will get back to you soon for a quote on the inline element feature.

vstsang · February 23, 2018, 11:08pm

Apologies, I should have been more specific. I’m building an appointment booking app. The custom cell content will indicate on the datepicker whether there’s a morning or afternoon availability for the day.

For example, if there are availabilities for AM, a blue dot will be shown below the date. If both AM & PM have availabilities, then both blue and red dot will be shown as per the mockup below.

mebeingken · February 26, 2018, 8:16pm

@seanhoots Did the ability to disable the cursor ever make it in?

Thanks,

–Ken

jonathan.timianko · February 27, 2018, 12:33am

Not sure if this has been answered before but are there are any plans to eventually be able to block a list of date ranges and not just singular dates? If you have a booking platform where people have multi day reservations it would be incredible to use the Air Date and Time Picker so that those date ranges are blocked out in the dropdown calendar. Not sure if there is a workaround right now where it can be done with singular dates. Let me know! Thanks!

seanhoots · February 27, 2018, 12:46am

I’ve done it but not pushed it out yet. Trying to lump together some few new features for the next update instead of always pushing a new version for any small feature.

hola1 · March 3, 2018, 9:22pm

Please add catalan language:

days: [‘Diumenge’, ‘Dilluns’, ‘Dimarts’, ‘Dimecres’, ‘Dijous’, ‘Divendres’, ‘Dissabte’],
daysShort: [‘Dg’, ‘Dl’, ‘Dt’, ‘Dc’, ‘Dj’, ‘Dv’, ‘Ds’],
daysMin: [‘Dg’, ‘Dl’, ‘Dt’, ‘Dc’, ‘Dj’, ‘Dv’, ‘Ds’],
months: [‘Gener’,‘Febrer’,‘Març’,‘Abril’,‘Maig’,‘Juny’, ‘Juliol’,‘Agost’,‘Setembre’,‘Octubre’,‘Novembre’,‘Desembre’],
monthsShort: [‘Gen’, ‘Febr’, ‘Març’, ‘Abr’, ‘Maig’, ‘Juny’, ‘Jul’, ‘Ag’, ‘Set’, ‘Oct’, ‘Nov’, ‘Des’],
today: ‘Avui’,
clear: ‘Netejar’,
dateFormat: ‘dd/mm/yyyy’,
timeFormat: ‘hh:ii aa’
firstDay: 1

seanhoots · March 3, 2018, 10:15pm

Hi @hola1, ok thanks I will add it to next version.

Andy_i · March 4, 2018, 10:59am

@seanhoots

Hi Sean, i’m trying to show an element once the air date/time picker has been clicked and the calendar appears.

Showing my other element isn’t a problem, as i can do it when the date picker is clicked or set a state when it is clicked to be “open”, and have my other element show based on that state.

However i’m struggling to close/hide my other element when the date/time picker is auto closed, a smart feature i want to keep. However, it isn’t easy for me to set the state to closed when anything else on the screen is clicked, and seen as though the date /time picker is still visible (just not the calendar) when its auto closed, i’m struggling to come up with a conditional rule to tell me when the calendar section of the plugin is not visible, so i can hide my other element. Any ideas how to do that?

seanhoots · March 4, 2018, 2:20pm

Hi @Andy_i, do you mean you want triggering events for when the calender is showing amd when it is hiding?

Andy_i · March 4, 2018, 3:44pm

@seanhoots Yes, exactly, as simple as making another element visible or not.

jonathan.timianko · March 5, 2018, 2:27am

Hi @seanhoots I’m also willing to sponsor inline calendar as well. I’m building an Airbnb style availability calendar where a user should be able to mouse over a date to block it and click on it again to unblock it. Pretty much your plugin has everything that’s needed built in to make this happen other than the ability to make the calendar permanently visible. Thanks!