I want to add a date field in the form, but the only date format available is MM/DD/YYYY.
I need to change it though to DD/MM/YYYY, which is used in my country. This is really important for me and my clients.
Last edited 06 August 2020 by Yannis 2810
Hi Yannis,
The date function works off your local settings, so the date to me always displays as DD/MM/YYYY been in the UK but, this can change on your hosting server settings and display in american format. To make sure everybody get the same format, you will need to use the JQuery datepicker plugin. I wouldn't bother reading the instructions to use plugins with nicepage as non of them worked for me, had to edit the HTML file directly so, here we go:
At the bottom of the HTML file you need to look for `` and after that you need to Cut & Paste the following:
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
cript src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$("input[type=date]").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
$(inst).val(dateText);
}
});
$("input[type=date]").on('click', function() {
return false;
});
</script>
At the top of the HTML, within the <head> you need to look for any links to .js files, delete thoses. Now you need to Cut & Paste after ``
You should now have the format in DD/MM/YY.
To the developers, could you please add all JS files after the body, this way, plugins can be used.
Regards,
Simon..
Hi Yannis, The date function works off your local settings, so the date to me always displays as DD/MM/YYYY been in the UK but, this can change on your hosting server settings and display in american format. To make sure everybody get the same format, you will need to use the JQuery datepicker plugin. I wouldn't bother reading the instructions to use plugins with nicepage as non of them worked for me, had to edit the HTML file directly so, here we go: At the bottom of the HTML file you need to look for `` and after that you need to Cut & Paste the following: <script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> cript src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $("input[type=date]").datepicker({ dateFormat: 'yy-mm-dd', onSelect: function(dateText, inst) { $(inst).val(dateText); } }); $("input[type=date]").on('click', function() { return false; }); </script> At the top of the HTML, within the `<head>` you need to look for any links to .js files, delete thoses. Now you need to Cut & Paste after `` You should now have the format in DD/MM/YY. To the developers, could you please add all JS files after the body, this way, plugins can be used. Regards, Simon..Last edited 07 August 2020 by simonusher3
OK, once posted, the code snippets disappear, interesting.... I have attached a text file with the code.
OK, once posted, the code snippets disappear, interesting.... I have attached a text file with the code.Last edited 07 August 2020 by simonusher3
OK, once posted, the code snippets disappear, interesting.... I have attached a text file with the code.
Simon,
Thanks a lot for your help. I will check it and let you know.
Simon,
I have made the changes you suggested, but the input format of dates in the form remains "mm/dd/yyyy".
I have done a few tests with the form, and the date format in the message I receive is "yyyy/mm/dd", with or without your changes.
I am sending 2 files: one is a screenshot of the form and the second one is the code of the page with the form. Can you please take a look?
Yannis
Simon, I have made the changes you suggested, but the input format of dates in the form remains "mm/dd/yyyy". I have done a few tests with the form, and the date format in the message I receive is "yyyy/mm/dd", with or without your changes. I am sending 2 files: one is a screenshot of the form and the second one is the code of the page with the form. Can you please take a look? YannisHi Yannis,
Sorry for the delay, been away. I have looked at the index and it looks like you are building a booking enquiry form. We will approach this differently then.
You will need to change both input type="date" to "text" instead and the id="date-0074" to id="ArrDate" and the same for the departure date id="date-9fa4" to "DepDate".
Now we need to replace the previous JQuery code starting with $("input[type=date]").datepicker({ at the bottom of the index.
and cut & paste the following:
$("#ArrDate").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 1,
changeMonth: true,
changeYear: true,
onSelect: function() {
$("#DepDate").datepicker("option","dateFormat", 'dd/mm/yy');
$("#DepDate").datepicker("option", "disabled", false);
$("#DepDate").datepicker("option","minDate", $(this).datepicker("getDate"))
}
});
$("#DepDate").datepicker({ minDate: 0, disabled: true });
Make sure this is between script and /script (code snippets still playing up). Leave everything else as the same. Now the datepicker will only allow you to pick the next day and the other datepicker will only allow selection of the same date you chose from the first date. If you want to set the minimum notice to a week from today, then edit the line with minDate: 1 to 7.
Hopefully this will be better for you.
Regards,
Simon.
Hi Yannis, Sorry for the delay, been away. I have looked at the index and it looks like you are building a booking enquiry form. We will approach this differently then. You will need to change both input type="date" to "text" instead and the id="date-0074" to id="ArrDate" and the same for the departure date id="date-9fa4" to "DepDate". Now we need to replace the previous JQuery code starting with *$("input[type=date]").datepicker({* at the bottom of the index. and cut & paste the following: $("#ArrDate").datepicker({ dateFormat: 'dd/mm/yy', minDate: 1, changeMonth: true, changeYear: true, onSelect: function() { $("#DepDate").datepicker("option","dateFormat", 'dd/mm/yy'); $("#DepDate").datepicker("option", "disabled", false); $("#DepDate").datepicker("option","minDate", $(this).datepicker("getDate")) } }); $("#DepDate").datepicker({ minDate: 0, disabled: true }); Make sure this is between script and /script (code snippets still playing up). Leave everything else as the same. Now the datepicker will only allow you to pick the next day and the other datepicker will only allow selection of the same date you chose from the first date. If you want to set the minimum notice to a week from today, then edit the line with minDate: 1 to 7. Hopefully this will be better for you. Regards, Simon.Last edited 09 August 2020 by simonusher3
Hi,
If you want an minimum number of days stay, say 2 days, you need to use this JQuery code instead, you can change the days to anything you like.
$("#ArrDate").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 1,
changeMonth: true,
changeYear: true,
onSelect: function() {
var date2 = $('#ArrDate').datepicker('getDate');
date2.setDate(date2.getDate() + 2);
$("#DepDate").datepicker("option","dateFormat", 'dd/mm/yy');
$("#DepDate").datepicker("option", "disabled", false);
$("#DepDate").datepicker("option","minDate", date2)
}
});
$("#DepDate").datepicker({ minDate: 0, disabled: true });
The bold number is the one to change.
Regards,
Simon..
Hi, If you want an minimum number of days stay, say 2 days, you need to use this JQuery code instead, you can change the days to anything you like. $("#ArrDate").datepicker({ dateFormat: 'dd/mm/yy', minDate: 1, changeMonth: true, changeYear: true, onSelect: function() { var date2 = $('#ArrDate').datepicker('getDate'); date2.setDate(date2.getDate() **+ 2**); $("#DepDate").datepicker("option","dateFormat", 'dd/mm/yy'); $("#DepDate").datepicker("option", "disabled", false); $("#DepDate").datepicker("option","minDate", date2) } }); $("#DepDate").datepicker({ minDate: 0, disabled: true }); The bold number is the one to change. Regards, Simon..Last edited 10 August 2020 by simonusher3
Simon,
thanks a lot!
Yannis
Simon, thanks a lot! Yannis