blocks|key|2858153|text|小提琴链接：http://jsfiddle.net/7LXPq/93/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2858154|这里面有两个问题：|2858155|HTML5中的|2858156|Date控件接受我们在|ordered-list-item|2858157|中使用的年-月-日的格式。如果月份是9，则需要将其设置为09，而不是简单地设置为9。因此它也适用于日期字段。|2858158|2858159|请点击小提琴链接进行演示：|2858160|var+now+=+new+Date();

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

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

$('#datePicker').val(today);|code-block|syntax|javascript|2858161|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7LXPq/93/^0|6|T|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|C|$]]|$1|K|3|L|5|J|7|19|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1B|8|@]|9|@]|C|$]]|$1|P|3|Q|5|R|7|1C|8|@]|9|@]|C|$S|T]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

Fiddle link : <a href="http://jsfiddle.net/7LXPq/93/" rel="noreferrer">http://jsfiddle.net/7LXPq/93/</a>

Two problems in this:

<ol>
<li>Date control in HTML 5 accepts in the format of Year - month - day as we use in SQL</li>
<li>If the month is 9, it needs to be set as 09 not 9 simply. So it applies for day field also.</li>
</ol>

Please follow the fiddle link for demo:

<pre><code>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);
</code></pre>

blocks|key|214370|text|document.getElementById("datePicker").valueAsDate+=+new+Date()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|214371|应该行得通。|214372|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#:%257E:text=minimum.-,valueasdate,-Date^0|0|1D|1E|C|12|B|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<code>document.getElementById(&quot;datePicker&quot;).<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#:%7E:text=minimum.-,valueasdate,-Date" rel="noreferrer">valueAsDate</a> = new Date()</code>
should work.

blocks|key|216558|text|更新:我正在用date.toISOString().substr(0,+10)做这件事。给出了与接受的答案相同的结果，并具有良好的支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|216559|entityMap^0|7|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Update: I'm doing this with <code>date.toISOString().substr(0, 10)</code>. Gives the same result as the accepted answer and has good support.

blocks|key|3071708|text|var+today+=+new+Date().toISOString().split('T')[0];
$("#datePicker").val(today);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3071709|上面的代码可以工作。|unstyled|3071710|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);
</code></pre>

Above code will work.

blocks|key|2858234|text|对我来说，解决这个问题的最短方法是使用moment.js，只用两行代码就能解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2858235|var+today+=+moment().format('YYYY-MM-DD');
$('#datePicker').val(today);|code-block|syntax|javascript|2858236|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

to me the shortest way to solve this problem is to use moment.js and solve this problem in just 2 lines.

<pre><code>var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);
</code></pre>

blocks|key|2858231|text|如果代码的格式是：YYYY-MM-DD，这是日期格式http://en.wikipedia.org/wiki/ISO_8601的计算机标准，那么它就可以正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2858232|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/ISO_8601^0|9|A|Q|11|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Your code would have worked if it had been in this format: <code>YYYY-MM-DD</code>, this is the computer standard for date formats <a href="http://en.wikipedia.org/wiki/ISO_8601" rel="noreferrer">http://en.wikipedia.org/wiki/ISO_8601</a>

blocks|key|3071631|text|在使用日期输入时，我通常会创建以下两个辅助函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3071632|//+date+is+expected+to+be+a+date+object+(e.g.,+new+Date())
const+dateToInput+=+date+=>
++`${date.getFullYear()
++}-${('0'+%2B+(date.getMonth()+%2B+1)).slice(-2)
++}-${('0'+%2B+date.getDate()).slice(-2)
++}`;

//+str+is+expected+in+yyyy-mm-dd+format+(e.g.,+"2017-03-14")
const+inputToDate+=+str+=>+new+Date(str.split('-'));|code-block|syntax|javascript|3071633|然后，您可以将日期输入值设置为：|3071634|$('#datePicker').val(dateToInput(new+Date()));|3071635|检索选定的值，如下所示|3071636|const+dateVal+=+inputToDate($('#datePicker').val())|3071637|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I usually create these two helper functions when using date inputs:

