Changing date format

Last updated: February 7, 2022 Written by: Avatar Teresa
share
Table of contents
share
Table of contents

You can change the date format 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.

Add custom styles

1. Go to the editor of your landing page.

2. Click on the form to start editing 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). Click Save and close.

6. Go to Page Settings and select 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.

Add JavaScript code

1. In the left upper corner, click the Landingi's logo and go to the JavaScript Code tab. You can access the JavaScript Code tab also from the Dashboard of each landing page.

2. Click Add script.

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

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

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

6. Check if the date format is correct.

share

Was this manual helpful?