Как проверить, является ли тип поля датой в jQuery

Question

Я пытаюсь проверить типы полей, и я могу сделать это для каждого типа поля, кроме даты.

Jsfiddle: https://jsfiddle.net/mh4rwy78/

html:

<div class="field">
  <input type="date">
</div>
<div class="field">
  <input type="text">
</div>
<a class="check" href="#">check</a>

Js:

$( '.check').on('click', function(e) {
      e.preventDefault();
      $( '.field input' ).each(function(index, value) {
        if( $(this).is(':date') ) {
          alert('date-found');
        }
      });
    });

Если я изменю его на следующее, он будет работать:

$( '.check').on('click', function(e) {
  e.preventDefault();
  $( '.field input' ).each(function(index, value) {
    if( $(this).is(':text') ) {
      alert('date-found');
    }
  });
});

Я пробовал: дата и только дата, поиск в Google не придумал ответа (пока).

Любая помощь приветствуется

Answer 1

Используйте селектор [type="date"]

$( '.check').on('click', function(e) {
 e.preventDefault();
 $( '.field input' ).each(function(index, value) {
  if( $(this).is('[type="date"]') ) {
    alert('date-found');
  }
 });
});

Answer 2

Так как :date по-прежнему недоступен внутри jQuery селекторов Расширения , вы всегда можете использовать старую добрую ваниль this.type === "date". Это быстрее, чем возвращаться к $(this).is(, поскольку вы напрямую получаете доступ к свойствам элемента.

$('.check').on('click', function(e) {
  e.preventDefault();
  $('.field input').each(function() {
    if (this.type === "date") {
      console.log('date-found ' + this.value);
    }
  });
});

<div class="field">
  <input type="date">
</div>
<div class="field">
  <input type="text">
</div>
<a class="check" href="#">check</a>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Сделайте свой jQuery Селектор:

jQuery.extend(jQuery.expr[':'], {
  date(el) { return el.type === "date"; }
});

$('.check').on('click', function(e) {
  e.preventDefault();
  $('.field input').each(function() {
    if ($(this).is(":date")) {
      console.log('date-found ' + this.value);
    }
  });
});

<div class="field">
  <input type="date">
</div>
<div class="field">
  <input type="text">
</div>
<a class="check" href="#">check</a>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>