入力タイプの日付に日付を設定する


104
<input id="datePicker" type="date" />​

今日の日付をクロームのdatepicker入力タイプの日付に設定します。

$(document).ready( function() {
    var now = new Date();
    var today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    alert(today);
    $('#datePicker').val(today);
});​

しかし、それは機能していません

このjsFiddleを編集-Chromeでお試しください。


2
あなたはフィドルの日付を選択し、結果フレームを検査した場合は、やっては$('#datePicker').val();います"2012-09-10"し、それはあなたが日付を設定するために使用する形式ではありません

それは私の終わりにクロムで動作します..正確にはどういう意味its not workingですか?
AdityaParab 2012

試してみてください:{ currentText: "Now" }マニュアルを
diEcho

私に取り組んで...問題は何ですか?
Netorica 2012

1
@JigarPandya fr_FR(@ user108、stackoverflow.com /a/3496622/180100も参照)

回答:


158

フィドルリンク:http : //jsfiddle.net/7LXPq/93/

これには2つの問題があります。

  1. HTML 5の日付コントロールは、SQLで使用する年-月-日の形式で受け入れます
  2. 月が9の場合、単純に9ではなく09に設定する必要があります。したがって、日フィールドにも適用されます。

デモのフィドルリンクをたどってください:

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);

4
2012年以降の回答:1行のコードで、サポートされているソリューションについて私の回答を確認してください。
Oliv Utilo 2017年

@ OlivUtilo—確かに、しかしあなたの答えは時々不正確な結果をもたらすでしょう。
RobG

あなたは私の時間を節約しました、ありがとう
Dip Surani

128

document.getElementById("datePicker").valueAsDate = new Date()

うまくいくはずです。


6
これは私がこれまでに見つけた最高のソリューションです-Android 4.0.3で動作します
Ben Clayton

6
確かに受け入れられた答えよりもきれいに思われます...ありがとう
Skipjack

1
私はこれが何らかの理由でSafariで機能しないことを発見しました:(
james_alvarez

ChromeとEdgeでテストし、問題なく動作することを確認しました。@スキップジャックが言ったように、素晴らしい答えです!
アルン

正しい解決策のように見えますが、Safari(13.1.2)では、呼び出しにより無効な状態例外が発生します。なぜだか分からない…?
fbitterlich

23

更新:これはで行っていdate.toISOString().substr(0, 10)ます。受け入れられた答えと同じ結果を与え、良いサポートがあります。


2
サファリでの作業
james_alvarez 2017年

4
注:これは、UTCタイムゾーンの日付を示します。対照的に、トップの回答は現地時間を使用しています。
Qwertie 2018

@Qwertie-どちらも同じDateオブジェクトで動作します(ブラウザーからタイムゾーンを継承する新しいDateまたはDate.nowで作成されます)。toISOStringまたはgetDate関数を使用すると、同じように解決されると思います。だから私はこれが望ましい振る舞いをするべきだと思います...
Oliv Utilo

1
@OlivUtilo-いいえ、ホストのタイムゾーンオフセットの期間中はありません。
RobG

Qwertieが言うように、時間のない日付を使用している場合、これは潜在的に間違った答えを与えます。たとえば、Sat Sep 01 2018 00:00:00 GMT + 0100は "2018-08-31"に変換されます
havlock

14
var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

上記のコードは動作します。


12

私にとって、この問題を解決する最も簡単な方法は、moment.jsを使用してこの問題を2行で解決することです。

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

1
$( '#datePicker')。val(moment()。format( 'YYYY-MM-DD'));と同じように
Umair Khalid 2017

2
Momentに慣れていない人が、任意のJavascript Dateオブジェクトをmoment()でフォーマットする場合: var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);
veuncent


1

私は通常、日付入力を使用するときにこれら2つのヘルパー関数を作成します。

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${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 => new Date(str.split('-'));

次に、日付入力値を次のように設定できます。

$('#datePicker').val(dateToInput(new Date()));

そして、そのように選択した値を取得します

const dateVal = inputToDate($('#datePicker').val())

0

Datetimepickerには常に入力形式YYYY-MM-DDが必要です。モデルの表示形式やローカルシステムの日時は関係ありません。しかし、datetime pickerの出力形式は、希望する(ローカルシステム)です。私の投稿に簡単な例があります。


-5

jqueryバージョン

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

4
$.datepickerデフォルトのjQueryではありません。あなたはプラグインを使用していますが、どちらを使用するかは言うまでもなく、この答えは役に立ちません。
エミールベルジェロン2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.