如何将（格式良好的）字符串变量分配给 <input type="date" /> 值 [重复]答案

【问题标题】：How to assign a (well formatted) string variable to an <input type="date" /> value [duplicate]如何将（格式良好的）字符串变量分配给 <input type="date" /> 值 [重复]
【发布时间】：2019-07-24 12:00:26
【问题描述】：

我正在尝试将表示日期的格式良好的字符串变量 (yyyy-mm-dd) 分配给 <input type="date" /> 的值。当值是字符串文字时，它可以工作，但是当它来自变量或常量时，它就不起作用。您可以检查以下 html 代码和呈现的 html 页面。

<form>
  <p>Litteral Assignement: <input name="literalDate" type="date" /></p>
  <p>Variable Assignement: <input name="variableDate" type="date" /></p>
</form>
<script>
  var literalDateControl = document.querySelector('input[name="literalDate"]');
  literalDateControl.value = "2019-07-24";
  var today = new Date();
  const todayValue = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
  var variableDateControl = document.querySelector('input[name="variableDate"]');
  variableDateControl.value = todayValue;
</script>

关于如何解决这个问题有什么想法或建议吗？

【问题讨论】：

格式为 yyyy-mm-dd。您的 (today.getMonth() + 1) 将导致 7 ，您需要添加 07 。
请注意，<input> 标签不使用也不需要结束斜杠，并且在 HTML 中从来没有。

标签： javascript html date input

【解决方案1】：

你想用当前日期设置日期吗？

@o-o 在JS - Get YYYYMMDD date 有一个有趣的答案，方法是修改日期原型以便能够在您的日期上使用 .yyyymmdd(); 来获取字符串 YYYY-MM-DD

    Date.prototype.yyyymmdd = function() {
  var mm = this.getMonth() + 1; // getMonth() is zero-based
  var dd = this.getDate();

  return [this.getFullYear(),
          (mm>9 ? '' : '0') + mm,
          (dd>9 ? '' : '0') + dd
         ].join('-');
    };
    var literalDateControl = document.querySelector('input[name="literalDate"]');
    var today = new Date();
    literalDateControl.value = today.yyyymmdd();

    const todayValue = today.getFullYear()+'-'+(today.getMonth()+1) +'-'+ today.getDate();
    var variableDateControl = document.querySelector('input[name="variableDate"]');
    variableDateControl.value = today.toString();

【讨论】：

谢谢这个其实更优雅。

【解决方案2】：

问题是您的月份不是两位数。有很多方法可以将单个数字填充为 0，但它可能看起来像这样：

const getMonth = date => `${date.getMonth() + 1 < 10 ? '0' : ''}${date.getMonth() + 1}`;

const today = new Date();
const todayTest = today.getFullYear() + '-' + getMonth(today) + '-' + today.getDate();

const fixedTest = "2019-07-24";

document.querySelector('.a').value = todayTest;
document.querySelector('.b').value = fixedTest;

console.log(todayTest)
console.log(fixedTest)

<input class="a" type="date" />
<input class="b" type="date" />

【讨论】：

【解决方案3】：

**Month is not in correct format.**
<!DOCTYPE > 
<html>
<head><title>input date</title></head>
<body>
  <form>
    <p>Litteral Assignement: <input name="literalDate" type="date" /></p>
    <p>Variable Assignement: <input name="variableDate" type="date" /></p>
  </form>
  <script>
    var literalDateControl = document.querySelector('input[name="literalDate"]');
    literalDateControl.value = "2019-07-24";

    function formatDateToString(date){
   // 01, 02, 03, ... 29, 30, 31
   var dd = (date.getDate() < 10 ? '0' : '') + date.getDate();
   // 01, 02, 03, ... 10, 11, 12
   var MM = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
   // 1970, 1971, ... 2015, 2016, ...
   var yyyy = date.getFullYear();

   // create the format you want
   return (yyyy + "-" + MM + "-" + dd);
}
    var today = new Date();

    var variableDateControl = document.querySelector('input[name="variableDate"]');
    variableDateControl.value = formatDateToString(today);
  </script>
</body>
</html>

【讨论】：

@Alessio - 感谢您的评论，下次我会添加适当的解释。

【解决方案4】：

todayValue 的月份后面没有前导零，因此实际上只有 yyyy-m-dd。 todayValue 是 2019-7-24 并且日期输入需要 2019-07-24。您可以通过手动插入零来验证这一点：

const todayValue = today.getFullYear()+'-'+'0'+(today.getMonth()+1) +'-'+ today.getDate();

This answer 对此有一个很好的解决方案，我会稍微适应这个答案：

todayValue = today.getFullYear() + '-'
             + ('0' + (today.getMonth()+1)).slice(-2) + '-'
             + ('0' + today.getDate()).slice(-2)

该答案的解释：

为了解释，.slice(-2) 给了我们字符串的最后两个字符。

所以无论如何，我们可以添加"0" [at开头] 日期或月份[字符串]，然后只要求最后两个[字符]，因为它们总是我们想要的两个。

值得注意的是，由于今天是 24 日，您只在日期的月份部分遇到了这个问题，但就目前而言，同样的问题将在下个月初出现，就像 today.getDate() 一样返回未填充的数字。因此，请确保当您解决当月的问题时，您会在同一天解决问题。

【讨论】：