web-dev-qa-db-ja.com

今日の日付をjQuery Datepickerテキストボックスに事前入力する方法を教えてください。

とてもシンプルなjQuery Datepickerカレンダーがあります。

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

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

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

今日の日付は、カレンダーを表示したときにユーザーにはっきりと強調表示されますが、ユーザーが何もしなくても、jQueryでテキストボックス自体にページの読み込み時の日付を事前入力するにはどうすればよいですか。時間の99％、今日の日付のデフォルトは彼らが望むものになるでしょう。

javascriptjqueryjquery-uidatejquery-ui-datepicker
229
Marcus

更新：これはChromeで動作しなくなったという報告があります。

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

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

chaining を利用することで、これはより簡潔になります。

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

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

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

この回答のコメントにあるように、日付ピッカーの初期化後にsetDateメソッド呼び出しを連鎖する

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

それはNOTだけで動作します

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

NOTE：許容されるsetDateパラメータが記述されています こちら

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

うまくいったようですが、もっと良い方法があるかもしれません。

71
lucas

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 プロパティを設定しても、関連するコントロールは更新されません。

57
Salman A

今日に設定します。

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

昨日に設定します。

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

そして、任意の日数の前またはの後今日の日付.

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

25
KirilleXXI

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

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

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

9
Marcus

このコードはあなたのデートピッカーのフォーマットを使うことを保証します：

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

フォーマットを再適用する必要はありません。日付ピッカーの初期化時に、日付ピッカー事前定義済みのものを使用します（割り当て済みの場合）。

7
Jeff Girard

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

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

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

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

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

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

ロード時に日付ピッカーを特定のデフォルト時間（私の場合は現在の日付）に設定するには、AND構文を使用して別の日付を選択するオプションがあります。

    $(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 
        });
  });
2
maozx

日付を事前入力するには、まずdatepickerを初期化してからsetDateパラメータ値を渡す必要があります。

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

2つの選択肢があります。

オプションA）あなたが入力をクリックしたときだけ、あなたのカレンダーで "アクティブ"としてマークします。

Js：

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                            }
                        }                         
                     );

Css：

div.ui-datepicker table.ui-datepicker-calendar .ui-state-active,
        div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active  {
            background: #1ABC9C;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            width: 24px; height: 24px;
        }​

オプションB）今日のデフォルトで入力してください。最初に日付ピッカーを入力する必要があります。

$（ "input.datepicker"）。datepicker（）。datepicker（ "setDate"、new Date（））;
1
Vero O

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

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });
1
Les Mizzell
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

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

0
gmail user

これを試して

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

日付ピッカーが既にパラメータで設定されている場合、.datepicker('setDate', new Date());を呼び出すのがうまくいかないときがあるので、これは私にとってよりうまく機能します。

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));
0
Alpha2k