Проверка input на дату

209
12 мая 2019, 19:20

Пытаюсь сделать проверку двух полей, в первом поле дата не должна быть меньше 01.1960 а во втором поле не больше чем текущая дата, и если даты не правильные то нужна какая-то подсказка возле поля, а не как я пытаюсь сделать в alert помогите пожалуйста как это можно реализовать? Я понимаю что я сравниваю со строкой, но вот как туда именно дату указать, я не знаю.

Код:

  function validate_form( ) 
                    { 
                        valid = true; 
 
                        if (document.formValid.inputDateFirst.value < "01.01.1960") 
                        { 
                            alert("Дата не меньше чем 01.1960"); 
                            valid = false; 
                        } 
 
                        return valid; 
                    }
  <div class="container-fluid" style="position: relative"> 
            <h4>Оберіть діапазон дат</h4> 
            <form name ="formValid" class="form-inline" action="Xls" onsubmit="return validate_form( );"> 
                <div class="form-group"> 
                    <label>Початкова дата</label> 
                    <input type="text" name="inputDateFirst"  class="inputDate form-control" id="inputDateFirst"> 
                </div> 
                 
                <div class="form-group"> 
                    <label>Кінцева дата</label> 
                    <input type="text" name="inputDateSecond"  class="inputDate form-control" id="inputDateSecond" > 
                </div> 
                <button  class="btnCollor btn  btn-md btn-success"  
                        data-toggle="tooltip" data-placement="bottom" title="xls"> 
                   Жми</button> 
            </form> 
        </div>

Answer 1

Думаю изначально вы некорректно задали свой вопрос, если вы используете datapicker нет необходимости самому проверять какую дату выбрал пользователь, это может сделать сам datapicker. Вот примерный код работы двух инпутов для выбора промежутка даты:

 function getCalendar(input1, input2) {
    var dateToday = new Date();

    $('#' + input1).datepicker({
        showOn: "button",
        autoSize: true,
        showAnim: "slide",
        dateFormat: "mm.dd.yy",
        buttonImage: "/icon.png",
        buttonImageOnly: true,
        changeMonth: true,
        minDate: new Date(01, 01, 1960),
        onSelect: function (selectedDate) {
            $('#' + input2).datepicker("option", "minDate", selectedDate);
        }
    });

    $('#' + input2).datepicker({
        showOn: "button",
        autoSize: true,
        showAnim: "slide",
        dateFormat: "mm.dd.yy",
        buttonImage: "/icon.png",
        buttonImageOnly: true,
        changeMonth: true,
        maxDate: dateToday,
        onSelect: function (selectedDate) {
            $('#' + input1).datepicker("option", "maxDate", selectedDate);
        }
    });

 }

Вызываете функкцию, передаёте ID ваших инпутов, и всё. Можно просто использовать параметр minDate и установить нужную дату. В моём примере так же происходит проверка как первого инпута, так и второго(в зависемости друг от друга)

Answer 2

Если не пугает HTML5 + проверка JS

<form> 
    <input type="date" name="myDate" min="1960-01-01"> 
    <input type="date" name="myDate" max="2018-11-27"> 
    <br/><input type=submit> 
</form>

READ ALSO
Изменение стилей элементов массива JQuery

Изменение стилей элементов массива JQuery

Изначально у всех элементов с классом "Place" цвет черный, кроме первого (у первого красный)

231
Добавить элемент рядом

Добавить элемент рядом

Допустим есть где-то блок с классом "asd" и рядом с ним нужно добавить DOM, что-то наподобиеappend\

195
Подсвечивание текущего дня недели?

Подсвечивание текущего дня недели?

Вывожу графике работы на сайтеНо как получить текущий день недели и применить к списку свой класс, чтоб он подсвечивался

202
Как вывести div с id классом?

Как вывести div с id классом?

скрипт который выводит <span style="color:#0FB10F">Сохранено</span> после удачной операции, как вывести его именно в <div id="block"> я предпологаю что...

168