入力タイプの日付のデフォルト値を今日に設定するにはどうすればよいですか？

HTML5入力タイプは素晴らしいです。Operaの新しい組み込み日付ピッカーは簡単です。Chromeは少なくともスピンホイール実装で新しい入力タイプをサポートしています。

しかし、日付フィールドのデフォルト値を今日の日付に設定する方法はありますか？Operaでは、日付ピッカーから「今日」を選択でき、Chromeのいずれかのステップボタンをクリックするとすぐに、今日の日付から増減します。

私はこのマイナーな問題の解決策をコーディングするのを恥ずかしがり屋ではありませんが、両方のブラウザーが現在の日付を完全に認識しているが、自動的に（少なくともプレースホルダーとして）ポップインしないだけであることは私にはばかげているようです。

他のHTML入力フィールドと同様に、デフォルト値がvalue属性で指定されていない限り、ブラウザは空のままにします。

残念ながら、HTML5はvalue属性に「今日」を指定する方法を提供せず（私が見ることができます）、RFC3339の有効な日付のみを提供します2011-09-29。

TL; DRYYYY-MM-DD日付形式を使用しないと表示されません

JavaScriptのDateオブジェクトは、必要なフォーマットを手動で行うのを避けるために十分な組み込みサポートを提供します。

正しいタイムゾーンサポートのためにこれを追加します。

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

純粋なJS：

document.getElementById('datePicker').value = new Date().toDateInputValue();

これは私にとってはうまくいきます：

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

次のコードはうまくいきます：

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

これはPHPに依存していることに注意してください。

次のように、javascriptを使用してデフォルト値を入力できます：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);
});

私はおそらく、月と日付が1桁かどうかを確認し、それらの前にゼロを追加するために少し余分な時間をかけるでしょう...しかし、これはあなたにアイデアを与えるはずです。

編集：余分なゼロのチェックを追加しました

PHPを使用している場合は、標準のYmd形式に従います

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

HTML

<input type="date" id="theDate">

JS