<pre><code>// date is expected to be a date object (e.g., new Date())
const dateToInput = date =&gt;
 `${date.getFullYear()
 }-${('0' + (date.getMonth() + 1)).slice(-2)
 }-${('0' + date.getDate()).slice(-2)
 }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str =&gt; new Date(str.split('-'));
</code></pre>

You can then set the date input value as:

<pre><code>$('#datePicker').val(dateToInput(new Date()));
</code></pre>

And retrieve the selected value like so

<pre><code>const dateVal = inputToDate($('#datePicker').val())
</code></pre>

blocks|key|211750|text|只能以YYYY-MM-DD格式在输入type="date"中使用日期|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|211751|我已经在NODE.js+express-handlebars中实现了helper+as+formatDate，不用担心……只需使用第一行中描述的格式即可。|211752|例如：|211753|<+input+type="date"+id="date"+name="date"+class="form-control"+value="{{formatDate+invoice.date+'YYYY-MM-DD'}}"+/>|code-block|syntax|javascript|211754|entityMap^0|3|A|I|B|0|18|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

You can only use date in input <code>type=&quot;date&quot;</code> as in format <code>YYYY-MM-DD</code>
I have implemented helper as <code>formatDate</code> in NODE.js express-handlebars, don't need to be worry ... just use format as described in first line.
e.g:
<pre><code>&lt; input type=&quot;date&quot; id=&quot;date&quot; name=&quot;date&quot; class=&quot;form-control&quot; value=&quot;{{formatDate invoice.date 'YYYY-MM-DD'}}&quot; /&gt;
</code></pre>

blocks|key|2858488|text|2021|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2858489|我发现的一个很好的方法是使用locale进行格式化。您可以通过许多不同的方式使用它。当您使用的不是jquery+datepicker，而是html+Datepicker.html时，可以使用。|2858490|++$("#datepickerEnd").val(new+Date().toLocaleDateString('en-CA'));//YYYY-MM-dd|code-block|syntax|javascript|2858491|或分离以用于操作或调整或其他用途。|2858492|let+theDate+=+new+Date();
++$("#datepickerEnd").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd|2858493|操作示例。|2858494|++theDate.setDate(theDate.getDate()-7);
++$("#datepickerStart").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd|2858495|'en-ca‘是我的日期选择器所需的格式。如果您的不同，您可以查找匹配的字符串格式。由于它将其转换为字符串，因此它不包含用于在每个区域中搞乱的额外信息。因此，通过这种方式，您可以将其用于纯粹的格式化。|2858496|了解更多信息|2858497|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString|2858498|entityMap|0|LINK|mutability|MUTABLE|url^0|0|4|0|2N|1|0|0|0|0|0|0|0|0|0|2W|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1E|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1G|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1I|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|10|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|Z]]]]

2021
A great way I found to do this is using locale for the formatting. You can use it in many different ways. This works for when you aren't using the jquery datepicker, but the html datepicker.
<pre><code> $(&quot;#datepickerEnd&quot;).val(new Date().toLocaleDateString('en-CA'));//YYYY-MM-dd
</code></pre>
Or split up for manipulation or adjustments or other uses.
<pre><code>let theDate = new Date();
 $(&quot;#datepickerEnd&quot;).val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd
</code></pre>
Manipulation example.
<pre><code> theDate.setDate(theDate.getDate()-7);
 $(&quot;#datepickerStart&quot;).val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd
</code></pre>
The 'en-ca' is the needed format for my datepicker. If yours is different you can look for a string format that matches. Since it turns it to a string it does not contain extra information for messing up per region. So, in this way you can use it for purely formatting.
For more information
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString</a>

blocks|key|216618|text|Datetimepicker总是需要输入格式YYYY-MM-DD，它不关心你的模型的显示格式，也不关心你的本地系统日期时间。但是日期时间选择器的输出格式是您想要的(您的本地系统)。在my+post中有一个简单的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|216619|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/48193586/jquery-set-date-value-in-asp-net-core-2-razor^0|2J|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Datetimepicker always needs input format YYYY-MM-DD, it doesn't care about display format of your model, or about you local system datetime. But the output format of datetime picker is the your wanted (your local system). There is simple example in <a href="https://stackoverflow.com/questions/48193586/jquery-set-date-value-in-asp-net-core-2-razor">my post</a>.

blocks|key|214509|text|对我来说，获取区域设置日期并以正确的格式输入type="date"的最短方法是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|214510|var+d+=+new+Date();+
var+today+=+d.getFullYear()%2B"-"%2B("0"%2B(d.getMonth()%2B1)).slice(-2)%2B"-"%2B("0"%2Bd.getDate()).slice(-2);|code-block|syntax|javascript|214511|或者这样：|214512|var+d+=+new+Date().toLocaleDateString().split('/');
var+today+=+d[2]%2B"-"%2B("0"%2Bd[0]).slice(-2)%2B"-"%2B("0"%2Bd[1]).slice(-2);|214513|然后只需设置日期输入值：|214514|$('#datePicker').val(today);|214515|entityMap^0|M|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

For me the shortest way to get locale date and in correct format for input <code>type=&quot;date&quot;</code> is this :
<pre><code>var d = new Date(); 
var today = d.getFullYear()+&quot;-&quot;+(&quot;0&quot;+(d.getMonth()+1)).slice(-2)+&quot;-&quot;+(&quot;0&quot;+d.getDate()).slice(-2);
</code></pre>
Or this :
<pre><code>var d = new Date().toLocaleDateString().split('/');
var today = d[2]+&quot;-&quot;+(&quot;0&quot;+d[0]).slice(-2)+&quot;-&quot;+(&quot;0&quot;+d[1]).slice(-2);
</code></pre>
Then just set the date input value :
<pre><code>$('#datePicker').val(today);
</code></pre>

blocks|key|211820|text|尝尝这个,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211821|$('#datePicker').val(moment().format('YYYY-MM-DD'));|code-block|syntax|javascript|211822|注意:您需要将Moment.js添加为依赖项|211823|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try This,
<pre><code>$('#datePicker').val(moment().format('YYYY-MM-DD'));
</code></pre>
Note : You need to add Moment.js as a dependency

blocks|key|2858259|text|Jquery版本|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2858260|var+currentdate+=+new+Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y',+currentdate));|code-block|syntax|javascript|2858261|entityMap^0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Jquery version 

<pre><code>var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));
</code></pre>

I will set today's date in the datepicker input type date in Chrome.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
 let now = new Date();
 let today = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
 console.log(today);
 $('#datePicker').val(today);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input id="datePicker" type="date"&gt;</code></pre>
</div>
</div>

However, it is not working.
Please try the code snippet in Chrome.

Set date in input type date

HTML5

我将在日期选择器输入类型的日期中设置今天的日期。​$(document).ready(function() {    let now = new Date();    let today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();    console.log(today);    $('#dat

问在输入类型日期中设置日期
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在输入类型日期中设置日期EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在输入类型日期中设置日期
EN