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

https://stackoverflow.com/questions/233553

04-07-2019
|

質問

非常にシンプルなjQuery Datepickerカレンダーがあります：

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

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

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

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

解決

更新：Chromeで機能しなくなったレポートがあります。

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

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

これは簡潔ではありません。チェインを使用すると、クロム（2019 -06-04）：

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

他のヒント

datepicker（）を最初に呼び出す必要があります＆gt; then 「setDate」を使用して現在の日付を取得します。

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

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

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

これは動作しないだけでは機能しません

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

注：許容されるsetDateパラメーターはで説明されていますこちら

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

機能しているように見えますが、もっと良い方法があるかもしれません。

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 を設定しますコンストラクターのプロパティは、関連するコントロールを更新しません。

今日に設定：

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

昨日に設定：

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

など、または 今日の日付の任意の日数>。

jQuery UI＆＃8250;をご覧ください。メソッド＆＃8250; setDate 。

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

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

greyghostに感謝します！

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

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

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

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

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

David K Eggheadのコードは完璧に機能しました、ありがとう！

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

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

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

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

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

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

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

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

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

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

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

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

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

これを試してください

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

datepickerが既にパラメーターで構成されている場合、混乱するため、 .datepicker（ 'setDate'、new Date（））; の呼び出しで問題が発生することがあるため、これは私にとってはうまく機能します。

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

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

出典： http://www.kelvinluck.com /assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow