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

237

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.

Marcus
quelle
7
Die beliebteste Antwort ist besser als die akzeptierte Antwort. Es ist besser, die akzeptierte Antwort zu ändern.
Ahmadali Shafiee
meine verwandte Frage stackoverflow.com/questions/25602649/…
Adrien Be
1
@ahmadalishafiee (und alle anderen). Die derzeit akzeptierte Lösung wurde am 07.05.2015 akzeptiert.
Teepeemm

Antworten:

569

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());
CiscoIPPhone
quelle
3
Diese Lösung ist elegant
versteckt
2
Dies ist diejenige, die tatsächlich für mich funktioniert hat und nicht die akzeptierte Lösung. Vielen Dank
Mehdiway
7
Dies wird nicht funktionieren. Zuerst sollten Sie $ (". Date-pick"). Datepicker () aufrufen. und dann $ (". date-pick"). datepicker ('setDate', neues Datum ());
Mischa Akopov
9
Funktioniert nach dem letzten Browser-Update nicht mehr in Chrome
Max Flex
3
Funktioniert. Ich gründe $(".date-pick").datepicker().datepicker('setDate', new Date()); Tho
seebiscuit
221

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

Ravi Ram
quelle
3
Mit jQueryUI 1.8 fand ich, dass diese Lösung der einzige (vernünftige) Weg ist, dies zu erreichen.
Brianz
13
$ (". selector"). datepicker (). datepicker ("setDate", new Date ()); funktioniert und lässt jQuery das DOM nicht zweimal durchsuchen.
abc123
1
Gute, akzeptierte Antwort sagt nur $ (". Date-pick"). Datepicker ("setDate", new Date ()); und es funktioniert nicht ohne den ersten Aufruf von $ (". date-pick"). datepicker (); Ihre Antwort ist viel besser
Misha Akopov
71
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 ..

lucas
quelle
Dies funktioniert ziemlich gut, abgesehen von zwei Dingen: 1) Ich hatte gehofft, die jQuery-Methode zu verwenden, um das aktuelle Datum zu erhalten, aber vielleicht spielt es keine Rolle. 2) Diese Lösung erzeugt einen Wert genau einen Monat vor dem heutigen Datum!
Marcus
2
Oh, du hast Recht! check it out - w3schools.com/jsref/jsref_obj_date.asp - Monat ist 0-11 - du musst 1 hinzufügen .. seltsamerweise ist getDate 1-31, aber getMonth ist 0-11 ..
lucas
3
Es gibt einen einfacheren Weg. Siehe meinen Beitrag unten.
Ravi Ram
Mit dieser Lösung können Sie Text direkt anzeigen und gleichzeitig das Datum festlegen, während die Lösung von CiscoIPPhone einen weiteren Schritt benötigt, um den Wert anzuzeigen, ohne die Auswahl zu öffnen.
Afshar Mohebbi
4
Für setDateSie auch die übliche relative Schreibweise von picker, zum Beispiel am nächsten Tag geben Sie einfach verwenden können , zu erhalten .datepicker('setDate', '+1d').
Kosii
59

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.

Salman A.
quelle
1
Warum funktioniert es in Ihrer Demo? Wenn ich diesen Code in meine Site kopiere, erscheint der Dialog immer wieder, wenn die Seite geladen wird.
Chobo2
1
Dies hat bei mir funktioniert - die akzeptierte Antwort und andere Optionen oben haben nicht funktioniert.
Lydiat
Dies ist eine viel, viel bessere Lösung als jede der oben genannten.
Adamj
Die beste Antwort auf diese Frage zum gegenwärtigen Zeitpunkt, obwohl ich das Datumsformat "mm-tt-jj" brauchte, um mit der Datumsauswahl übereinzustimmen.
John81
26

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 .

KirilleXXI
quelle
1
Großartig, wie andere bereits erwähnt haben, müssen Sie schon einmal Datepicker () aufgerufen haben,$(".date-pick").datepicker("setDate", '+0');
jwbensley
Dies funktionierte auch wie gewünscht, da mein dateFormat mit dem Datumsformat von MySQL (yy-mm-dd) übereinstimmen muss. Dieses setDate fügt dem Monat und dem Tag keine Auffüllung hinzu.
John
9

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!

Marcus
quelle
7

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

Jeff Girard
quelle
7

Dieser hat für mich gearbeitet.

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

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()); 
Gary Medina
quelle
4
$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });
quocnguyen
quelle
2

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 
        });
  });
Maozx
quelle
Diese Lösung funktionierte für mich in Chrom, andere hier nicht
Mike Volmar
2

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());
Nadir
quelle
1

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; ?>
  });
Les Mizzell
quelle
1

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 ());
Vero O.
quelle
1
Option A ist gut, da die Datumsauswahl leer bleiben kann, bis ein Datum ausgewählt werden soll. Zu diesem Zeitpunkt wird standardmäßig das aktuelle Datum verwendet
Waxingsatirical
0
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

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

Google Mail-Benutzer
quelle
0

Versuche dies

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

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'));
Alpha2k
quelle
0

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.

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

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


quelle
Mein Browser hat die Funktion asString () nicht erkannt. Ich habe es so gemacht: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone
1
Ich denke, asString () sollte toString () sein.
rg88
1
Kevin Lucks DatePicker und der Jquery UI DatePicker sind zwei sehr unterschiedliche Datepicker.
Craig Hooghiem
Der Datepicker von @gamerzfuse jQuery UI basiert auf dem von Kevin Luck.
Mathias Bynens