Hey everybody I’m new here… giving AppStudio a try…
Is there a way I can have a date picker control to display a date with the dd/mm/yyyy format as it is where I live ?
The Bootstrap 4 Input control has the ability to have an inputType property of ‘date’. It’s in the drop down.
Yep, that’s correct… and it IS what I was trying, but once selected, the date is fomratted mm/dd/yyyy and NOT dd/mm/yyyy
Also, since we’re on the subject… how can I pad the label (“Input” text) opn the left so it does not extend (go under) the button with the text date ?
I do it with Bootstrap 4 too. To get it right with German common date format I found different solutions with tempusdominus datepicker and moment.js.
To check that it works see https://bsommer.de - Apps - WebApps - FristPick.
I added to Extrafiles:
<link rel="stylesheet" href="ted/tempusdominus-bootstrap-4.min.css" type="text/css" />
<script type="text/javascript" src="ted/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="css/all.css" type="text/css" />
<script type="text/javascript" src="js/all.js"></script> ```
Here a clipping with some lines from my code:
```var dt, dt2, vFristEndeDatum;
var OsterSonntagDatum, datumRosenmontag, datumAschermittwoch;
// moment() ohne ist heutiges Datum
var datum1 = moment();
var datum2 = moment();
var datum4 = moment();
var datumEnde = moment();
var datumEnde2 = moment();
var datumEnde3 = moment();
WarnJahr = moment('31.12.2098', 'DD.MM.YYYY');
MaximalJahr = moment('31.12.2099', 'DD.MM.YYYY');
datumRosenmontag = new Date();
// fuer tempusdominus - format L fuer date only
// wenn calendarWeeks: true, dann ist rechtes chevron außerhalb des Rahmens
// empfohlen, um Tastatur bei Datumswahl zu vermeiden, divInput, hier: BS4 Input datetimepicker1, auf readonly und hier ignoreReadonly: true. Funktioniert. 10.3.2019
// ontouchstart wg iOS hilft nicht
$('#datetimepicker1').datetimepicker({
locale: 'de',
format: 'L',
widgetPositioning: {
vertical: 'auto',
horizontal: 'auto'
},
ignoreReadonly: true
});
/
$("#Form1").show(function() {
datetimepicker1.value = moment().format('DD.MM.YYYY');
$('#datetimepicker1').datetimepicker('show');
//Zeile oben: Empfehlung aus tempusdominus etc Suche, damit Picker gleich gezeigt wird
});
datetimepicker1.onchange = function() {
datetimepicker1.value = $('#datetimepicker1').data('date');
dt = $('#datetimepicker1').data('date');
dt2 = dt;
BeginnAusgabeKurz.value = dt;
dt3 = moment(dt,'DD.MM.YYYY');
if (dt3.isAfter(WarnJahr)) {
$("#Toast99").toast("show");
}
}
To have the Input control actually “edit” the user input for each character pressed, you need to encapsule the Input control in a FORM tag. This is easy, just put the input control (and other controls as needed) into a common controls Container and set the HTML Tag to FORM.
I think I should add that with my way of doing this all date input controls are NOT set to date. They are text.
Hey bsommer… thanks for the help.
But where do these links go ?
Hey Gary,
I tried putting the BS4 input control inside a container with the HTML tag = form but did not change anything. The inputType should be date ?
I don’t get how that will allow me to change the text shown there,
Sorry I did not tell sooner. The links go to my local subfolders ted, css and js etc… I downloaded the files to these folders.
You will find the download locations searching for tempus…, moment.js etc.
Sorry too that the most important first line got lost when I pasted this.
<script type="text/javascript" src="ted/moment-with-locales.min.js"></script>
When you download you should select …with locales… so that you can use your locale. See second line.
$('#datetimepicker1').datetimepicker({
locale: 'de',
format: 'L',
widgetPositioning: {
vertical: 'auto',
horizontal: 'auto'
},
ignoreReadonly: true
}); ```I can’t seem to make it work… do you by chance have a simple sample project for me to see how is implemented ?
Hi, I have used an input box and named it “DateInput” then
DateInput.value = FormatDateTime(Date, “dd/mm/yyyy”)
Which gets the current date and displays it as dd/mm/yyyy
I do not have a simple sample. Things were complicated because it is not just a control to get or set a date but a datepicker. At least there are simple input controls too in my project where I can display calculated dates in dd mm yyyy format. I could send you a zip file of the whole project. This is certainly not more clarifying than my excerpts of the significant parts of code. I suggest you google moment.js as well as tempusdominus datetimepicker. This is where I got the ideas and the understanding how to get it working with dd mm yyyy. Or have a look at bsommer.de as mentioned before.
I started a sample to show the on the fly editing working, but I seem to have missed something. I’ll check against my working code to see the issue. I’ll post it soon. I’m in the middle of moving yet again. 
Actually, I remembered how I set this up. But the jist is that I used the following to test the date or time field for valid input vs no input. Invalid input in a date field causes a blank value, but I wanted to check for no input by user. using the checkValidity() function. Note: for Input_Date field, the use is: Input_Date_contents.checkValidity()
Note. I was wrong in the above post about the input field having to be in the form’s scope. Apparently, as this sample shows, there just has to be a FORM tag somewhere. I still suggest you encapsulate the input fields.
Project1.appstudio.zip (18.7 KB)
Thanks a lot Gary, but unfortunately your example still shows the date in mm/dd/yyyy format
Good point.
How to Customize HTML5 Date Field Date Format | HTML Form Guide suggests:
<input type="text" name="input" placeholder="YYYY-MM-DD" required
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))"
title="Enter a date in this format YYYY-MM-DD"/>
More on patterns is here: HTML input pattern Attribute
I’m sure I found a date pattern that was simpler, but google is not being friendly tonight.
Also, I think for a pattern to work, you have to have the form tag.
hey Gary
according to that link " * The user will need to enter the values manually as he would not have the privilege of selecting them from the datepicker."
This is exactly what I am trying to avoid.
Maybe the BS4 datatimepicker would work. It looks to have a format property that can be set to
format="DD-MM-YYYY hh:mm"