web-dev-qa-db-ja.com

JavaScriptで日付入力フィールドに事前入力

Htmlの「日付」入力フィールドに日付を事前入力しようとしていますが、渡そうとしている値は無視されます。

<html>
...
<input id='date' type='date'>
...
</html>

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...

また、日付オブジェクトを文字列として渡してみました

var myDate = new Date().toDateString();
$("#date").val(myDate);

フォームを開くと、日付フィールドが空白になっています。 type = "date"タグを削除すると、値は文字列として表示されますが、日付ピッカーにアクセスできません。日付入力を事前に入力し、それでも日付ピッカーを使用するにはどうすればよいですか？私は困惑しています。

ありがとう。

javascripthtmldateinput
20
MyTimeFinder

ISO形式で設定する必要があります。

(function () {
    var date = new Date().toISOString().substring(0, 10),
        field = document.querySelector('#date');
    field.value = date;
    console.log(field.value);

})()

http://jsfiddle.net/GZ46K/

45
Robin Drexler

ありがとうj08691。そのリンクが答えでした。

私のように苦労している他の人にとって、入力が「yyyy-mm-dd」であると彼らが言うとき、それは意味します！

年は4桁である必要があります。ダッシュとスペースは必要です。日と月は2桁である必要があります。

私の例では、1月のmyDate.getMonthは "1"のみを返します（何らかの理由でjavascriptが0〜11の月をカウントするため、実際には "0"を返します）。これを正しく行うには、次のことを行う必要がありました。

var myDate, day, month, year, date;
myDate = new Date();
day = myDate.getDate();
if (day <10)
  day = "0" + day;
month = myDate.getMonth() + 1;
if (month < 10)
  month = "0" + month;
year = myDate.getYear();
date = year + "-" + month + "-" + day;
$("#date").val(date);

これにより、10月より前や月の10日より前にテストしたように、他の人が時間を無駄にしないように願っています。笑

5
MyTimeFinder

これは Robin Drexlers に基づく回答ですが、現地時間です。

//Get the local date in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);

//Set the field value
var field = document.querySelector('#date');
field.value = datestr;

（日付だけでなく）変更する日時フィールドの場合は、時間を追加することを忘れないでくださいT00:00、またはサブストリングを16文字に変更します。例：

//Get the local date and time in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

//Set the field value
var field = document.querySelector('#datetime');
field.value = datestr;
3
mattbell87

以下のコードは、現地の日付を入力します。受け入れられた回答がUTC日付を入力します。

  var date = new Date();
  field = document.querySelector('#date-id');
  var day = date.getDate();
  if(day<10){ day="0"+day;}

  var month = date.getMonth()+1;
  if(month<10){ month="0"+month;}

  field.value = date.getFullYear()+"-"+month+"-"+day;
2
sanath_p

私は別の回答にコメントする評判ポイントがないので、新しい回答を追加します。そして、回答を追加しているので、コメントよりも詳細を説明します。

誰もがここで行っているすべてのジャグリングよりも、ゼロパッドを使用する簡単な方法があります。

var date = new Date();

var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day   = ('0' + date.getDate()).slice(-2);
var year  = date.getFullYear();

var htmlDate = year + '-' + month + '-' + day;

console.log("Date: " + htmlDate);

今日、出力は

Date: 2020-01-07

コードは、引用符で囲まれたゼロを前に付けて、最後の2文字をslice（-2）で取得することにより、動的文字列を構築しています。このように、ゼロが01の場合、最後の2は01になります。ゼロが01の場合、最後の2は11になります。

愚かさゼロから始まる月については、ゼロを付加する前に動的に1を追加することもでき、すべてが引き続き機能します。文字列に変換する前に、数学演算を実行する必要があります。

補足として、日付フィールドを更新する場合、値を設定する前にフィールドを非表示にし、設定後に表示する必要があることに気付きました。私はこれを頻繁に行うわけではないので、それに対処する必要があるたびに、私は再び奮闘しなければなりません。うまくいけば、これは将来の誰かを助けるでしょう。

将来の人々への波

0
Laura

ToISOString（）を使用しない理由

<input type='date'>フィールドはISO8601形式（ 参照 ）の値を取りますが、その値にはDate.prototype.toISOString()関数を使用しないでください。ISO8601文字列を出力する前に- 変換 /は、日付/時刻をUTC標準時間に表します（読み取り：タイムゾーンを変更します）（ 参照 ）。たまたま作業をしている、またはその標準時間を使いたくない場合を除き、日付が常にではないが時々変わるバグを導入します。

タイムゾーンの変更なしの日付オブジェクトからのHTML5日付入力の生成

私が見たタイムゾーンをいじることなく<input type='date'>の適切な入力値を取得する唯一の信頼できる方法は、日付コンポーネントのゲッターを手動で使用することです。

let d = new Date();
let datestring = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
document.getElementById('date').value = datestring;

/* Or if you want to use jQuery...
$('#date').val(datestring);
*/
<input id='date' type='date'>

タイムゾーンを変更せずに、日付オブジェクトからHTML5の日付と時刻フィールドに入力

これは元の質問の範囲を超えていますが、Dateオブジェクトから日付と時刻の両方のHTML5入力フィールドにデータを入力したい人のために、ここに私が思いついたものがあります：

// Returns a 2-member array with date & time strings that can be provided to an
// HTML5 input form field of type date & time respectively. Format will be
// ['2020-12-15', '01:27:36'].
function getHTML5DateTimeStringsFromDate(d) {

  // Date string
  let ds = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');

  // Time string
  let ts = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0');

  // Return them in array
  return [ds, ts];
}

// Date object
let d = new Date();

// Get HTML5-ready value strings
let dstrings = getHTML5DateTimeStringsFromDate(d);

// Populate date & time field values
document.getElementById('date').value = dstrings[0]
document.getElementById('time').value = dstrings[1]

/* Or if you want to use jQuery...
$('#date').val(dstrings[0]);
$('#time').val(dstrings[1]);
*/
<input type='date' id='date'>
<input type='time' id='time' step="1">
0
gwelter