🗓 [FREE Plugin] Air Date/Time Picker

seanhoots · January 26, 2018, 11:36am

Hi @Joseph.o, i just tested at my end and everything is working perfectly.
From the error message it seems something is blocking moment.js (a javascript library) from loading.
Please can you share what other error messages are in your console. Particularly any message in red.

Joseph.o · January 29, 2018, 2:28pm

Dear @seanhoots

please fond bellow the errors i get:

Joseph.o · January 29, 2018, 2:29pm

Do you have any solution because I don’t understand why it’s not working

seanhoots · January 29, 2018, 3:32pm

Have you tried on other browsers and systems. For example have you tried a mobile browser?
As I said earlier the error is saying moment.js which is a javascript library the plugin depends on is not being loaded on your system. It’s hard to tell why it’s not loading on tour system. I’ve tested it on different browsers and systems are my end and everything works. And so far you’re thr only one who is reporting this issue. So it’s not coming from thr plugin but something at your end that is preventing moment.js from loading.

Jici · January 30, 2018, 4:15am

Forget this, just switch manually to the new version and everything is fine. Thanks

medicalresearchtoolb · February 6, 2018, 5:10pm

@seanhoots

first of all thanks for this amazing plugin!

Do you think you could implemente Italian in it? I would be happy to help with translation, if needed

Ric

seanhoots · February 6, 2018, 6:43pm

Hi @medicalresearchtoolb,
Yes i can include Italian language if you can assist me with the translation.

Will you be able to provide me the translation in exactly the format below. Post it here so that other members
may review it before I include it in the plugin.

Note the dateFormat option should be the default format for specifying dates in Italian, if it’s day first before month it should be dd/mm/yyyy. If you do not prefix a 0 if the day or month is a single digit then use just a d or m, instead of dd or mm.

For the firstDay, Sunday is 0 so if the first day in Italian week is Monday then that value should be 1.
Thanks

    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    today: 'Today',
    clear: 'Clear',
    dateFormat: 'mm/dd/yyyy',
    timeFormat: 'hh:ii aa'
    firstDay: 0

medicalresearchtoolb · February 6, 2018, 6:55pm

@seanhoots Amazing news! I will do the translation asap

I found an issue, but I am not sure it’s in your plugin… I am quoting you in another post

thanks a lot!!!

medicalresearchtoolb · February 6, 2018, 7:39pm

Here I come with the translation!

days: [‘Domenica’, ‘Lunedì’, ‘Martedì’, ‘Mercoledì’, ‘Giovedì’, ‘Venerdì’, ‘Sabato’],
daysShort: [‘Dom’, ‘Lun’, ‘Mar’, ‘Mer’, ‘Gio’, ‘Ven’, ‘Sab’],
daysMin: [‘Do’, ‘Lu’, ‘Ma’, ‘Me’, ‘Gi’, ‘Ve’, ‘Sa’],
months: [‘Gennaio’,‘Febbraio’,‘Marzo’,‘Aprile’,‘Maggio’,‘Giugno’, ‘Luglio’,‘Agosto’,‘Settembre’,‘Ottobre’,‘Novembre’,‘Dicembre’],
monthsShort: [‘Gen’, ‘Feb’, ‘Mar’, ‘Apr’, ‘Mag’, ‘Giu’, ‘Lug’, ‘Ago’, ‘Set’, ‘Ott’, ‘Nov’, ‘Dic’],
today: ‘Oggi’,
clear: ‘Rimuovi’,
dateFormat: ‘dd/mm/yyyy’,
timeFormat: ‘HH:ii’
firstDay: 1

Everything should be fine, any italian user can confirm? (or deny?)
I am not sure about the time format, though, we normally use the 24h

THanks again!!!

seanhoots · February 6, 2018, 7:56pm

Ok thanks. I will include it in the next update expected sometime end of this week.

mebeingken · February 9, 2018, 6:05pm

Great plugin…thank you for your efforts!

Any chance the IOS keyboard can be disabled when the picker pops up?

seanhoots · February 9, 2018, 6:17pm

Hi @mebeingken,
Thats an interesting problem. So initially the picker’s input was completely disabled without any cursor.
But because the picker allows you to select multiple dates at a go, some users wanted a way to use the cursor to scroll through through the list of picked dates if the list was longer the input’s length.
That is when i introduced the cursor. Obviously if we have a cursor then we need the keyboard to be able to move the cursor.
But on mobile as you’re showing the virtual keyboard also covers part of the picker. That’s why i say it’s an interesting problem.

What i can do is to include an option that allow you to completely disable the cursor in that case when you click on the picker no virtual keyboard will appear. But that means that if your’e using a picker that allows multiple dates you wont be able to scroll through the picker.

I will include this option to disable the cursor in next update.

hi1 · February 14, 2018, 3:01am

This is so great; thank you!

Two questions:

Is there a way to use a line break as the multiple dates separator?
I see in the screenshots above a way to update the colors but I don’t see those options where I thought they’d be.

18%20PM634×1278 45.4 KB

Thanks so much!

seanhoots · February 14, 2018, 4:53am

Unfortunately not. You can only use some character. Moreover the input is not a multiline text areas so even if you could use a line break you will only see one line.

As you showed in you picture you can use the background style and border style options to style the input element.
To style the date picker you also have the other options up

hi1 · February 14, 2018, 6:03pm

Hi @seanhoots,
Thanks! I swear that Day and Highlight color options weren’t there. I restarted Chrome this morning and boom! they appeared. Thank you!

For the multiple lines/line break question, maybe you could help me brainstorm how best to work this out:
I’d like my users to see a given month’s calendar and select dates within that month that they are available.

The single line makes their list challenging to read.

One idea:
Can I hide their dates as text in this Air Date/Time Picker? So that the text remains with the initial content? That way I could display the dates in an easier format in another element like this:

One more question:
Is there a way for the calendar to just display a single month?

Thank you so much! This is looking like a grand solution to a problem I’ve been working on.

seanhoots · February 14, 2018, 6:33pm

Hey @hi1,
You’re in luck i actually thought about another use case similar to yours and so have a solution for it.
The Air Date/Time Picker has an action show datepicker as shown below.

This action allows you to open the date picker through an event, example a click of a button.
So in your case you can overlay (or place) an element say a button that covers the Air Date/Time picker.
Then you create a workflow that when the button is clicked show the picker.

The picker calendar will show but because the button is covering the picker input the user wont see it.
This should work perfectly for your use case.

hi1 · February 14, 2018, 6:38pm

That worked great!

And the last dream feature… can the picker calendar show just one month?

Thanks!
Jen

seanhoots · February 14, 2018, 6:41pm

By “show just one month” what do you exactly mean?

hi1 · February 14, 2018, 6:47pm

I’d like to display just one full calendar month at a time (say March). For this situation, a user should provide all their available dates but just for a single month.

I tried to set the start date/end date via these options:

But I couldn’t enter in say, March 1, 2018 for the start and March 31, 2018 for the end.

hi1 · February 14, 2018, 6:51pm

Although now that I’m looking at the screenshot I just added, it’s clear that those options aren’t what I was looking for. Funny how it seemed like they might be the settings I was looking for until I posted it here.