Ограничение будущих дат в дате ввода HTML 5

Ответ 1

Вы можете использовать минимальные и максимальные атрибуты даты ввода HTML5

Код HTML5

<input type="date" name="bday" min="2014-05-11" max="2014-05-20">

ИЗМЕНИТЬ

Вам нужно использовать jQuery для его достижения

Код jQuery

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();

    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = year + '-' + month + '-' + day;    
    $('#txtDate').attr('max', maxDate);
});

Объяснение Максимальный атрибут даты ввода HTML5 занимает месяц и день в двузначном формате.

Пример: 5 (месяц) недействителен, в то время как действует 05 (месяц) Пример: 1 (День) недействителен, тогда как 01 (День) действителен

Итак, я добавил код ниже

if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

Проверьте мой обновленный скрипт

Обратитесь демонстрацию скрипта

Ответ 2

Чтобы построить ответ на @Chirag Vidani, дата может быть сгенерирована с меньшим количеством строк, например:

var now = new Date(),
    minDate = now.toISOString().substring(0,10);

$('#my-date-input').prop('min', minDate);

Ответ 3

Некоторые другие задали вопрос о настройке максимальной даты на текущую дату. Предлагаемые ответы включают использование JavaScript. Но мое решение заключалось в том, чтобы использовать серверный язык для генерации максимального параметра для ввода. Я знаю, что ОП не спрашивал о серверном подходе. Но это решение хорошо работает для меня с использованием С# Razor в качестве моего языка сервера.

На сервере я пишу:

@Html.TextBox("CurrentDate",
    Model.CurrentDate.ToString("yyyy-MM-dd"),
    new {
        @class = "form-control",
        @type = "date",
        max = DateTime.Now.ToString("yyyy-MM-dd")
    })

И затем MVC выводит этот Html:

<input class="form-control" id="CurrentDate" name="CurrentDate"
    type="date" max="2016-11-10" value="2016-11-10">

С другими языками сервера подход будет аналогичным образом генерировать максимальный параметр с использованием даты сервера, который может работать или не работать, если ваше требование заключается в использовании даты Клиента. Для моей ситуации дата сервера - это то, что необходимо, потому что там, где хранятся данные.

Ответ 4

Используйте атрибут max, который является ожидаемой верхней границей для значения элемента.

<input type="date" max="2014-05-15"/>

Ссылка: http://www.w3.org/TR/html-markup/input.date.html

Ответ 5

Я обновил рабочий скрипт

http://jsfiddle.net/9WVY8/16/

HTML и js:

     var dateControler = {
                currentDate : null
            }

             $(document).on( "change", "#txtDate",function( event, ui ) {
                    var now = new Date();
                    var selectedDate = new Date($(this).val());

                    if(selectedDate > now) {
                        $(this).val(dateControler.currentDate)
                    } else {
                        dateControler.currentDate = $(this).val();
                    }
                });   

Ответ 6

Старый вопрос Но решение может помочь кому-то, использующему JQuery:

    $(document).ready(function () {
        var today = new Date();
        var day=today.getDate()>9?today.getDate():"0"+today.getDate(); // format should be "DD" not "D" e.g 09
        var month=(today.getMonth()+1)>9?(today.getMonth()+1):"0"+(today.getMonth()+1);
        var year=today.getFullYear();

        $("#dpFromDate").attr('max', year + "-" + month + "-" + day);
});

Формат даты должен быть ГГГГ-ММ-ДД.

Ответ 7

Вот PHP-решение, которое получает сегодняшнюю дату и устанавливает ее как максимальное.

<input type="date" name="bday" max="<?php echo date("Y-m-d"); ?>">

Это поместит его в правильный двузначный формат для дня и месяца. https://www.php.net/manual/en/function.date.php

Ответ 8

    <input type="date" value="<?php echo date("Y-m-d"); ?>" max="<?php echo date("Y-m-d"); ?>">

Это сработало для меня.