Datepicker html code

Being a huge on HTML code I struggle with a small problem.
I have a datepicker in a form, but I want to change the way the date is formatted into dd/mm/yyyy
How do I do this?

This is the HTML code I used to put the date picker in the form:

jQuery UI Datepicker - Default functionality


Oh dear; how can I show the HTML code?

meta charset=“utf-8” style="">
meta name=“viewport” content=“width=device-width, initial-scale=1” style="">
title style="">jQuery UI Datepicker - Default functionality
link rel=“stylesheet” href="//" style="">
link rel=“stylesheet” href="/resources/demos/style.css" style="">
script src=“”>
script src=“”>
$( function() {
$( “#datepicker” ).datepicker();
} );


Hi @Mattheus
Sorry, I can’t help you with this problem. But @webplus have great a date picker bric and it works perfect. It’s at the moment a beta ( I think ) He will do a set of brics for buying …


A datepicker bric?!? That would be great!! No more fooling around with codes…

Do you have a link where I can find his date picker?

I do not think that @webplus has already made it available.

In the meantime if you want to you can private message me the black file containing the date picker code widget ( only this part of your site ) and attachments you have used I can have a look to try to assist you.



pm on its way

Hi @Mattheus

Here you go:

Date Picker European format.bloc (723.4 KB)



That is a totally different way compared I did it…:joy::joy::joy:
But best of: it works!!! THANKS THANKS THANKS!!!

Hello together,

@tom2, thank you for mentioning.

Yes, until now I do not released this bric.

Thanks again @MDS!
Is there also somewhere an option that I can change the background of the date-picker popup; It’s now transparant…

Hi @Mattheus

You need to insert the following code in the page settings:


.ui-widget-content {
border: 1px solid #dddddd;
background: rgba(0,0,0, 0.6);
color: #333333;

For instance here the background will be black with an opacity set to 60%.

Update file:

Date Picker European format-BCKGD-color.bloc (723.7 KB)


1 Like

Awesome!! Thanks a lot!!!

You’re welcome.


Perhaps a silly question: But it looks like the date picker will be on several pages on the website. Can I also put it in the project header and project footer? In that case I don’t have to copy/paste it on all the different pages the date-picker is used…

Hi @Mattheus

Of course you can. Project header and footer will make all additional code available throughout the site.

Met vriendelijke groet


1 Like


i’ve added two date pickers in this project. Weblink
Here a day is added even to the day of arrival automatically suggest the day of departure.
I have even translated the names of weekdays and months and added a calendar

Hope you like it.

1 Like

Hallo mr_xing

Wie hast du das Kalender-Symbol unter Anreise/Abreise im Input hinein bekommen?


i put the date fields as HTML-Widgtets in the form. The calendar icon comes from FontAwesome.

Here ist the code:

<div class="form-group">
   <label class="">Anreise</label>
      <input class="form-control input-field-date" placeholder="" id="Anreise" data-date-format="" data-custom-classes="input-field-date" aria-invalid="false" style="cursor: pointer;" type="text">
     <i class="fa fa-calendar" style="position: absolute; right: 24px; top: 33px; pointer-events: none; font-size: 1.3em;"></i>      
      <div class="help-block"></div></div>

Hope that explains it :wink: