去掉input text的边框，已实现，但是有个疑问，求大神解决一上 - HTML/CSS当前位置:& &&&去掉input text的边框，已实现，但是有个疑问，求大去掉input text的边框，已实现，但是有个疑问，求大神解决一上&&网友分享于：&&浏览：185次去掉input text的边框，已实现，但是有个疑问，求大神解决一下我想达到的效果是一个下划线，上面可以输入内容，效果见左侧粗体部分：效果 & 我是用下面代码实现的： &
&input type=&text& maxlength=&1& style=&text-align: border-style: border-bottom-style:&
border-bottom-color: width: 20px&/& &
问题来了：不点击text的时候，没有边框，就一个下划线，但是在输入的时候（即点击一下该区域），text的边框又出来了。我想问一下有没有方法将text输入的时候的边框也去除啊，谢谢。、补充：该问题只在chrome浏览器中会有。------解决方案--------------------解决就好
------解决方案--------------------
嗯 对的outline:可以去掉边框另外不止chrome会有 其它浏览器比如safari也有连IE也会有 只是颜色比较浅而已:P
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有HTML5 Input Type Date -- Default Value to Today? - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
J it only takes a minute:
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).
Like any HTML input field, the browser will leave it empty unless a default value is specified with the value attribute.
Unfortunately HTML5 doesn't provide a way of specifying 'today' in the value attribute (that I can see), only a
valid date like . Sorry, that doesn't help much!
18.7k75161
6,78842144
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);
$(document).ready( function() {
$('#datePicker').val(new Date().toDateInputValue());
document.getElementById('datePicker').value = new Date().toDateInputValue();
4,60312224
this works for me:
document.getElementById('datePicker').valueAsDate = new Date();
57.9k1690123
The following code works well:
&input type="date" value="&?php echo date('Y-m-d'); ?&" /&
Note that this relies on PHP.
5,32041639
You could fill the default value through javascript as seen here:
$(document).ready( function() {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if(month & 10)
month = "0" +
if(day & 10)
day = "0" +
var today = now.getFullYear() + '-' + month + '-' +
$('#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
&input type="date" id="theDate"&
$(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" +
if (day & 10) day = "0" +
var today = year + "-" + month + "-" +
$("#theDate").attr("value", today);
If you don't want to use jQuery you can do something like this
&input type="date" id="theDate"&
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month & 10) month = "0" +
if (day & 10) day = "0" +
var today = year + "-" + month + "-" +
document.getElementById("theDate").value =
user2985029
In HTML5 as such, there is no
way to set the default value of the date field to today’s date? As shown in other answers, the value can be set using JavaScript, and this is usually the best approach if you wish to set the default according to what is current date to the user when the page is loaded.
HTML5 defines the valueAsDate property for input type=date elements, and using it, you could set the initial value directly from an object created e.g. by new Date(). However, e.g. IE 10 does not know that property. (It also lacks genuine support to input type=date, but that’s a different issue.)
So in practice you need to set the value property, and it must be in ISO 8601 conformant notation. Nowadays this can be done rather easily, since we can expect currenty used browsers to support the toISOString method:
&input type=date id=e&
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
119k14122211
If you're doing anything related to date and time in the brower, you want to use :
moment().format('YYYY-MM-DD');
moment() returns an object representing the current date and time. You then call its .format() method to get a string representation according to the specified format. In this case, YYYY-MM-DD.
Full example:
&input id="today" type="date"&
document.getElementById('today').value = moment().format('YYYY-MM-DD');
Very Simple, Just use server side languages like PHP,ASP,JAVA or even you can use javascript.
Here is the solution
$timezone = "Asia/Colombo";
date_default_timezone_set($timezone);
$today = date("Y-m-d");
&input type="date" value="&?php echo $ ?&"&
57.9k1690123
follow standard Y-m-d format, if you using PHP
&input type="date"
value="&?php echo date("Y-m-d") ?&"&
if you need to fill input datetime you can use this:
&input type="datetime-local" name="datetime"
value="&?php echo date('Y-m-d').'T'.date('H:i'); ?&" /&
39.9k53166
This is what I did in my code, I have just tested and it worked fine, input type="date" does not support to set curdate automatically, so the way I used to overcome this limitation was using PHP code a simple code like this.
&head&&/head&
&form ...&
echo "&label for='submission_date'&Data de submiss?o&/label&";
echo "&input type='date' name='submission_date' min='' value='" . date('Y-m-d') . "' required/&";
Hope it helps!
11.1k21235
A possible solution
document.getElementById("yourDatePicker").valueAsDate = new Date()
use moment.js to solve this issue in 2 lines,
html5 date input type only accept "YYYY-MM-DD" this format. I solve my problem this way.
var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);
this is simplest way to solve this issue.
by 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)
3,41921133
Since there's no default method of setting the value to today's date, I would say this should be dependent upon it's application. If you're looking to maximize your audience's exposure to the date picker, then use a server-side script (PHP, ASP, etc.) to set the default value.
However, if it's for the administration console of the CMS, and you know that the user will always have JS on or your site trusted, then you can safely use JS to fill the default value, as per jlbruno.
I had the same problem and I fixed it with simple JS. The input:
&input type="date" name="dateOrder" id="dateOrder"
required="required"&
&script language="javascript"&
document.getElementById('dateOrder').value = "&?php echo date("Y-m-d"); ?&";
Important: the JS script should be in the last code line, or after to input, because if you put this code before,
the script won't find your input.
50.3k1398147
There is no default method within HTML itself to insert todays date into the input field. However, like any other input field it will accept a value.
You can use PHP to fetch todays date and input it into the value field of the form element.
// 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' /&";
The value field accepts the format YYYY-MM-DD as an input so simply by creating a variable $date_string in the same format that the input value accepts and fill it with the year, month and day fetched from todays date and voilá! You have yourself a preselected date!
Hope this helps :)
If you would like to have the input field nested within HTML rather than PHP you could do the following.
// 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";
&head&...&/head&
&input type="date" value="&?php print($date_string); ?&" /&
I realise this question was asked a while back (2 years ago) but it still took me a while to find a definite answer out on the internet, so this goes to serve anyone who is looking for the answer whenever it may be and hope it helps everyone greatly :)
Another Edit:
Almost forgot, something thats been a royal pain for me in the past is always forgetting to set the default timezone whenever making a script in PHP that makes use of the date() function.
The syntax is date_default_timezone_set(...);. Documentation can be found
and . This was always annoying since I am in Australia, everything is always pushed back 10 hours if I didn't set this properly as it defaults to UTC+0000 where I need UTC+1000 so just be cautious :)
Thanks peter, now i change my code.
&input type='date' id='d1' name='d1'&
&script type="text/javascript"&
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
m1="0"+m1;
var dt1 = d1.getDate();
if(dt1&10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
And for those using 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
If strMonth & 10 Then
strMonth = "0" & strMonth
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
And then in the body, your element should look something like this
&input name="today" type="date" value="&%= GetFormattedDate(now) %&" /&
57.9k1690123
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'+
date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z';
document.getElementById('MyDateTimeInputElement').value =
1,14541027
If you are using ruby you can use this to set the default value to today's date and time:
&input type="datetime-local" name="time" value="&%= Time.now.strftime('%Y-%m-%dT%H:%M') %&" /&
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
HTML5实例教程：input标记时间类型属性实例
破洛洛文章简介：input新增加的时间类型应用。
今天网页教学网带领大家一起领略一下HTML5的新特性，标记input在HTML5中新增加的时间类型的应用，如果在以下这几种输入框中输入的格式不正确，也是无法提交的。注意：此种类型的input在Opera10+中效果为佳，Chrome中效果不是十分好，外观取决于浏览器1、Date类型：
&form&&&&&&& &input id=&poluoluo_date& name=&& type=&date&/&&&&&&& &input type=&submit& value=&提交&/&&&/form&
如果在之前，我们使用js+css+dom才能实现日历选择日期的效果，在HTML5中，我们只需要设置input为date类型即可，提交表单的时候也不需要我们验证数据了，它已经帮我们实现了。运行效果如下图：
2、Time类型：
&form&&&&&&& &input id=&poluoluo_time& name=&& type=&time&/&&&&&&& &input type=&submit& value=&提交&/&&&/form&
此类型是一个专门用来输入时间的文本框，在提交的时候检查是否输入了有效的时间。运行效果如下图：
3、DateTime类型：
&form&&&&&&& &input id=&poluoluo_datetime& name=&& type=&datetime&/&&&&&&& &input type=&submit& value=&提交&/&&&/form&
datetime类型的input元素是专门用来输入UTC日期和实践的文本框，在提交的时候，对日期和时间进行有效的检查。运行效果如下图：
4、DateTime-Local类型：
&form&&&&&& &input id=&poluoluo_datetime-local& name=&& type=&datetime-local&/&&&&&& &input type=&submit& value=&提交&/&&/form&
此类型与datatime类型差不多，只不过是用来输入本地的日期和时间。运行效果如下图：
5、Month类型：&form&&&&&&& &input id=&poluoluo_month& name=&& type=&month&/&&&&&&& &input type=&submit& value=&提交&/&&&/form&
month是一种专门输入月份的文本框，在日历中，你只能选择某一个月，不能选择某一天。运行效果如下图：
6、Week类型：&form&&&&&&& &input id=&poluoluo_week& name=&& type=&week&/&&&&&&& &input type=&submit& value=&提交&/&&&/form&
week是专门用来输入周（星期）的文本框，W后面所跟的数字表示此周是当年的第几个星期。在日历中只能选择一周，同样不能选择某一天。运行效果如下图：
HTML5在此方面做的还算比较完善了，至于样式的定义，欢迎大家在此讨论！
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]input type=&date&，这个 data 的格式能否自定义？_问答_ThinkSAAS
input type=&date&，这个 data 的格式能否自定义？
input type=&date&，这个 data 的格式能否自定义？
默认是yyyy-mm-dd，我想改成其它格式的，比如yyyy.mm.dd，没查到手册，不知道大家有没有什么办法？
貌似没有指定Date格式的，不过input标签返回的 value 值为Date,你可以根据自己的需要修改输出格式。
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信}