Wie fülle ich ein jQuery Datepicker-Textfeld mit dem heutigen Datum vor?

Ich habe einen sehr einfachen jQuery Datepicker-Kalender:

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

und natürlich im HTML ...

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

Das heutige Datum wird für den Benutzer beim Aufrufen des Kalenders gut hervorgehoben. Wie kann ich jQuery veranlassen, das Textfeld selbst mit dem heutigen Datum beim Laden der Seite vorab zu füllen, ohne dass der Benutzer etwas unternimmt? In 99% der Fälle entspricht der heutige Standardwert dem gewünschten Datum.

Update: Es gibt Berichte, dass dies in Chrome nicht mehr funktioniert.

Dies ist prägnant und erledigt den Job (veraltet):

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

Dies ist weniger präzise, ​​da die Verkettung die Verwendung in Chrom ermöglicht (04.06.2019):

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

Sie müssen zuerst Datepicker () aufrufen> und dann 'setDate' verwenden, um das aktuelle Datum abzurufen.

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

ODER verketten Sie Ihren setDate-Methodenaufruf nach Ihrer Datepicker-Initialisierung, wie in einem Kommentar zu dieser Antwort angegeben

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

Es wird NICHT mit nur funktionieren

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

HINWEIS : Akzeptable setDate-Parameter werden hier beschrieben

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

schien zu funktionieren, aber es könnte einen besseren Weg da draußen geben ..

Die setDate()Methode legt das Datum fest und aktualisiert das zugehörige Steuerelement. Hier ist, wie:

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

Demo

Akzeptiert, wie in der Dokumentation erwähnt, setDate()gerne das JavaScript-Datumsobjekt, die Nummer oder eine Zeichenfolge:

Das neue Datum kann ein Datumsobjekt oder eine Zeichenfolge im aktuellen Datumsformat (z. B. '01 / 26/2009 '), eine Anzahl von Tagen ab heute (z. B. +7) oder eine Zeichenfolge von Werten und Zeiträumen (' y 'für) sein Jahre, 'm' für Monate, 'w' für Wochen, 'd' für Tage, z. B. '+ 1m + 7d') oder null, um das ausgewählte Datum zu löschen.

Wenn Sie sich fragen, wird durch das Festlegen der defaultDateEigenschaft im Konstruktor das zugehörige Steuerelement nicht aktualisiert.

Auf heute einstellen :

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

Auf gestern setzen :

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

Und so weiter mit einer beliebigen Anzahl von Tagen vor oder nach dem heutigen Datum .

Siehe jQuery-Benutzeroberfläche ›Methoden› setDate .

Die Lösung ist:

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

Danke Grayghost!

Dieser Code stellt sicher, dass das Format Ihres Datepickers verwendet wird:

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

Das Format muss nicht erneut angewendet werden, es verwendet den von Ihnen bei der Datumsauswahl-Initialisierung vordefinierten Datumsauswahl (falls Sie ihn zugewiesen haben!);)

Dieser hat für mich gearbeitet.

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

Der Code von David K ​​Egghead hat perfekt funktioniert, danke!

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

Ich habe es auch geschafft, es ein wenig zu kürzen und es hat auch funktioniert:

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

Um die Datumsauswahl beim Laden auf eine bestimmte Standardzeit (in meinem Fall das aktuelle Datum) einzustellen und dann die Option zu haben, ein anderes Datum auszuwählen, lautet die Syntax:

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

Um das Datum vorab auszufüllen, müssen Sie zuerst den Datepicker initialisieren und dann den Parameterwert setDate übergeben.

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

Ich dachte nur, ich würde meine zwei Cent hinzufügen. Die Auswahl wird in einem Formular zum Hinzufügen / Aktualisieren verwendet. Daher muss das Datum aus der Datenbank angezeigt werden, wenn ein vorhandener Datensatz bearbeitet wird, oder das heutige Datum, wenn nicht. Unten funktioniert gut für mich:

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

Sie haben 2 Möglichkeiten:

OPTION A) Wird in Ihrem Kalender nur dann als "aktiv" markiert, wenn Sie auf die Eingabe klicken.

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

OPTION B) Standardmäßig mit heute eingeben . Sie müssen zuerst den Datepicker ausfüllen.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", new Date ());

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

Weisen Sie das hübsche Datum dem erforderlichen Steuerelement zu.

Versuche dies

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

Dies funktioniert besser für mich, da ich manchmal Probleme beim Aufrufen habe, .datepicker('setDate', new Date());da es zu Problemen kommt, wenn ich den Datepicker bereits mit Parametern konfiguriert habe.

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

Benutze das:

$(".datepicker").datepicker({ dateFormat: 'dd-M-yy' }).datepicker('setDate', new Date());

So erhalten Sie ein Datum im Format: 10.10.2019, das für Benutzer verständlicher ist.

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

Quelle: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html