Changing date format

Last updated: February 12, 2021 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.

Customize the date format

1. Go to the editor of your landing page. Click on the form to start editing. Go to Settings from the context menu (1) or toolbar on the right side of the editor (2).

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

3. Click Add element and select Single line text.

4. Change the Label to Date (2) and type in date in the Name attribute (2). Click Save and close.

5. Go to Page Settings (1) in the right top corner of the editor and select Custom CSS (2).

6. Go to Custom styles and paste this code, then Save and close:

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

7. Publish your landing page.

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

9. Click Add script. 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>

Type in a name (1). Paste the code (2), and select Body bottom (3) and Main page (4). Click on Add.

10. Go to the editor and publish your landing page again.

11. Check if the date format is correct.

share

Was this manual helpful?