Datepicker html code

I Need Help
#1

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

Vanaf:

#2

Oh dear; how can I show the HTML code?

#3

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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" style="">
link rel=“stylesheet” href="/resources/demos/style.css" style="">
script src=“https://code.jquery.com/”>
script src=“https://code.jquery.com/ui/1.12.1/jquery-ui.js”>
script>
$( function() {
$( “#datepicker” ).datepicker();
} );
/script>

p>Vanaf:

#4

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 …
Tom

2 Likes
#5

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

#6

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

#7

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.

MDS

2 Likes
#8

pm on its way

#9

Hi @Mattheus

Here you go:

Date Picker European format.bloc (723.4 KB)

MDS

2 Likes
#10

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

#11

Hello together,

@tom2, thank you for mentioning.

Yes, until now I do not released this bric.

#12

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

#13

Hi @Mattheus

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

<style>

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

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

51
Screenshot 2019-02-09 at 16.04.51.jpg1334Ă—976 137 KB

Update file:

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

MDS

1 Like
#14

Awesome!! Thanks a lot!!!

#15

You’re welcome.

MDS

#16

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…

#17

Hi @Mattheus

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

Met vriendelijke groet

MDS

1 Like
#18

Hi,

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
icon.

Hope you like it.

1 Like
#19

Hallo mr_xing

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

#20

Hi,

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="tt.mm.jjjj" id="Anreise" data-date-format="dd.mm.yyyy" 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: