【问题标题】:Set date input type default value to Today, Tomorrow, Anydate?将日期输入类型默认值设置为 Today、Tomorrow、Anydate?
【发布时间】:2014-02-16 21:04:55
【问题描述】:

在 HTML5 中,没有在 value 属性中指定“today”的本地方式。这是我非常喜欢的 jQuery 代码。如何将此代码扩展为设置

  • 今天的日期到var today
  • 明天的日期到var tomorrow
  • 计算到var anydate 的任何日期(从var today 计算/启动?)

并相应地定义以下 3 个 id-s:

  • #theDate
  • #theTomorrow
  • #theAnydate

HTML

<input type="date" id="theDate">

jQuery

$(document).ready(function() {
    var date = new Date();

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

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

demo

【问题讨论】:

标签: jquery html date input


【解决方案1】:

我找到了非常简单的解决方案:

echo (new DateTime('tomorrow'))->format('Y-m-d'); //-- For tomorrow
echo (new DateTime())->format('Y-m-d'); //-- For today

【讨论】:

    【解决方案2】:

    使用 toISOString(),它总是返回一个“Z”时区 ISO8601 字符串,并将其截断为日期。

    var todayUTC = new Date().toISOString().substr(0,10);
    
    var todayLocal = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60 * 1000).toISOString().substr(0,10);
    
    var tomorrowLocal = new Date(new Date().getTime() + 24 * 60 * 60 * 1000 - new Date().getTimezoneOffset() * 60 * 1000).toISOString().substr(0,10);
    

    【讨论】:

      【解决方案3】:

      与任何 HTML 输入字段一样,浏览器会将其留空,除非使用 value 属性指定默认值。

      不幸的是,HTML5 没有提供在value 属性(我可以看到)中指定“今天”的方法,只有RFC3339 有效日期,如2011-09-29

      来源:Tak's answer on "HTML5 Input Type Date — Default Value to Today?"

      在这种情况下,您可能会编写一个脚本来简单地+1 以查找明天的日期,但您首先必须为您的input id 添加一个默认值以表示今天日期

      至于 anydate?不完全确定你的意思。像日期选择器一样?

      这个问题有点不清楚,但我想我会尽可能地帮助提供所提供的信息。


      要通过 jQuery 分配日期,您总是可以这样做...

      http://jsfiddle.net/SinisterSystems/4XkVE/4/

      HTML:

      <input type="date" id="theDate">
      

      jQuery:

      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 = mm+'/'+dd+'/'+yyyy;
      
      $('#theDate').attr('value', today);
      
      alert($('#theDate').attr('value'));
      

      编辑:

      此外,要同时查找今天和明天的日期,但要确保月末或年末不会影响它,请改用:

      http://jsfiddle.net/SinisterSystems/4XkVE/6/

      HTML:

      <input type="date" id="theDate">
      <input type="date" id="tomorrowDate">
      

      jQuery

      var today = new Date();
      var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
      var dd = today.getDate();
      var mm = today.getMonth()+1; //January is 0!
      var yyyy = today.getFullYear();
      var tomday = tomorrow.getDate();
      var tommonth = tomorrow.getMonth() + 1;
      var tomyear = tomorrow.getFullYear();
      if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy;
      if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tommonth+'/'+tomday+'/'+tomyear;
      $('#theDate').attr('value', today);
      $('#tomorrowDate').attr('value', tomorrow);
      

      【讨论】:

      • 谢谢尼古拉斯。明确地:我需要 2 个 id-s 和:#theDate 具有今天的价值,#theTomorrow 具有明天的价值。请告诉我如何在最后同时提醒#theDate 和#theTomorrow。谢谢。
      • +1 遇到的一个问题是,如果是月底,则无法准确反映。我会更新一个解决方案。两秒。
      • 已更新。让我知道这是否可以解决您的问题,或者您是否可以从那里解决它。
      • 是的,问题是 +1 无法准确反映。事实上,我会在 wordpress contact7 表单上使用#theDate#tomorrowDate id-s 在用户开始填写表单之前预先加载2个日期字段。我共享的脚本最初只提供#theDate 无缝运行。但我仍然无法完成这项工作。 :(
      • 对不起。我不知道 wordpress (你没有标记它)。我发现CMS 系统不太可靠。我鼓励您提出一个新问题并标记 wordpress,因为这将针对具有该技能的人。随意将您的新问题链接到这个问题。我只知道我回答了所提出的问题。如果您想标记为已接受(投票箭头旁边的绿色复选框),我将不胜感激。
      【解决方案4】:

      基于Nicholas Hazel 的响应和user113716leading zeroes for dates 的回答,这里有一个简洁的函数来获取格式为YYYY-MM-DD 的日期并设置“日期”类型输入控件的值。

      http://jsfiddle.net/wloescher/2t8v7fnf/2/

      HTML

      <div>Today:
          <input type="date" id="theDate" />
      </div>
      <div>Tomorrow:
          <input type="date" id="theTomorrow" />
      </div>
      <div>Any Date:
          <input type="date" id="theAnyDate" />
      </div>
      

      JavaScript

      // Set values
      $("#theDate").val(getFormattedDate(today()));
      $("#theTomorrow").val(getFormattedDate(tomorrow()));
      $("#theAnyDate").val(getFormattedDate(new Date("4/1/12")));
      
      function today() {
          return new Date();
      }
      
      function tomorrow() {
          return today().getTime() + 24 * 60 * 60 * 1000;
      }
      
      // Get formatted date YYYY-MM-DD
      function getFormattedDate(date) {
          return date.getFullYear()
              + "-"
              + ("0" + (date.getMonth() + 1)).slice(-2)
              + "-"
              + ("0" + date.getDate()).slice(-2);
      }
      

      【讨论】:

      • 如果您在多天内打开页面,您的todaytomorrow 将不正确。将它们定义为函数可能会更好,因此代码改为 today()tomorrow()
      • 好点 Seph - 我已经修改了代码以包含使用新的 today() 和 tomorrow() 函数
      猜你喜欢
      • 2020-03-25
      • 2022-12-05
      • 2011-10-22
      • 2021-01-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多