Show a Datepicker in Forms Is your u5CMS installation . . . ■ yuba.ch

Show a Datepicker in Forms

Is your u5CMS installation up-to-date and ready for this functionality?

For the functionality described on the page at hand, make sure you are using a current u5CMS version. You'll find the version number by surfing to your website and switching your browser to show the HTML source code. At the very bottom of the source code you'll find a line like this:

<!-- This site runs with u5CMS version 12.4.3 from https://yuba.ch/u5cms -->

If there is no such line or no version number or one lower than V8.3.3, see the following instructions:

u5CMS — How to update an existing installation (version 4 and above)

These update instructions are for u5CMS versions 4 and above. For versions below 4 read this!

On your server, go to the files of your old (current) u5CMS installation and copy config.php to config.old.php
Download the ZIP-File , unzip it and delete the file favicon.ico
Further, delete all contents in folder r EXCEPT runonce.php
Transfer the remaining files and folders from the ZIP file over the existing installation (FTP upload)
Now, on your server, copy the database connection parameters $host $username $password $db from config.old.php to config.php
If there are other dedicated settings in config.old.php, set the same in config.php (compare parameter by parameter)
You must now log in to the backend of your (now updated) u5CMS installation via https://urltoyouru5cmsfrontend/u5admin and open a css-object (e. g. csslayout) in PIDVESA
×
PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)
's S code section, for your site to work correctly again.
You must now log in to the backend of your (now updated) u5CMS installation via https://urltoyouru5cmsfrontend/u5admin for that the database will be updated too

TROUBLE SHOOTING
A) If the layout does not look right after having done step 7, go to https://urltoyouru5cmsfrontend/u5admin and open a css-object (e. g. csslayout) in PIDVESA

: PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)

's S special function's code (htmltemplate & css) section and safe it!
B) If your navigation does not look well, copy this code to cssnavleft in PIDVESA

: PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)

's→S→Code and this code to cssnavleftsubtop in PIDVESA

: PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)

's→S→Code and this code to cssnavtop in PIDVESA

: PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)

's→S→Code

C) If after A) and B) the layout still does not look right, change the doctype <!DOCTYPE html> to the old one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Preparation

1. In the u5CMS-backend
Create a page named datepicker1. Its content must be
(do not change the string [_language_], this is a superglobal)

  
[h:]
<script>autosettotoday='yes'</script>
<script type="text/javascript" src="calendar/calendar.js"></script>
<script type="text/javascript" src="calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar/lang/calendar-[_language_].js"></script>
<script type="text/javascript" src="calendar/calendar-setup.js"></script>
<script>
function takedate1_mandat() {
document.u5form.d1_mandatory.value=document.u5form.f_date_b1_mandatory.value.split('/')[0]-0;
document.u5form.m1_mandatory.value=document.u5form.f_date_b1_mandatory.value.split('/')[1]-0;
document.u5form.y1_mandatory.value=document.u5form.f_date_b1_mandatory.value.split('/')[2]-0;
dayabr1_mandatory();
}
function dayabr1_mandatory() {
selecteddate=new Date();
selecteddate.setFullYear(document.u5form.y1_mandatory.value);
selecteddate.setMonth(document.u5form.m1_mandatory.value-1);
selecteddate.setDate(document.u5form.d1_mandatory.value);
selecteddate.setHours(1);
if (selecteddate.getDay()==0) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[0];
if (selecteddate.getDay()==1) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[1];
if (selecteddate.getDay()==2) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[2];
if (selecteddate.getDay()==3) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[3];
if (selecteddate.getDay()==4) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[4];
if (selecteddate.getDay()==5) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[5];
if (selecteddate.getDay()==6) document.getElementById('showweekdayname1_mandatory').innerHTML=Calendar._SDN[6];
if(document.getElementById('d1_mandatory').value<1||document.getElementById('m1_mandatory').value<1||document.getElementById('y1_mandatory').value<1){
document.getElementById('showweekdayname1_mandatory').style.display='none';
}
else document.getElementById('showweekdayname1_mandatory').style.display='inline';
}
</script>
<span id="showweekdayname1_mandatory"></span>
<select style="width:auto" name="d1_mandatory" id="d1_mandatory" onchange="dayabr1_mandatory()" onfocus="dayabr1_mandatory()" onblur="dayabr1_mandatory()">
  <option ></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="5">5</option>
  <option  value="6">6</option>
  <option  value="7">7</option>
  <option  value="8">8</option>
  <option  value="9">9</option>
  <option  value="10">10</option>
  <option  value="11">11</option>
  <option  value="12">12</option>
  <option  value="13">13</option>
  <option  value="14">14</option>
  <option  value="15">15</option>
  <option  value="16">16</option>
  <option  value="17">17</option>
  <option  value="18">18</option>
  <option  value="19">19</option>
  <option  value="20">20</option>
  <option  value="21">21</option>
  <option  value="22">22</option>
  <option  value="23">23</option>
  <option  value="24">24</option>
  <option  value="25">25</option>
  <option  value="26">26</option>
  <option  value="27">27</option>
  <option  value="28">28</option>
  <option  value="29">29</option>
  <option  value="30">30</option>
  <option  value="31">31</option>
