JS Animated. Как изменить формат даты в форме бронирования

Из этого туториала Вы узнаете, как изменить формат даты в форме бронирования в JS-анимированном шаблоне.

Вы узнаете, как использовать следующие форматы даты:

• Американский: 12/31/2014
• Европейский: 31/12/2014
• ISO: 2014/12/31

Давайте начнём!

Значения в форме по умолчанию

Найдите файл .html с формой в папке "site" и откройте его в Notepad++, или другом редакторе.

Измените формат дат, который отображается в полях формы по умолчанию.

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

Например, если Вы хотите использовать американский формат даты, вышеприведенный код нужно заменить на:

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

Формат ввода

Перейдите в папку "booking" и затем в папку "js" в ней.

Измените следующий код в файле booking.js, добавив опцию dateFormat в объект .datepicker для нужного формата даты в соответствии с таблицей:

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

Например, для европейского формата даты, код будет выглядеть следующим образом:

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

Сохраните изменения и закройте файл.

Настройки валидации даты

В файле regula.js найдите код, который выглядит следующим образом:

// проверка формата даты (check date format)
regula.custom({
    name:'Дата (Date)',
    defaultMessage: "Текстовое поле может содержать только формат даты MM/DD/YY! (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)
    }
})

и измените приемлемые значения для вашего формата даты, в соответствии с таблицей:.

Сохраните изменения и закройте файл.

Теперь Вы можете открыть файл .html с вашей формой бронирования в браузере и протестировать работу формы, выбирая либо вводя различные даты.

Настройки электронной почты

Для того, чтобы форма работала корректно, Вам необходимо активировать её, указав адрес электронной почты, на который будут отсылаться электронные письма, а также настроить прочие опции, такие как сервер SMTP, порт, имя пользователя и пароль, если такие необходимы для работы с вашим ящиком электронной почты. Пожалуйста, ознакомьтесь со следующим туториалом для изменения данных настроек:

• JS Animated. Как активировать контактную форму (начиная с шаблона #50000+)

Если формат даты правильный, загрузите обновлённые файлы на сервер используя FTP-клиент, например FileZilla, или другой инструмент, такой как файловый менеджер вашей панели управления хостингом.

Вы можете также ознакомиться с детальной видео-инструкцией: