如何设置输入类型日期's的默认值为今天?

给定一个输入元素:

<input type="date" />

有没有办法将日期字段的默认值设置为今天的日期?

1238361 次浏览
小开

与任何HTML输入字段一样，浏览器将date元素保留为空，除非在value属性中指定了默认值。不幸的是，HTML5没有提供在HTMLInputElement.prototype.value. #中指定'today'的方法。

相反，必须显式提供一个RFC3339格式的日期(YYYY-MM-DD)。例如:

element.value = "2011-09-29"
小开

你可以通过JavaScript填充默认值，如下所示:

http://jsfiddle.net/7LXPq/

$(document).ready( function() {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;
var today = now.getFullYear() + '-' + month + '-' + day;
$('#datePicker').val(today);
});

我可能会多花点时间看看月份和日期是否是个位数，并在它们前面加上额外的零……但这应该能给你一个概念。

为额外的零添加检查。

小开

由于没有将值设置为今天日期的默认方法，所以我认为这应该取决于它的应用程序。如果您希望最大限度地让受众了解日期选择器，那么可以使用服务器端脚本(PHP、ASP等)设置默认值。

但是，如果它是用于CMS的管理控制台，并且您知道用户将始终在站点上使用JS或您的站点受信任，那么您可以安全地使用JS填充默认值，根据jlbruno。

小开

这依赖于PHP:

<input type="date" value="<?php echo date('Y-m-d'); ?>" />
小开

JavaScript Date对象为所需的格式提供了足够的内置支持，以避免手动执行:

添加这个以获得正确的时区支持:

Date.prototype.toDateInputValue = (function() {
var local = new Date(this);
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
return local.toJSON().slice(0,10);
});

jQuery:

$(document).ready( function() {
$('#datePicker').val(new Date().toDateInputValue());
});​

纯粹的JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();
小开

非常简单，只需使用服务器端语言，如PHP,ASP,JAVA，甚至你可以使用javascript。

这是解决方案

<?php
$timezone = "Asia/Colombo";
date_default_timezone_set($timezone);
$today = date("Y-m-d");
?>
<html>
<body>
<input type="date" value="<?php echo $today; ?>">
</body>
</html>
小开

对于那些使用ASP VBScript的人

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
strDay = "0" & strDay
End If
If strMonth < 10 Then
strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

然后在body中，元素应该是这样的

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

干杯!

小开

超文本标记语言

<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 +"T00:00";
$("#theDate").attr("value", today);
});

demo

如果你不想使用jQuery，你可以这样做

JS

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;
document.getElementById("theDate").value = today;

demo

TS

const date = new Date()
const year = date.getFullYear()


let month: number | string = date.getMonth() + 1
let day: number | string = date.getDate()


if (month < 10) month = '0' + month
if (day < 10) day = '0' + day


const today = `${year}-${month}-${day}`
document.getElementById("theDate").value = today;
小开

使用# EYZ1:

document.getElementById('datePicker').valueAsDate = new Date();
小开

在HTML5中，没有办法将日期字段的默认值设置为今天的日期?如其他答案所示，可以使用JavaScript设置该值，如果希望根据页面加载时用户的当前日期设置默认值，这通常是最佳方法。

HTML5为input type=date元素定义了valueAsDate属性，使用它，你可以直接从new Date()创建的对象中设置初始值。然而，IE 10不知道这个属性。(它也缺乏对input type=date的真正支持，但这是另一个问题。)

因此，在实践中，您需要设置value属性，并且必须使用ISO 8601符号法。现在这可以很容易做到，因为我们可以期望当前使用的浏览器支持toISOString方法:

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>
小开

谢谢你，彼得，现在我改代码了。

<input type='date' id='d1' name='d1'>


<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>
小开

这里有一个简单的方法来做到这一点与javascript。

    var date = new Date();
var datestring = ('0000' + date.getFullYear()).slice(-4) + '-' + ('00' + (date.getMonth() + 1)).slice(-2) + '-' + ('00' + date.getDate()).slice(-2) + 'T'+  ('00' +  date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z';
document.getElementById('MyDateTimeInputElement').value = datestring;
小开

我也有同样的问题，我用简单的JS解决了它。输入:

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS的

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

重点:JS脚本应该在最后一行代码，或者在输入之后，因为如果你把这个代码放在前面，脚本就找不到你的输入。

小开

在HTML本身中没有将今天的日期插入到输入字段的默认方法。然而，像任何其他输入字段一样，它将接受一个值。

您可以使用PHP获取今天的日期，并将其输入到表单元素的值字段中。

<?php
// Fetch the year, month and day
$year = date(Y);
$month = date(m);
$day = date(d);


// Merge them into a string accepted by the input field
$date_string = "$year-$month-$day";


// Send to the browser the input field with the value set with the date string
echo "<input type='date' value='$date_string' />";
?>

value字段接受YYYY-MM-DD格式作为输入，因此只需创建一个与输入值接受的格式相同的变量$date_string，并用从今天的日期和voilá获取的年、月和日填充它!你有一个预先选择的日期!

希望这对你有所帮助。

编辑:

如果希望输入字段嵌套在HTML而不是PHP中，可以执行以下操作。

<?php
// Fetch the year, month and day
$year = date(Y);
$month = date(m);
$day = date(d);


// Merge them into a string accepted by the input field
$date_string = "$year-$month-$day";
?>
<html>
<head>...</head>
<body>
<form>
<input type="date" value="<?php print($date_string); ?>" />
</form>
</body>
</html>

我意识到这个问题是在很久以前(2年前)被问过的，但我仍然花了一段时间在互联网上找到一个明确的答案，所以这篇文章适用于任何正在寻找答案的人，希望它能极大地帮助每个人:)

