JS Animated. How to change date format in Booking form

This tutorial explains how to change date format for the booking form in our JS Animated templates.

You will learn how to use the following date formats:

• American: 12/31/2014
• European: 31/12/2014
• ISO: 2014/12/31

So, let’s begin!

Default form values

Find the .html file with the form in the "site" folder and open it in Notepad++, or another editing program.

Change format for the dates displayed in the form fields by default.

<input type="text" name="Check-in"  placeHolder='10/05/2014' data-constraints="@NotEmpty @Required @Date">

For example, if you want to use American date format, the code above changes to:

<input type="text" name="Check-in"  placeHolder='05/10/2014' data-constraints="@NotEmpty @Required @Date">

Input format

Navigate to "booking" folder and then to "js" folder inside.

Change the following code in booking.js by adding dateFormat option in .datepicker object for the desired date format, according to the table below:

					.find(object.datepickerClass)
						.wrap(wrapper)
						.find('input')
						.datepicker({
					    	showButtonPanel: true
					    }).end().end()

For example, for the European format, the code will be:

					.find(object.datepickerClass)
						.wrap(wrapper)
						.find('input')
						.datepicker({
					    	showButtonPanel: true,
						dateFormat: 'dd-mm-yy'
					    }).end().end()

Save and close the file.

Date validation settings

In regula.js file find the code that looks like this:

// check date format
regula.custom({
    name:'Date',
    defaultMessage: "The text field can only contain data format MM/DD/YY!",
    validator:function(){
        return /^(?:(?:(?:0?[13578]|1[02])(\/|-|\.)31)\1|(?:(?:0?[13-9]|1[0-2])(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:0?2(\/|-|\.)29\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:(?:0?[1-9])|(?:1[0-2]))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(this.value)
    }
})

and change the return statement for your date format, according to the table below.

Save and close the file.

Now you can open the .html file with the booking form in your browser and test it by selecting or typing some dates.

Email settings

For the form to work, you also need to activate it by specifying the email address for sending emails and other settings, such as SMTP server, port, user name and password, if those are required by your email server. Please refer to the following tutorial on configuring these settings:

• JS Animated. How to activate contact form (starting from the template #50000+)

If the date format is right, upload the updated files to your server using an FTP program like FileZilla, or other tool like a file manager from the hosting provider.

Feel free to check the detailed video tutorial below: