给定一个输入元素:
<input type="date" />
有没有办法将日期字段的默认值设置为今天的日期?
给定一个输入元素:
<input type="date" />
有没有办法将日期字段的默认值设置为今天的日期?
当前回答
在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,所以要小心:)
其他回答
这是服务器端真正需要做的事情,因为每个用户的本地时间格式不同,更不用说每个浏览器的行为不同了。
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"¤t_month
END IF
IF current_day < 10 THEN
current_day = "0"¤t_day
END IF
get_date = current_year&"-"¤t_month&"-"¤t_day
Response.Write get_date
今日内容:2019-02-08
然后在你的html中: <input type="date" value="<% =get_date %>"
PHP
就用这个吧: <input type="date" value="<? "=日期(“Y-m-d”);”? > >
即使过了这么久,这也能帮到别人。这是一个简单的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
HTML
<form id="form-container"></form>
类似的解决方案也适用于Angular,无需任何额外的库来转换日期格式。对于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" />
非常简单,只需使用服务器端语言,如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>
使用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的格式为:
年-月-日
我相信这回答了你的问题,除了你想设置一个静态的开始和结束日期。要做到这一点,请遵循以下Mozilla的示例:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date >
如果你在浏览器中做任何与日期和时间相关的事情,你想要使用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>