From 17d0ab6df3f21be1daa6ef96e99d09d37113050b Mon Sep 17 00:00:00 2001 From: f Date: Thu, 11 Feb 2021 17:49:49 -0300 Subject: [PATCH] validar fechas en navegadores que no las soportan closes 168 --- app/javascript/packs/application.js | 9 +++++++++ app/views/posts/attributes/_date.haml | 3 ++- app/views/posts/attributes/_document_date.haml | 3 ++- config/locales/en.yml | 4 +++- config/locales/es.yml | 4 +++- 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 7295446d..4c232fd6 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -107,4 +107,13 @@ document.addEventListener('turbolinks:load', () => { // Ocultar el area textArea.style.display = 'none' }) + + // Validar fechas en navegadores que no soportan date + document.querySelectorAll('input[type="date"]').forEach(date => { + if (date.type === 'date') return + + date.addEventListener('change', event => { + date.setCustomValidity(date.validity.patternMismatch ? date.dataset.patternMismatch : '') + }) + }) }) diff --git a/app/views/posts/attributes/_date.haml b/app/views/posts/attributes/_date.haml index 38c4f500..1347c59c 100644 --- a/app/views/posts/attributes/_date.haml +++ b/app/views/posts/attributes/_date.haml @@ -1,6 +1,7 @@ .form-group = label_tag "#{base}_#{attribute}", post_label_t(attribute, post: post) = date_field base, attribute, value: metadata.value.to_date.strftime('%F'), - **field_options(attribute, metadata) + **field_options(attribute, metadata), pattern: '\d{4}-\d{2}-\d{2}', + data: { 'pattern-mismatch': t('metadata.date.invalid_format') } = render 'posts/attribute_feedback', post: post, attribute: attribute, metadata: metadata diff --git a/app/views/posts/attributes/_document_date.haml b/app/views/posts/attributes/_document_date.haml index 65516718..1be997cc 100644 --- a/app/views/posts/attributes/_document_date.haml +++ b/app/views/posts/attributes/_document_date.haml @@ -1,6 +1,7 @@ .form-group = label_tag "#{base}_#{attribute}", post_label_t(attribute, post: post) = date_field base, attribute, value: metadata.value.strftime('%F'), - **field_options(attribute, metadata) + **field_options(attribute, metadata), pattern: '\d{4}-\d{2}-\d{2}', + data: { 'pattern-mismatch': t('metadata.date.invalid_format') } = render 'posts/attribute_feedback', post: post, attribute: attribute, metadata: metadata diff --git a/config/locales/en.yml b/config/locales/en.yml index 9e8cc572..e25c4d2b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -50,6 +50,8 @@ en: missing_post: "Couldn't find the related post" has_many: missing_posts: "Couldn't find some related posts" + date: + invalid_format: "It seems that your browser doesn't support dates and the date is on the incorrect format, please use yyyy-mm-dd, ie. 2021-01-31" exceptions: post: site_missing: 'Needs an instance of Site' @@ -462,7 +464,7 @@ en: label: Language date: label: Date - help: Publication date for this post. If you use a date in the future the post won't be published until then. + help: Date for this post. If you use a date in the future the post won't be published until you publish changes on that day. required: label: ' (required)' feedback: 'This field cannot be empty!' diff --git a/config/locales/es.yml b/config/locales/es.yml index 0bf0368d..b3bc9e5e 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -50,6 +50,8 @@ es: missing_post: 'No se pudo encontrar el artículo relacionado' has_many: missing_posts: 'No se pudieron encontrar algunos artículos relacionados' + date: + invalid_format: 'Parece que tu navegador no soporta fechas y la fecha no está en el formato correcto, por favor usa aaaa-mm-dd, por ejemplo: 2021-01-31' exceptions: post: site_missing: 'Necesita una instancia de Site' @@ -471,7 +473,7 @@ es: label: Idioma date: label: Fecha - help: La fecha de publicación del artículo. Si colocas una fecha en el futuro no se publicará hasta ese día. + help: La fecha del artículo. Si colocas una fecha en el futuro no se publicará hasta que publiques cambios ese día. required: label: ' (requerido)' feedback: '¡Este campo no puede estar vacío!'