javascript - jQuery Datepicker テキストボックスに今日の日付を事前入力するにはどうすればよいですか?

Question

私は非常に単純なjQuery Datepickerカレンダーを持っています:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

そしてもちろんHTMLで...

<input type="text" size="10" value="" id="date_pretty"/>

ユーザーがカレンダーを表示すると、今日の日付がうまく強調表示されますが、ユーザーが何もせずに、ページの読み込み時にテキストボックス自体に今日の日付を事前入力するにはどうすればよいですか? 99% の確率で、今日の日付のデフォルトが希望どおりになります。

score 574 · Accepted Answer

更新: Chrome では機能しなくなったという報告があります。

これは簡潔で、仕事をします（廃止）：

$(".date-pick").datepicker('setDate', new Date());

これは簡潔ではありません。チェーンを利用すると、chrome で動作するようになります (2019-06-04):

$(".date-pick").datepicker().datepicker('setDate', new Date());

score 227 · Accepted Answer

最初に datepicker() を呼び出してから、'setDate' を使用して現在の日付を取得する必要があります。

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

または、この回答のコメントに記載されているように、日付ピッカーの初期化後に setDate メソッド呼び出しをチェーンします

$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

だけでは機能しません

$(".date-pick").datepicker("setDate", new Date());

注:許容される setDate パラメータについては、こちらで説明しています

score 72 · Accepted Answer

var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

うまくいくように見えましたが、もっと良い方法があるかもしれません..

score 59 · Accepted Answer

このsetDate()メソッドは日付を設定し、関連するコントロールを更新します。方法は次のとおりです。

$("#datepicker1").datepicker({
    dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");

デモ

ドキュメントに記載されているようにsetDate()、JavaScriptのDateオブジェクト、数値、または文字列を喜んで受け入れます。

新しい日付は、Dateオブジェクトまたは現在の日付形式の文字列（例： '01/26/2009'）、今日からの日数（例：+7）、または値と期間の文字列（'y'年、'm'は月、'w'は週、'd'は日、たとえば'+ 1m + 7d'）、またはnullの場合は選択した日付をクリアします。

defaultDateご参考までに、コンストラクターでプロパティを設定しても、関連するコントロールは更新されません。

score 26 · Accepted Answer

今日に設定：

$('#date_pretty').datepicker('setDate', '+0');

昨日に設定：

$('#date_pretty').datepicker('setDate', '-1');

以下同様に、今日の日付の前後の任意の日数で。

jQuery UI›メソッド›setDateを参照してください。

score 9 · Accepted Answer

解決策は次のとおりです。

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
    var myDate = new Date();
    var month = myDate.getMonth() + 1;
    var prettyDate = month + '/' + myDate.getDate() + '/' + myDate.getFullYear();
    $("#date_pretty").val(prettyDate);
});

ありがとうグレイゴースト！

score 7 · Accepted Answer

これは私のために働いた。

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());

score 6 · Accepted Answer

このコードは、datepicker の形式を使用することを保証します。

$('#date-selector').datepicker('setDate', new Date());

フォーマットを再適用する必要はありません。datepicker の初期化時に事前定義された datepicker を使用します (割り当てた場合!) ;)

score 5 · Accepted Answer

David K Egghead のコードは完璧に機能しました。ありがとうございます!

$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date());

私はそれを少しトリミングすることもできましたが、それもうまくいきました：

$(".date-pick").datepicker().datepicker("setDate", new Date());

score 4 · Accepted Answer

$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });

score 2 · Accepted Answer

ロード時に日付ピッカーを特定のデフォルト時間（私の場合は現在の日付）に設定し、さらに別の日付を選択するオプションを設定するには、構文は次のとおりです。

    $(function() { 
        // initialize the datapicker
        $("#date").datepicker();

        // set the time
        var currentDate = new Date();
        $("#date").datepicker("setDate",currentDate);

    //  set the options for the button  
        $("#date").datepicker("option",{
            dateFormat: 'dd/mm',
            showOn: "button",
          // whatever option Or event you want 
        });
  });

score 1 · Accepted Answer

2セントを追加すると思っただけです。ピッカーは追加/更新フォームで使用されているため、既存のレコードを編集する場合はデータベースからの日付を表示する必要があり、そうでない場合は今日の日付を表示する必要がありました。以下は私にとってはうまくいきます：

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });

score 1 · Accepted Answer

To pre-populate date, first you have to initialise datepicker, then pass setDate parameter value.

$("#date_pretty").datepicker().datepicker("setDate", new Date());

score 0 · Accepted Answer

var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

必要なコントロールにprettyDateを割り当てます。

score 0 · Accepted Answer

これを試して

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();

score -1 · Accepted Answer

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

ソース: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

javascript - jQuery Datepicker テキストボックスに今日の日付を事前入力するにはどうすればよいですか?

19 に答える 19

Related

Reference