将日期输入字段的最大日期设置为今天

时间:2015-09-03 14:34:53

标签: html

我只有一行简单的代码:

not_mask = ~mask

有没有一种简单的方法可以将最大日期设置为“今天”而不是2000-01-01?或者我是否必须使用Javascript来执行此操作?

12 个答案:

答案 0 :(得分:40)

您需要使用Javascript来执行此操作:

<强> HTML

<input id="datefield" type='date' min='1899-01-01' max='2000-13-13'></input>

<强> JS

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
 if(dd<10){
        dd='0'+dd
    } 
    if(mm<10){
        mm='0'+mm
    } 

today = yyyy+'-'+mm+'-'+dd;
document.getElementById("datefield").setAttribute("max", today);

<强> JSFiddle demo

答案 1 :(得分:17)

代替Javascript,更短的基于PHP的解决方案可能是:

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

答案 2 :(得分:13)

JavaScript只是简单的解决方案

datePickerId.max = new Date().toISOString().split("T")[0];
<input type="date" id="datePickerId" />

答案 3 :(得分:7)

需要使用Javascript;例如:

$(function(){
    $('[type="date"]').prop('max', function(){
        return new Date().toJSON().split('T')[0];
    });
});

JSFiddle demo

答案 4 :(得分:4)

toISOString()将提供当前的UTC日期。因此,为了获得当前的当地时间,我们必须得到getTimezoneOffset()并从当前时间中减去它

document.getElementById('dt').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
<input type="date" min='1899-01-01' id="dt" />

答案 5 :(得分:3)

是的,不。 HTML 5中有min和max属性,但

  

在Internet Explorer 10+或Firefox中,max属性不适用于日期和时间,因为IE 10+和Firefox不支持这些输入类型。

因此,如果您对该属性的文档感到困惑,但它不起作用,那就是原因 有关版本,请参阅W3 page

我发现使用Javascript最简单,其他答案说,因为你可以使用预制模块。此外,许多Javascript日期选择器库具有最小/最大设置,并具有漂亮的日历外观。

答案 6 :(得分:2)

.split("T")[0] 的替代方法,无需在内存中创建字符串数组,使用 String.slice()

new Date().toISOString().slice(0, -14)

datePickerId.max = new Date().toISOString().slice(0, -14);
<input type="date" id="datePickerId" />

答案 7 :(得分:1)

我正在使用带有刀片模板的Laravel 7.x,并且使用:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "allowJs": true,
    "outDir": "./dist",
    "strict": true,
    "rootDirs": [],
    "types": ["node"],
    "esModuleInterop": true,
    "inlineSourceMap": true,
    "inlineSources": true,  
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

答案 8 :(得分:1)

您是否不想使用外部脚本,而是在 HTML 输入元素中正确设置 max 限制,内联如下:

<input type="date" max="3000-01-01" onfocus="this.max=new Date().toISOString().split('T')[0]" />

我特意将 max 属性添加到未来很远的日期,因为一旦设置了 max 属性,Chrome 浏览器似乎会更改字段的宽度,因此为了避免这种情况,我已经预设好了。

See live demo

答案 9 :(得分:0)

它可能有用: 如果你想用Symfony表格来做:

 $today = new DateTime('now');
 $formBuilder->add('startDate', DateType::class, array(
                   'widget' => 'single_text',
                   'data'   => new \DateTime(),
                   'attr'   => ['min' => $today->format('Y-m-d')]
                   ));

答案 10 :(得分:0)

先前答案之一的简短但可读性较低的版本。

   <script type="text/javascript">
    $(document).ready(DOM_Load);

    function DOM_Load (e) {
        $("#datefield").on("click", dateOfBirth_Click);
    }

    function dateOfBirth_Click(e) {
        let today = new Date();
        $("#datefield").prop("max", `${today.getUTCFullYear()}-${(today.getUTCMonth() + 1).toString().padStart(2, "0")}-${today.getUTCDate().toString().padStart(2, "0")}`);
    }

</script>

答案 11 :(得分:-1)

我也有同样的问题。我通过这种方式构建它。我使用struts 2框架。

  <script type="text/javascript">

  $(document).ready(function () {
  var year = (new Date).getFullYear();
  $( "#effectiveDateId" ).datepicker({dateFormat: "mm/dd/yy", maxDate: 
  0});

  });


  </script>

        <s:textfield name="effectiveDate" cssClass="input-large" 
   key="label.warrantRateMappingToPropertyTypeForm.effectiveDate" 
   id="effectiveDateId" required="true"/>

这对我有用。