Сделать формат ввода текста автоматически как дату с "/"

avatar
Pedro Henrique
1 июля 2021 в 16:09
48
1
2

Я заполняю форму "подписаться на мою рассылку" и использую веб-сайт одежды в качестве ссылки https://www.emibeachwear.com.br/ (Вы найдете форму на нижний колонтитул веб-сайта)

В нижнем колонтитуле есть ввод, который называется "data de aniversário" или "дата рождения", если перевести на английский. Используя элемент проверки хрома, я увидел, что это ввод Text. Несмотря на то, что это текст, форматируется как дата.

Как мне это сделать? Должен ли я использовать javascript? Если да, то как?

Вот что у меня есть сейчас:

<div class="newsletter" style="background:transparent; color:white;">
      <label class="email"> E-MAIL
          <input  class="caixa" type="email" name="EMAIL" placeholder="E-MAIL" style="border:0;"required />
      </label >
      <label class="aniversario"> DATA DE ANIVERSÁRIO
          <input class="caixa" type="date" placeholder="DATA DE ANIVERSÁRIO" style="border:0;" max-length="10" required />
      </label>
      <input class="cadastrar caixa" type="submit" value="CADASTRAR" style="border:0;"/>
</div>
Источник
julien.giband
1 июля 2021 в 16:21
0

Очень умный ответ от @Spectric, но все же я не могу понять, почему вы не используете <input type="date" />

Pedro Henrique
1 июля 2021 в 17:17
0

Я редактирую тему Wordpress. И когда я использую Type="date", он загружает заполнитель, который я не хочу использовать. Кроме того, я делаю это для клиентки, она очень требовательна к визуальному оформлению своего сайта. Итак, я хочу сделать так, как она это себе представляла. Поскольку ей нужен нижний колонтитул, такой же, как на веб-сайте, я столкнулся с этой проблемой.

Ответы (1)

avatar
Spectric
1 июля 2021 в 16:19
0

Вот так:

const input = document.querySelector('input');
input.addEventListener("input", function() {
  input.value = input.value.replace(/\D/g, "");
  var s = input.value.replaceAll("/", "").match(/.{1,2}/g);
  if (s != null) {
    var len = s.length;
    input.value = s.join("/");
    if (len > 3) {
      var l = input.value.lastIndexOf('/');
      input.value = input.value.substring(0, l) + input.value.substring(l + 1);
    }
  }
})
<input type="text" maxlength="10">
Pedro Henrique
1 июля 2021 в 18:33
0

Это было потрясающе, чувак! Большое спасибо! Оно работало завораживающе. Несмотря на то, что он тоже принимает письма, я определенно собираюсь его использовать!

Spectric
1 июля 2021 в 18:34
0

@PedroHenrique Рад помочь :) Вы хотите, чтобы я отредактировал его, чтобы принимать только числа? я могу это сделать

Spectric
2 июля 2021 в 19:53
1

@PedroHenrique Готово :).

Pedro Henrique
2 июля 2021 в 20:21
0

Ты восхитителен! Большое спасибо!