Date / Time Inputs

I was working on a form that takes calendar form data … like an airline ticket.

Date Start – Date End

Then a time block like a calendar

Time Start – Time End

Is there an internal class or something to handle this? Or is there an external library you can recommend?

The idea is to take a date/time range for an insertion for advertising … Upload a File and then send the input data to an external REST API.

Any ideas on best practices? David

HI David, Blocs has no option for that, but we have external input for .JS and add custom CSS you can do it yourself,
see this website I made this is a 100% blocs project with 2 input fields based on bootstrap-datepicker.js ( )
you have to play around to get it work

Good luck

1 Like

Thanks sandy!

We will try that out.

More soon, David

Hi Sandy,

Are you able to go through the process to get something like this to work?
I’m not familiar with how to integrate javascript and CSS into Blocs, but would like to add a date and time picker to a website.


Hi @gman I just made this page to explain it, I hope it helps

there are many datepickers around, but this is a simple one :smiley:



You’re always so helpful. Thanks.
But - I can’t figure out, where to put the .js and .css files.

I created a folder called “assets” and put the files there. Bingo.
Thanks a lot Sandy.

1 Like

@Bootsie Hi Roger, thanks.
I always copy the files I need for a project in the assets folder ( if I move a project, everything is compleet :smiley: )
after that go to your page settings and click + sign next to the ‘header file attachment’

then find the assets folder of your project and add those two file

thats it :smiley:

I did.
And it works.

1 Like

Nice, i put the 2 screenshots online as well, to make it more clear

Hi! @sandy, thanks a lot for the help, I have a question is there a way to change the name of the month and days to spanish for example? I saw in your site you have german days and an icon calendar.

Thank you so much!

I made a copy of the bootstrap-datepicker.js file and give it a new name for you like: bootstrap-datepicker-ES.js. than take an editor, i use Brackets, and edit the bootstrap-datepicker-ES.js file, find the name in english and write them in Spanish, save and ready, ( don’t forget to link to the new .JS file :smiley: ) I know there are other modern ways, but this works perfect for me. good luck

1 Like

Hello @marcoserranof.

In this link (ñol) you have bootstrap-datepicker.js translated into Spanish

En español:

Hola @marcoserranof.

En este enlace (ñol ) tienes bootstrap-datepicker.js traducido al español

1 Like

Thank you so much for your help! I did exactly what you said and it works for me :grinning:

Greetings from Mexico!

1 Like

Hey that’s very nice! Thank you su much I was looking for that. :grinning:

1 Like

@marcoserranof nice, happy to help :smiley: greetings from Greece

1 Like

Agradecido por tu mensaje, estoy encantado de poder servirte de ayuda.
Cualquier cosa, envíame un mensaje.
Saludos desde España.

1 Like

Hi guys, I am trying to add this to a site, but when I add all the css and js files, add code to the footer and then add a standart text input and set an ID this doesnt seem to work, I have tried to use “checkin” or “start” as ID to see if the js and script match this field but no. its a standard field without date picker, could you help me with this? i follow Wam´s link, but I think there is a mising info with the ID
@Wam @sandy
Hola chicos, estoy tratando de agregar este selector a mi pagina, ya hice el attachment del js y css, agregue el script en el footer y coloque los campos input en el formulario. Le asigne el id “checkin” y luego “start” para ver si de esta forma me lo vincula con el script y el js pero al exportar o incluso probar el sitio se comporta como un campo de texto normal. Podrian ayudarme con esto? Seguí el link proporcionado por Wam, pero parece haber informacion faltante respecto a los ID.
Muchas gracias.

Hello Nico @chicuelo I just made a new project to test it for you and follow my OWN instructions of a small explanation site which I made in May 2018, see this post Date / Time Inputs
and it works great. give it a try with a clean project. good luck

1 Like

Thank you @sandy, yes I follow those instructions and make sure the files where on the folder.
I think the issue comes to the ID. How do the code know in which form field display the data if I gave them a random ID? thats why I tried checkin/checkout, start/end to match the scripts.