validar fechas en navegadores que no las soportan

closes 168

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 : '')
+    })
+  })
 })

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

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

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!'

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!'