it-swarm.com.de

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 ist für den Benutzer schön hervorgehoben, wenn der Kalender aufgerufen wird. Wie kann ich jQuery jedoch dazu bringen, das Textfeld selbst mit dem heutigen Datum beim Laden der Seite auszufüllen, ohne dass der Benutzer etwas unternimmt? In 99% der Fälle ist das heutige Datum das, was sie wollen.

226
Marcus

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

Das ist knapp und macht die Arbeit:

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

Zuerst müssen Sie datepicker ()> aufrufen, dann setDate verwenden, um das aktuelle Datum abzurufen.

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

ODER verketten Sie den Aufruf der setDate-Methode nach der Initialisierung des Datumsaufrufs, wie in einem Kommentar zu dieser Antwort angegeben 

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

Es wird mit NICHT funktionieren 

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

NOTE: Akzeptierbare setDate-Parameter werden beschrieben hier

218
Ravi Ram
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 ..

71
lucas

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

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

Demo

Wie in der Dokumentation erwähnt, akzeptiert setDate() gerne das JavaScript Date-Objekt, die Nummer oder eine Zeichenfolge:

Das neue Datum kann ein Date-Objekt oder eine Zeichenfolge im aktuellen Datum sein Format (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 Jahre, 'm' für Monate, 'w' für Wochen, 'd' für Tage, z. B. '+ 1m + 7d')) oder null, um das ausgewählte .__ zu löschen. . Datum.

Falls Sie sich fragen, setzen Sie die Einstellung defaultDate property im Konstruktor nicht das zugehörige Steuerelement.

56
Salman A

Stellen Sie heute ein:

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

Stellen Sie gestern ein:

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

Und so weiter mit einer beliebigen Anzahl von Tagen vor oder nachher _ ​​heutiges Datum.

Siehe jQuery-Benutzeroberfläche ›Methoden› setDate .

25
KirilleXXI

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

Vielen Dank, Grayghost!

9
Marcus

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 wird der von Ihnen bei der Datumspicker-Initialisierung vordefinierte Datepicker verwendet (sofern Sie ihn zugewiesen haben!)

7
Jeff Girard

Dieser hat für mich gearbeitet.

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

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 etwas zu schneiden und es hat auch funktioniert:

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

Um das Datum vorab aufzufüllen, müssen Sie zunächst datepicker initialisieren und dann den setDate-Parameterwert übergeben.

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

Sie haben 2 Möglichkeiten:

OPTION A) Markiert in Ihrem Kalender als "aktiv", nur wenn Sie in 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", neues Datum ());
1
Vero O

Ich dachte nur, ich würde meine zwei Cents hinzufügen. Die Auswahlfunktion wird in einem Formular zum Hinzufügen/Aktualisieren verwendet. Daher muss das Datum, das aus der Datenbank stammt, angezeigt werden, wenn ein vorhandener Datensatz bearbeitet wird, oder das heutige Datum. Unten arbeitet 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; ?>
  });
1
Les Mizzell

Um den Datepicker beim Laden auf eine bestimmte Standardzeit (in meinem Fall das aktuelle Datum) einzustellen, UND haben Sie die Möglichkeit, ein anderes Datum zu wählen.

    $(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 
        });
  });
1
maozx
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

Weisen Sie das prettyDate der erforderlichen Kontrolle zu.

0
gmail user

Versuche dies 

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

Dies funktioniert besser für mich, da manchmal Probleme beim Aufruf von .datepicker('setDate', new Date()); auftreten. 

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