web-dev-qa-db-ja.com

HTML5入力タイプ日付 - 今日のデフォルト値？

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

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

私はこの小さな問題の解決策をコーディングするのは恥ずかしがり屋ですが、両方のブラウザが現在の日付を完全に認識していても自動的にそれを表示しない（少なくともプレースホルダとして）ことは愚かに思えます。

html5dateinput
342
Ian Brown

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

残念なことにHTML5はvalue属性で '今日'を指定する方法を提供していません（私が見ることができます）。 RFC33392011-09-29のような有効な日付のみ。すみません、それはあまり役に立ちません！

227
Tak

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();
196
brianary

これは私のために働く：

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

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

158
André

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

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

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

74
Isham Mohamed

ここに見られるように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桁の数字かどうかを確認し、先頭に余分なゼロを付けるかどうかを確認するために、もう少し時間をかけます。

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

30
Jeff

PHPを使用している場合は、標準のY-m-d形式に従ってください。

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

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;

デモ

19
user2985029

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

HTML5はinput type=date要素のためのvalueAsDateプロパティを定義しています、そしてそれを使用することで、あなたは作成されたオブジェクトから直接初期値を設定することができます。 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>
18
Jukka K. Korpela

あなたがブラウザの日付と時刻に関連した何かをしているなら、あなたは 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>
14
Gabriel Garcia

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

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

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

6
Umair Khalid

非常に単純で、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>
6
teshguru

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

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

Input type = "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>

それが役に立てば幸い！

3
Gumba
<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" />
3
Santanu

NodeJS（Expressテンプレートwith SWIG）の場合：

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

最も単純な解決策は、非常に高い投票を含む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
2
George Jempty

javascriptによる：

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
1
Charnstyle

これは、各ブラウザのローカルタイムフォーマットが異なるため、実際にはサーバーサイドで行う必要があるものです。各ブラウザの動作が異なることは言うまでもありません。

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

ASP CLASSIC、OR 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="<?php echo date("Y-m-d"); ?>">

1
csandreas1
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
1
kingsuede

そして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) %>" />

乾杯！

0
Ryan Dunphy

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

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

私は同じ問題を抱えていて、私は簡単な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スクリプトは最後のコード行、または入力の後に置く必要があります。このコードを前に置くと、スクリプトは入力を見つけられないためです。

0
Marlon

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

今日の日付を取得してフォーム要素のvalueフィールドに入力するには、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' />";
?>

ValueフィールドはYYYY-MM-DDというフォーマットを入力として受け入れるので、単に入力値が受け入れるのと同じフォーマットで変数$date_stringを作成し、それを今日の日付とvoiláから取得した年、月、日で埋めます。あなたはあなた自身が事前に選択された日付を持っています！

お役に立てれば ：）

編集：

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年前）に尋ねられたことを理解していますが、それでもインターネット上で明確な答えを見つけるのにしばらく時間がかかったので、いつでも答えを探している人に役立つでしょう。みんなを大いに助けます:)

他の編集：

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

構文はdate_default_timezone_set(...);です。ドキュメントは ここでPHP.net そして 関数に挿入するためにサポートされているタイムゾーンのリストはここで見つけることができます 。私がオーストラリアにいるので、これはいつもいらいらしていました、私がUTC + 1000を必要とするので、私がこれを適切に設定しなかったなら、すべては常に10時間後退されます。

0
SteppingHat

Javascript 

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

Jquery 

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

別のオプション

あなたが日付、月、年をカスタマイズしたいのであれば、あなたの希望通りにsumまたはsubを実行してください。月はフォーム0から始まりますので、1と月を合計する必要があります。

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());
0
MD Iyasin Arafat

両方のトップの答えは間違っています。

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

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

これは現在の日時をミリ秒単位で取得し（エポック以降）、タイムゾーンオフセットをミリ秒単位で適用します（分* 60ミリ秒/分）。

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

0
rovyko

ありがとう、今、私は自分のコードを変更します。

<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>
0
Nikhil sHETH

簡単な解決策！

<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>
0
gajam

今日の日付に値を設定するデフォルトの方法がないので、私はこれがそのアプリケーションに依存するべきであると言うでしょう。あなたが視聴者のデートピッカーへの露出を最大限にしたい場合は、サーバーサイドスクリプト（PHP、ASPなど）を使用してデフォルト値を設定してください。

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

0
stslavik