$(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" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

デモ

jQueryを使いたくない場合は、次のようなことができます

HTML

<input type="date" id="theDate">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

デモ

HTML5自体では、日付フィールドのデフォルト値を今日の日付に設定する方法はありませんか？他の回答に示されているように、値はJavaScriptを使用して設定できます。これは通常、ページが読み込まれたときにユーザーに現在の日付に基づいてデフォルトを設定する場合に最適なアプローチです。

HTML5は要素のvalueAsDateプロパティを定義しinput type=date、それを使用して、などによって作成されたオブジェクトから直接初期値を設定できますnew Date()。ただし、たとえばIE 10はそのプロパティを認識していません。（またinput type=date、への本物のサポートが不足していますが、それは別の問題です。）

したがって、実際にはvalueプロパティを設定する必要があり、それはISO 8601に準拠した表記である必要があります。現在使用されているブラウザがtoISOStringメソッドをサポートすることを期待できるため、現在ではこれはかなり簡単に行うことができます。

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

ブラウザで日付と時刻に関連することを行っている場合は、Moment.jsを使用します。

moment().format('YYYY-MM-DD');

moment()現在の日付と時刻を表すオブジェクトを返します。次に、その.format()メソッドを呼び出して、指定された形式に従って文字列表現を取得します。この場合は、YYYY-MM-DD。

完全な例：

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

moment.jsを使用してこの問題を2行で解決します。html5の日付入力タイプは、この形式「YYYY-MM-DD」のみを受け入れます。私はこの方法で問題を解決します。

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

これは、この問題を解決する最も簡単な方法です。

Javascript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

jquery

$('#date-field').val(new Date().toISOString().slice(0, 10));

別のオプション

日付、月、年をカスタマイズしたい場合は、希望どおりにsumまたはsubを実行してください。

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

今日機能を適用する

document.getElementById('date-field').value = today();

$('#date-field').val(today());

非常にシンプルで、PHP、ASP、JAVAなどのサーバー側の言語を使用するか、JavaScriptを使用することもできます。

これが解決策です

<?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>

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

$(document).ready( function() {
    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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

入力日時を入力する必要がある場合は、これを使用できます。

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

NodeJS（SWIGテンプレートを使用したExpress）の場合：

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

最も単純なソリューションは、投票数の多いものを含め、UTC時間が使用されることを見落としているようです。以下は、いくつかの既存の回答の合理化されたES6非jQueryバージョンです。

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24

これは私のコードでやったことですが、テストしたところうまくいきました。inputtype = "date"はcurdateを自動的に設定することをサポートしていないため、この制限を克服するために使用した方法は、PHPコードに次のような単純なコードを使用することでした。 。

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

それが役に立てば幸い！

どちらの回答も正しくありません。

純粋なJavaScriptを使用する短いワンライナーは、ローカルタイムゾーンを考慮し、追加の関数を定義する必要はありません。

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;

<input id='date-input' type='date'>

これにより、ミリ秒単位の現在の日時（エポック以降）が取得され、ミリ秒単位のタイムゾーンオフセット（分*ミリ秒あたり60k分）が適用されます。

を使用して日付を設定できelement.valueAsDateますが、Date()コンストラクタへの追加の呼び出しがあります。

これは、各ブラウザの動作は言うまでもなく、各ユーザーのローカル時刻形式が異なるため、サーバー側で実際に行う必要があるものです。

HTML日付入力値は、yyyy-mm-ddの形式にする必要が あります。そうでない場合、値は表示されません。

ASPクラシック、またはVBSCRIPT：

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

今日の日付の出力：2019-02-08

次にあなたのhtmlで： <input type="date" value="<% =get_date %>"

PHP

これを使うだけです： <input type="date" value="<?= date("Y-m-d"); ?>">

これは、次のコードを適用することで非常に簡単です。 PHP

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

日付関数は、日付を取得して現在の日付を返しtime()ます。

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)

ルビを使用している場合は、これを使用してデフォルト値を今日の日付と時刻に設定できます。

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

簡単な解決策：

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

値を今日の日付に設定するデフォルトの方法はないので、これはそのアプリケーションに依存するはずです。オーディエンスの日付ピッカーへの露出を最大化したい場合は、サーバー側スクリプト（PHP、ASPなど）を使用してデフォルト値を設定します。

ただし、CMSの管理コンソール用であり、ユーザーが常にJSを使用している、またはサイトが信頼されていることがわかっている場合は、JSを安全に使用して、jlbrunoのようにデフォルト値を入力できます。

同じ問題があり、簡単なJSで修正しました。入力：

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

重要：JSスクリプトは、最後のコード行、または入力後に入力する必要があります。このコードを前に配置すると、スクリプトは入力を見つけられないためです。

HTML自体には、今日の日付を入力フィールドに挿入するデフォルトのメソッドはありません。ただし、他の入力フィールドと同様に、値を受け入れます。

PHPを使用して今日の日付をフェッチし、それをフォーム要素の値フィールドに入力できます。

<?php
    // 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' />";
?>

値フィールドは入力としてフォーマットYYYY-MM-DDを受け入れるため、変数を作成するだけで $date_string形式を受け入れます。入力値が受け入れるのと同じ形式でを今日の日付から取得した年、月、日をにです。事前に選択された日付があります！

お役に立てれば ：）

編集：

PHPではなくHTML内に入力フィールドをネストしたい場合は、次のようにします。

<?php
    // 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";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

この質問はしばらく前（2年前）に尋ねられたことに気づきましたが、インターネットで明確な答えを見つけるのにまだ時間がかかりました。そのため、答えを探しているすべての人に役立つでしょう。みんなを大いに助けます:)

別の編集：

ほとんど忘れてしまいましたが、過去に私にとって非常に苦労したことは、date（）関数を使用するPHPでスクリプトを作成するときは常に、デフォルトのタイムゾーンを設定するのを忘れることです。

構文はdate_default_timezone_set(...);です。ドキュメントはこちらのPHP.netにあり、関数に挿入できるサポートされているタイムゾーンのリストはこちらにあります。私がオーストラリアにいるので、これは常に迷惑でした、私がこれを適切に設定しなかった場合、デフォルトでUTC + 0000が必要なUTC + 1000が必要なので、すべてが常に10時間押し戻されます。

ピーターさん、ありがとうございます。コードを変更しました。

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

そして、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
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

そして、本文では、要素は次のようになります。

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

乾杯！

これらすべての時間の後でさえ、それは誰かを助けるかもしれません。これは単純なJSソリューションです。

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

同様のソリューションは、日付形式を変換する追加のライブラリなしでAngularで機能します。Angularの場合（共通のコンポーネントコードのためにコードが短縮されています）：

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />