使用Javascript预填充日期输入字段

时间:2013-01-09 19:54:16

标签: javascript html5 date input

我正在尝试将日期预填充到html“date”输入字段中,但它会忽略我尝试传递的值:

<html>
...
<input id='date' type='date'>
...
</html>

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...

我也尝试将日期对象作为字符串传递

var myDate = new Date().toDateString();
$("#date").val(myDate);

当我打开表单时,日期字段为空白。如果我删除了type =“date”标记,则该值显示为字符串,但之后我无法访问datepicker。如何预先填充日期输入并仍使用日期选择器?我很难过。

感谢。

6 个答案:

答案 0 :(得分:39)

必须以ISO格式设置。

(function () {
    var date = new Date().toISOString().substring(0, 10),
        field = document.querySelector('#date');
    field.value = date;
    console.log(field.value);

})()

http://jsfiddle.net/GZ46K/

答案 1 :(得分:5)

谢谢你j08691。这个链接就是答案。

对于像我这样苦苦挣扎的其他人,当他们说输入是“yyyy-mm-dd”时,意思就是它!

年度必须有4位数字。 你必须有一个破折号,没有空格。 你必须有2位数的日期和月份。

在我的示例中,myDate.getMonth for January仅返回“1”(实际上它返回“0”,因为由于某种原因,javascript从0-11开始计算月数)。为了做到这一点,我必须做以下事情:

var myDate, day, month, year, date;
myDate = new Date();
day = myDate.getDate();
if (day <10)
  day = "0" + day;
month = myDate.getMonth() + 1;
if (month < 10)
  month = "0" + month;
year = myDate.getYear();
date = year + "-" + month + "-" + day;
$("#date").val(date);

我希望这可以帮助别人不要浪费时间,就像我在十月之前或本月十日之前测试一样! LOL

答案 2 :(得分:3)

以下是基于Robin Drexlers但在当地时间的答案。

//Get the local date in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);

//Set the field value
var field = document.querySelector('#date');
field.value = datestr;

如果它是您正在修改的日期时间字段(而不仅仅是日期),请不要忘记添加时间T00:00,或者将子字符串更改为16个字符,例如:

//Get the local date and time in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

//Set the field value
var field = document.querySelector('#datetime');
field.value = datestr;

答案 3 :(得分:2)

以下代码填充本地日期。接受的答案填充了UTC日期。

  var date = new Date();
  field = document.querySelector('#date-id');
  var day = date.getDate();
  if(day<10){ day="0"+day;}

  var month = date.getMonth()+1;
  if(month<10){ month="0"+month;}

  field.value = date.getFullYear()+"-"+month+"-"+day;

答案 4 :(得分:0)

为什么不使用toISOString()

AppBar( elevation: 0, backgroundColor: Color(0xff05B068), centerTitle: true, leading: Icon(Icons.arrow_forward_ios), title: Text('SMARTID', style: TextStyle(fontFamily: 'Open Sans', fontWeight: FontWeight.bold)), ), 字段采用ISO8601格式(reference)的值,但是您不应使用Function COUNTConditionColorCells(CellsRange As Range, ColorRng As Range) Dim Bambo As Boolean Dim dbw As String Dim CFCELL As Range Dim CF1 As Single Dim CF2 As Double Dim CF3 As Long Bambo = False For CF1 = 1 To CellsRange.FormatConditions.Count If CellsRange.FormatConditions(CF1).Interior.ColorIndex = ColorRng.Interior.ColorIndex Then Bambo = True Exit For End If Next CF1 CF2 = 0 CF3 = 0 If Bambo = True Then For Each CFCELL In CellsRange dbw = CFCELL.FormatConditions(CF1).Formula1 dbw = Application.ConvertFormula(dbw, xlA1, xlR1C1) dbw = Application.ConvertFormula(dbw, xlR1C1, xlA1, , ActiveCell.Resize(CellsRange.Rows.Count, CellsRange.Columns.Count).Cells(CF3 + 1)) If Evaluate(dbw) = True Then CF2 = CF2 + 1 CF3 = CF3 + 1 Next CFCELL Else COUNTConditionColorCells = "NO-COLOR" Exit Function End If COUNTConditionColorCells = CF2 End Function 函数作为其值,因为在输出ISO8601字符串之前,它转换 /将日期/时间转换为UTC标准时间(阅读:更改时区)(reference)。除非您碰巧正在工作或想要该时间标准,否则您将引入一个错误,该错误中的日期有时(但并非总是)会改变。

从不带时区更改的日期对象中填充HTML5日期输入

获取<input type='date'>的正确输入值而又不弄乱我所看到的时区的唯一可靠方法是手动使用日期分量获取器:

Date.prototype.toISOString()
<input type='date'>

从不带时区更改的日期对象中填充HTML5日期和时间字段

这超出了原始问题的范围,但是对于想要从Date对象同时填充日期和时间HTML5输入字段的任何人,这是我想出的:

let d = new Date();
let datestring = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
document.getElementById('date').value = datestring;

/* Or if you want to use jQuery...
$('#date').val(datestring);
*/
<input id='date' type='date'>

答案 5 :(得分:0)

我没有信誉点可以评论其他答案,所以我只添加一个新答案。而且,由于我要添加答案,因此我将提供比评论中更多的细节。

有一种比每个人都在这里做的杂耍更简单的零填充方法。

var date = new Date();

var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day   = ('0' + date.getDate()).slice(-2);
var year  = date.getFullYear();

var htmlDate = year + '-' + month + '-' + day;

console.log("Date: " + htmlDate);

今天,输出将是

Date: 2020-01-07

代码通过在引号前面加上零,然后使用slice(-2)来获取最后2个字符,从而构建了动态字符串。这样,如果零将其设为01,则后两个为01。如果零将其设为011,则后两个为11。

对于从零傻开始的月份,您还可以在零之前添加动态添加1,然后一切仍然有效。您只需将数学运算转换为字符串即可。

作为旁注,我注意到当更新日期字段时,必须在设置值之前隐藏该字段,并在设置之后显示它。我做的次数不够多,因此每次需要处理时都要重新努力。希望这会对以后的人有所帮助。

向未来的人挥手

相关问题