HTML5 Input Type Date — Default Value to Today?

2019-01-01 12:24发布

站内问答 / Html5
2241 25 5

The new HTML5 input types are great. Opera's new built-in date picker is a breeze, and Chrome has at least supported the new input type with a spin-wheel implementation.

But is there any way to set the default value of the date field to today's date? With Opera, I can choose 'Today' from the date picker, and as soon as I click on either of the step buttons in Chrome, it increments/decrements from today's date.

I'm not shy to code a solution to this minor problem, but it seems silly to me that both of the browsers are fully aware of the current date but won't automatically just pop it in (at least as a placeholder).

标签： html5 date input
举报
25条回答
梦该遗忘
2楼-- · 2019-01-01 12:31

Here is an easy way to do this with 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;
查看更多
0人赞 添加讨论(0) 举报
萌妹纸的霸气范
3楼-- · 2019-01-01 12:32

You could fill the default value through javascript as seen here: 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);
});

I would probably put a bit of extra time to see if the month and date are single digits and prefix them with the extra zero...but this should give you an idea.

EDIT: Added check for the extra zero

查看更多
0人赞 添加讨论(0) 举报
伤终究还是伤i
4楼-- · 2019-01-01 12:33

The following code works well:

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

Note that this relies on PHP.

查看更多
0人赞 添加讨论(0) 举报
公子世无双
5楼-- · 2019-01-01 12:33

Very Simple, Just use server side languages like PHP,ASP,JAVA or even you can use javascript.

Here is the solution

<?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>
查看更多
0人赞 添加讨论(0) 举报
看淡一切
6楼-- · 2019-01-01 12:35

Follow the standard Y-m-d format, if you are using PHP

<input type="date" value="<?php echo date("Y-m-d"); ?>">
查看更多
0人赞 添加讨论(0) 举报
泛滥B
7楼-- · 2019-01-01 12:36

The JavaScript Date object provides enough built-in support for the required format to avoid doing it manually:

Add this for correct timezone support:

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());
});​


Pure JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();
查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)