另一个编辑:

几乎忘记了，过去对我来说非常痛苦的事情是总是忘记设置默认时区，无论何时在PHP中使用date()函数编写脚本。

语法是date_default_timezone_set(...);。文档可以找到这里是PHP.net和可以在这里找到要插入到函数中的支持时区的列表。这总是很烦人，因为我在澳大利亚，如果我没有正确设置，一切总是向后推10个小时，因为它默认为UTC+0000，我需要UTC+1000，所以要小心:)

小开

如果你需要填写输入日期时间，你可以使用这个:

<input type="datetime-local" name="datetime"
value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />
小开

这就是我在我的代码中所做的，我刚刚测试过，它工作得很好，输入类型="date"不支持自动设置curdate，所以我用来克服这个限制的方法是使用PHP代码一个简单的代码，像这样。

<html>
<head></head>
<body>
<form ...>
<?php
echo "<label for='submission_date'>Data de submissão</label>";
echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
?>
</form>
</body>
</html>

希望能有所帮助!

小开

如果你在浏览器中做任何与日期和时间相关的事情，你想要使用Moment.js:

moment().format('YYYY-MM-DD');

moment()返回表示当前日期和时间的对象。然后调用它的.format()方法以根据指定的格式获得字符串表示形式。在本例中，是YYYY-MM-DD。

完整的例子:

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>
小开

使用moment.js在2行中解决这个问题， html5日期输入类型只接受“YYYY-MM-DD”这种格式。我用这种方法解决我的问题。

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

这是解决这个问题最简单的方法。

小开

如果使用PHP，请遵循标准的Y-m-d格式

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

Javascript:

var today = new Date();


document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
小开 
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
小开

如果你正在使用ruby，你可以使用这个来设置默认值为今天的日期和时间:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />
小开

对于NodeJS(带有SWIG模板的Express):

<input type="date" id="aDate" name="aDate" class="form-control" value="\{\{ Date.now() | date("Y-m-d") }}" />
小开

一个简单的解决方案:

<input class="set-today" type="date">
<script type="text/javascript">
window.onload= function() {
document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
}
</script>
小开 
<input id="datePicker" type="date" />


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

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);


var today = now.getFullYear()+"-"+(month)+"-"+(day) ;




$('#datePicker').val(today);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

小开

最简单的解决方案似乎忽略了将使用UTC时间，包括高度赞成的解决方案。下面是一个精简的，ES6，非jquery版本的一对现有的答案:

const today = (function() {
const now = new Date();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
return `${now.getFullYear()}-${month}-${day}`;
})();


console.log(today);  // as of posting this answer: 2019-01-24
小开

这是服务器端真正需要做的事情，因为每个用户的本地时间格式不同，更不用说每个浏览器的行为不同了。

Html日期输入值应该是这样的格式:yyyy-mm-dd，否则它将不显示值。

Asp classic或vbscript:

current_year = DatePart("yyyy",date)
current_month = DatePart("m",date)
current_day = DatePart("d",date)


IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF


get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

今日内容:2019-02-08

然后在你的html中: # EYZ0 < / p >

PHP

用这个: # EYZ0 < / p >

小开

上面两个答案都不正确。

一个简短的单行代码，使用纯JavaScript，考虑本地时区，不需要定义额外的函数:

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;
<input id='date-input' type='date'>

This gets the current datetime in milliseconds (since epoch) and applies the timezone offset in milliseconds (minutes * 60k minutes per millisecond).

You can set the date using element.valueAsDate but then you have an extra call to the Date() constructor.

小开

Javascript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

Jquery

$('#date-field').val(new Date().toISOString().slice(0, 10));

另一个选择

如果你想自定义日期，月和年只要做sum或sub作为你的愿望😎 因为月份是从0开始的，所以需要将1与月份相加 

function today() {
let d = new Date();
let currDate = d.getDate();
let currMonth = d.getMonth()+1;
let currYear = d.getFullYear();
return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
}

Appy today函数

document.getElementById('date-field').value = today();


$('#date-field').val(today());
小开

这是非常简单的应用下面的代码，使用PHP

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

Date函数将返回当前日期，通过使用time()中的日期。

小开

即使过了这么久，这也能帮到别人。这是一个简单的JS解决方案。

JS

  let date = new Date();
let today = date.toISOString().substr(0, 10);
//console.log("Today: ", today);//test
document.getElementById("form-container").innerHTML =
'<input type="date" name="myDate" value="' + today + '" >';//inject field

超文本标记语言

 <form id="form-container"></form>

类似的解决方案也适用于角，无需任何额外的库来转换日期格式。对于Angular(由于通用组件代码，代码被缩短了):

//so in myComponent.ts
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
//constructor, etc....
ngOnInit() {
this.today = this.date.toISOString().substr(0, 10);
}
}
//so in component.html
<input type="date" [(ngModel)]="today"  />
小开

由于日期类型只接受“yyyy-MM-dd”格式，因此需要相应地格式化日期值。

这是它的解，

var d = new Date();
var month = d.getMonth();
var month_actual = month + 1;


if (month_actual < 10) {
month_actual = "0"+month_actual;
}


var day_val = d.getDate();
if (day_val < 10) {
day_val = "0"+day_val;
}


document.getElementById("datepicker_id").value = d.getFullYear()+"-"+ month_actual +"-"+day_val;
小开 
$(document).ready(function(){
var date = new Date();


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


var today = date.getFullYear()+"-"+(month)+"-"+(day) ;
});


$('#dateid').val(today);
小开

我测试的最简单的工作版本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date">
<script>
$('#date').val(new Date().toJSON().slice(0,10));
</script>

小开

未来的证明解决方案，也是.split("T")[0]的替代方案，它不会在内存中创建字符串数组，将使用String.slice()，如下所示:

new Date().toISOString().slice(0, -14);
这里给出的许多答案，如slice(0, 10)， substring(0, 10)等，在未来将失败。
它们使用Date.toJSON()，返回Date.toISOString():

toISOString()方法返回一个简化扩展ISO格式(ISO 8601)的字符串，它总是24或27个字符长(分别是YYYY-MM-DDTHH:mm:ss.sssZ或±YYYYYY-MM-DDTHH:mm:ss.sssZ)。时区始终是零UTC偏移量，由后缀"Z"表示。

一旦年份变成5位数，这些答案就会失败。

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

小开

HTML:

<input type="date" value="2022-01-31">

PHP:

<input type="date" value="<?= date('Y-m-d') ?>">

日期格式必须为"yyyy-mm-dd"

小开

这将返回与ISO相同的YYYY-MM-DD格式，但是您的本地时间，而不是UTC。

function getToday() {
return new Date().toLocaleDateString('en-CA', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
});
}
小开

现在，我们不应该再使用moment.js，而是day.js来处理这个问题，而且没有任何副作用。Moment.js很棒，但它并没有向前推进，它相对较大，但非常有用。day.js具有足够好的功能，可以成为未来几年使用的新候选。

let now = dayjs(); /* same as now = dayjs(new Date()); */
小开

只是为了一些新的/不同的东西-你可以使用php来做它。

<?php
$todayDate = date('Y-m-d', strtotime('today'));
echo "<input type='date' value='$todayDate' />";
?>
小开

您可以生成正确格式的日期，如下所示:

const date = new Date().toLocaleDateString('en-CA')

然后将它分配给input元素。如果你使用vue.js，你可以这样做:

<input type="date" :value="date">
小开

使用input:date元素的. defaultvalue属性将日期的默认值设置为今天的日期。

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


window.onload = function loadDate() {
let date = new Date(),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();


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


const todayDate = `${year}-${month}-${day}`;


document.getElementById("date").defaultValue = todayDate;
};


loadDate();

或者在窗口加载上使它成为IIFE/self-called函数

window.onload = (function loadDate() {
let date = new Date(),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();


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


const todayDate = `${year}-${month}-${day}`;


document.getElementById("date").defaultValue = todayDate;
})();

与使用value属性设置日期不同，使用defaultValue属性提供了动态优势。

另外，注意日期格式必须匹配，因此我使用todayDate的格式为:

yyyy-mm-dd

我相信这回答了你的问题，除了你想设置一个静态的开始和结束日期。要做到这一点，请遵循以下Mozilla的示例:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date>

小开

来匹配原始查询。

date.value = new Date().toJSON().split('T')[0]
<input type="date" id="date"/>

小开

这在一行JS中是可能的。

HTML:

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

JS:

document.getElementById('theDate').value = new Date().toISOString().substring(0, 10);


document.getElementById('theDate').value = new Date().toISOString().substring(0, 10);
<input type="date" id="theDate">


提交答案