Changing the format of the date field

You can change the format of the date field in your landing page form. In this guide, you will learn how to create your own Date field and customize the format to MM/DD/YY (to allow users to choose a date from the calendar).

Set up the date

1. Go to the editor of your landing page.

2. Click on the form and go to its Settings.

3. If your form contains the Date field – delete it.

4. Click Add element and select Single line text.

5. Change the Label to Date (1) and type in date in the Name attribute (2) (in Additional options). Click Save and close.

6. Go to Page Settings and click Add custom CSS.

When editing, you can go back to Page Settings by clicking on the arrow:

7. In the Main page tab, paste this code, then Save & close:

@import url("/js/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.min.css")

8. Publish your landing page.

9. In the upper left corner, unfold the menu and go to the JavaScript Code tab. You can access the JavaScript Code tab also from the Dashboard of every landing page.

10. Click Add script.

11. Copy the following code:

<script type="text/javascript" src="/js/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="/js/libs/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en.min.js"></script>
<script type="text/javascript">
(function ($) {
$('[name="date"]').datepicker({
autoclose: true,
clearBtn: true,
format: 'mm/dd/yyyy',
language: 'en',
todayBtn: 'linked',
todayHighlight: true
});
})(jQuery);
</script>

12. Name (1) the script and paste the code in the Content field (2). Select the Body bottom (3) position on the Main page (4). Click Add.

13. Go back to the editor and publish your landing page again.

Open your landing page and check if the format of the date field is correct.