</select>
<select style="width:auto" name="m1_mandatory" id="m1_mandatory" onchange="dayabr1_mandatory()" onfocus="dayabr1_mandatory()" onblur="dayabr1_mandatory()">
  <option ></option>
  <option  value="1">1</option>
  <option  value="2">2</option>
  <option  value="3">3</option>
  <option  value="4">4</option>
  <option  value="5">5</option>
  <option  value="6">6</option>
  <option  value="7">7</option>
  <option  value="8">8</option>
  <option  value="9">9</option>
  <option  value="10">10</option>
  <option  value="11">11</option>
  <option  value="12">12</option>
</select>
<select style="width:auto" name="y1_mandatory" id="y1_mandatory" onchange="dayabr1_mandatory()" onfocus="dayabr1_mandatory()" onblur="dayabr1_mandatory()">
  <option ></option>
  <option  value="2022">2022</option>
  <option  value="2023">2023</option>
  <option  value="2024">2024</option>
  <option  value="2025">2025</option>
  <option  value="2026">2026</option>
  <option  value="2027">2027</option>    
</select>
<input onchange="takedate1_mandat();" type="hidden" name="date1_mandat" id="f_date_b1_mandatory" />
<button type="reset" id="f_trigger_b1_mandatory"><img src="calendar/img.gif" /></button>
<script type="text/javascript">
function f_trigger_b1_mandatory() {
    Calendar.setup({
        inputField     :    "f_date_b1_mandatory",      // id of the input field
        ifFormat       :    "%d/%m/%Y",       // format of the input field
        showsTime      :    false,            // will display a time selector
        button         :    "f_trigger_b1_mandatory",   // trigger for the calendar (button ID)
        singleClick    :    false,           // double-click mode
        step           :    1,                // show all years in drop-down boxes (instead of every other year as default)
        firstDay       :    1,	             // 0=Sunday, 1=Monday
        showOthers     :    true            // if set to “true” overlapping days of neighbour months are shown
    });
if (autosettotoday=='yes') {
todaysdate=new Date();
if(document.u5form.d1_mandatory.value<1){
document.u5form.d1_mandatory.value=todaysdate.getDate();
document.u5form.m1_mandatory.value=todaysdate.getMonth()+1;
document.u5form.y1_mandatory.value=todaysdate.getYear()+1900;
}
dayabr1_mandatory();
}
}
f_trigger_b1_mandatory();
</script>
[:h]

2. Again in the u5CMS-Backend
Go to PIDVESA

: PIDVESA: The very right column of your u5CMS backend is your repository. PIDVESA stands for Pages, Images, Documents, Videos, External Links, Special Functions, and Account. Find these things by clicking the respective radios P I D V E S or A in the top right corner of your backend screen; cf short reference (pdf)

's S, click the code-button there, then click htmltemplate an add this line AS LAST CSS SOURCE:

Usage in your forms

When a date shall be indicated in a form, just write

[fo:]
[fi:]
[le:]Your data[:le]
[h:]
<label>Please indicate the date of this and that*</label>
[$$$:datepicker1]
[:h]
[:fi]
[:fo]

NOTICE: This solution does not support multiple datepickers per page. If you need a second datepicker on the same page, create datepicker2 containing the same code as datepicker1 but search forll all(!) substrings 1_mandat and replace with 2_mandat (incl. the strings einding on "ory") and remove the line
<script type="text/javascript" src="calendar/calendar.js"></script>
in datepicker2 and in your form insert
[$$$:datepicker2].

VALIDATION: For better validation change in datepicker (in the CMS backend) autosettotoday='yes' to autosettotoday='no'. In case you want to switch validation off (allow an empty date), remove all occurences of the string _mandatory in datepicker (in the CMS backend). In case you want to do more dedicated validation (e. g. date not older than ...) you have to add your own javascript code in datepicker (in the CMS backend, e.g. add a hidden field dateok_mandatory and make it empty if the date is not ok (thereby the form cannot be submitted) and write something like "ok" or "1" into it when the date is in the range you want to allow (therefor you need an onchange events on the d_mandatory, m_mandatory and y_mandatory fields (in datepicker) or a controlling, recursing (with settimeout) function). Of course you have to inform the user in case the selected date is out of range, do that by setting an onclick event on the send button which initiates the validating calculation leading to an alert when necessary!).

Example Result

Code of the Example Result

[fo:]
[fi:]
[le:]Your data[:le]
[h:]
<label>Please indicate the date of this and that*</label>
[$$$:datepicker1]
[:h]
[:fi]
[:fo]

A note to the careful reader

Usually u5CMS-commands – e. g. [b]bold text[/] – must be outside HTML-sections:

Here u5CMS-code like [b]bold text[/] is possible
[h:]
Here you are inside an HTML-section, therefore [b]bold text[/] does not
work but <strong>bold text</strong> (or old style: <b>bold text</b>).
[:h]
Here we are outside the HTML-section again.

The command for inclusions [$$$:nameofthepagetoinclude] – e. g. [$$$:datepicker] – and the command for formdata queries [fieldname|formname:dat] and references to objects – e. g. [imagename] – and further superglobals are useful exceptions, they do work outside and inside HTML-sections.

That's why you can simply type [$$$:datepicker] within an HTML-section, instead of stopping the HTML-section first, entering the u5CMS-command for an inclusion then, and restarting the HTML-section afterwards (what would look like this: [:h][$$$:datepicker][h:]).