не отобржается в нужном формате шаблон даты в Chrome
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8"/> <link rel="stylesheet" href="resources/css/bootstrap.min.css"> <link rel="stylesheet" href="resources/css/style.css"> <script src="resources/js/jquery/jquery-3.3.1.js"></script> <script src="resources/js/jquery/jquery.validate.js"></script> <script src="resources/registration/js/bootstrap.min.js"></script> <script src="resources/registration/script/auth.js"></script> <script src="resources/registration/js/additional-methods.min.js"></script> <script src="resources/js/jquery/get-locale-browser-plugin.js"></script> <script src="resources/registration/script/script.js"></script> </head> <body> <div class="success"><h2><a href="#">Аутентификация</a></h2></div> <div class="errMessage"></div> <div class="container"> <div class="row justify-content-center"> <div class="col-4"> <h2>Валидация формы</h2> <hr> <form class="form myForm" id="myForm"> <div class="messageForCommonError js-form-message"></div> <div class="form-group"> <label for="inputEmail">Введите email:</label> <input type="email" class="form-control email" name="email" id="inputEmail" placeholder="Введите email"> ..... <div class="form-group dateInput"> <label for="inputDate">Введите дату:</label> <input type="date" class="form-control" name="date" id="inputDate" placeholder="Введите дату"> </div> ... <button type="button" class="btn btn-primary">Отправить</button> </form> </div> </div> </div> $(document).ready(function () { var lang = $('body').getLocaleOfBrowserPlugin(); /*it is the selector for first field of enter password*/ var selectorPasswordFirst = "classPassword"; /*defines array of messages about mistake according to locale browser*/ var messageInfo = createArrMessages(lang); validateForm(messageInfo, selectorPasswordFirst); }); /*create an array of messages about mistake according to locale browser */ function createArrMessages(langLocaleBrowser) { var messagesRu; var messagesEn; messagesRu = { date: "Пожалуйста, введите корректную дату.", mainMessageOfErr: "Исправьте пожайлуста все ошибки !" }; messagesEn = { date: "Please enter a valid date.", mainMessageOfErr: "Please, correct all mistakes !" }; if (langLocaleBrowser === 'ru') { return messagesRu; } else { return messagesEn; } } /* 5404 3600 8922 0783 */ function validateForm(messageInfo, selectorPasswordFirst) { var selectorFormValidate = ".myForm"; var selectorForMainMessageErr = ".js-form-message"; /* this custom function to check enter letters only*/ $.validator.addMethod("lettersonlyRusEng", function (value, element) { return this.optional(element) || /^[а-яА-ЯёЁa-zA-Z]+$/.test(value); }, "Please don't insert numbers."); $(selectorFormValidate).validate({ rules: { email: { required: true, email: true, minlength: 7, maxlength: 15 }, name: { required: true, minlength: 3, maxlength: 10, lettersonlyRusEng: true }, lastname: { required: true, minlength: 3, maxlength: 10, lettersonlyRusEng: true }, login: { required: true, minlength: 3, maxlength: 10 }, password: { required: true, minlength: 2, maxlength: 8 }, passwordRepeat: { required: true, minlength: 2, maxlength: 8, equalTo: '.' + selectorPasswordFirst }, date: { date: true, required: true }, telephone: { required: true, digits: true }, creditCardName: { required: true, creditcard: true } }, focusCleanup: true, focusInvalid: false, /* this option output main message about mistakes*/ invalidHandler: function () { $(selectorForMainMessageErr).text(messageInfo.mainMessageOfErr) }, /* this option is clearing from main message of mistakes*/ onkeyup: function () { $(selectorForMainMessageErr).text("") }, /* This is configuring custom messages about mistakes. This option work if did not connect of localization package*/ messages: { email: { required: messageInfo.required, email: messageInfo.email, maxlength: messageInfo.maxlength, minlength: messageInfo.minlength }, name: { required: messageInfo.required, maxlength: messageInfo.maxlength, minlength: messageInfo.minlength, lettersonlyRusEng: messageInfo.lettersonlyRusEng }, lastname: { required: messageInfo.required, maxlength: messageInfo.maxlength, minlength: messageInfo.minlength, lettersonlyRusEng: messageInfo.lettersonlyRusEng }, password: { required: messageInfo.required, maxlength: messageInfo.maxlength, minlength: messageInfo.minlength }, passwordRepeat: { required: messageInfo.required, maxlength: messageInfo.maxlength, minlength: messageInfo.minlength, equalTo: messageInfo.equalTo }, date: { required: messageInfo.required, date: messageInfo.date }, telephone: { required: messageInfo.required, digits: messageInfo.digits }, creditcardName: { required: messageInfo.required, creditcard: messageInfo.creditcard } } }); } css /*стилизация поля ввода, при ошибке*/ .error { border-color: #ef079b; box-shadow: 0 0 3px #ff0000; } /*стилизация сообщения об ошибке*/ /*внешний контейнер для поля ввода*/ .form-group { width: 30%; /* Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице. */ position: relative; } label.error{ width: 100%; display: block; /*Элемент генерирует структурный блок, как и тег <div>.*/ padding-left: 25px; margin-left: 25px; color: #f9066b; margin-top: 0.5%; font-style:italic; font-weight:300; padding: 0.3% 0.3% 0.3% 0.3%; font-size: 12px; border-radius: 4px; /*загругление углов контейнера для ошибок*/ box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/ /* Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера).*/ position: absolute; top: 40%; left: 100%; z-index: 1; } /*контейнер для общих ошибок*/ .messageForCommonError { padding: 10px; margin-bottom: 20px; font-weight: bold; background-color: #caf4fe; color: #ff0000; text-align: center; font-size: 15px; font-style: italic; } /* используем псевдокласс 'empty', если в контейнере пока нет никаких данных (то есть данные еще не сгенерированы)*/ .messageForCommonError:empty{ display: none; /*Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.*/ } .valid{ box-shadow: 0 0 3px #37e309; /*тень вокруг контейнера для првоеренных данных*/ } -label.error{ color: #f9066b; margin-top: 0.5%; font-style:italic; font-weight:300; padding: 0.3% 0.3% 0.3% 0.3%; font-size: 12px; border-radius: 4px; /*загругление углов контейнера для ошибок*/ box-shadow: 0 0 3px #1023a2; /*тень вокруг контейнера для ошибок*/ } С случае с Chrome, выбранная дата поступает на сервер в формате dd/MM/yyyy , а нужно dd-MM-yyyy как это исправить ? <input type="date" .... Здесь нельзя менять тип , иначе не будет работать jquery-validate для данного поля.... |
Цитата:
Следовательно проблемы не в браузере как таковом, а в плагине, видимо это get-locale-browser-plugin.js, который косячит под этим браузером. |
Цитата:
function ($) { $.fn.getLocaleOfBrowserPlugin = function (prop) { /*the locale of the browser*/ var langLocaleBrowser = ''; this.fadeIn('normal', function () { /*getting information about the locale of the browser*/ getLang(); }); /* The method describes receive data of browser locale * window.navigator.browserLanguage - using for IE * */ function getLang() { var lang = window.navigator.languages ? window.navigator.languages [0] : null; lang = lang || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage; if (lang.indexOf('-') !== -1) { lang = lang.split('-')[0]; } if (lang.indexOf('_') !== -1) { lang = lang.split('_')[0]; } langLocaleBrowser = lang; console.log('current locale : ' + langLocaleBrowser); } return langLocaleBrowser; } }) (jQuery); я его написал, чтобы удобно можно было узнавать локаль по умолчанию и это нужно для автоматической локализации веб-части приложения. в firefox формат отображается как dd-MM-yyyy и в таком виде поступает на сервер |
мне пришлось на сервере проверять разделитель и в соответствии с этим форматировать дату из строки в тип Date, чтобы можно было работать с СУБД.
Но это не очень правильно, думал кто знает как это исправить на уровне браузера. Ведь календарь встроен в bootstrap, а значит им можно как то управлять. |
Цитата:
В европейских странах (и не только) дату пишут так: dd.mm.yyyy или dd/mm/yyyy или dd-mm-yyyy, в Венгрии yyyy. mm. dd В США mm-dd-yyyy или mm/dd/yyyy или mm.dd.yyyy или dd Mmm yyyy или dd mm yy. И где вы видели у себя yyyy-mm-dd? (Вы же из РФ? У вас прямо так все дату пишут?) yyyy-mm-dd является компьютерным форматом из RFC3339 для обмена дат, и в <input type="date"> он используется именно по этой причине!
Спецификация HTML5 не включает какие-либо средства переопределения или ручного указания любого из этих формата. Цитата:
|
Цитата:
type=date , тогда jquery-validate работает как только меняю на type= text, могу использовать datepicker от jquery, но валидация для данного поля отключается. |
Часовой пояс GMT +3, время: 18:49. |