Wie kann ich die pre-füllen Sie ein jQuery-Datepicker-Textfeld mit dem heutigen Datum?

Question

Ich habe eine sehr einfache jQuery Datepicker-Kalender:

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

und natürlich in die HTML...

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

Das heutige Datum ist sehr schön hervorgehoben, um den Benutzer, wenn Sie bringen die Kalender, aber wie bekomme ich jQuery, um pre-füllen Sie die textbox selbst mit dem heutigen Datum auf der Seite laden, ohne dass der Benutzer etwas zu tun?99% der Zeit, die das heutige Datum standardmäßig wird das sein, was Sie wollen.

Answer 1

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

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

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

Dies ist weniger prägnant, unter Verwendung von Verkettungs ermöglicht es in Chrom zu arbeiten (2019 -06-04):

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

Answer 2

Sie müssen zuerst anrufen Datepicker ()> und Verwendung 'setDate' das aktuelle Datum zu erhalten.

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

oder eine Kette Ihres setDate Methodenaufruf nach dem Datepicker Initialisierung, wie es in einem Kommentar zu dieser Antwort darauf hingewiesen,

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

Es wird nicht Arbeit mit nur

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

Hinweis : Acceptable setDate Parameter beschrieben werden: hier

Answer 3

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

schien zu funktionieren, aber es könnte ein besserer Weg gibt, ..

Answer 4

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

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

Demo

Wie in der Dokumentation erwähnt, akzeptiert setDate() glücklich das JavaScript Date-Objekt, eine Zahl oder eine Zeichenfolge:

  

Der neue Termin kann ein Date-Objekt oder eine Zeichenfolge in dem aktuellen Datum sein   Format (zum Beispiel '01 / 26/2009), eine Anzahl von Tagen von heute (zum Beispiel 7) oder ein   String von Werten und Zeiten ( ‚Y‘ für die Jahre, ‚m‘ für Monate, ‚w‘ für   Wochen, ‚d‘ für Tage, z.B. ‚+ 1 M + 7d‘) oder null, die ausgewählte löschen   Datum.

Falls Sie sich fragen, das Setzen von defaultDate Eigenschaft im Konstruktor nicht aktualisieren der zugehörigen Steuer.

Answer 5

auf heute :

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

auf gestern :

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

Und so weiter mit einem beliebigen Anzahl von Tagen vor oder nach den heutigen Datum .

Siehe jQuery UI> Methoden> setDate .

Answer 6

Die Lösung lautet:

$(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!

Answer 7

Dieser Code wird versichern Ihre picker das Format zu verwenden:

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

Sie brauchen nicht erneut zu bewerben Format, verwendet es die Datumsauswahl vordefiniert-on durch Sie auf picker Initialisierung (wenn Sie es zugewiesen haben!);)

Answer 8

Dieser arbeitete für mich.

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

Answer 9

David K Eierkopf code funktionierte perfekt, vielen Dank!

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

Ich habe es auch geschafft, schneiden Sie es ein wenig und es auch funktioniert:

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

Answer 10

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

Answer 11

Um die Datepicker auf eine bestimmte Standardzeit (das aktuelle Datum in meinem Fall) beim Laden zu setzen, und dann die Möglichkeit hat, ein anderes Datum, die Syntax zu wählen ist:

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

Answer 12

So füllen Datum, zuerst müssen Sie picker initialisieren, dann setDate Parameterwert übergeben.

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

Answer 13

dachte, ich würde meine zwei Cent hinzufügen. Der Picker auf einem Add / Update-Formular verwendet wird, so ist es erforderlich, um das Datum aus der Datenbank kommen zu zeigen, wenn eine bestehende Datensatz bearbeiten, oder bis zum heutigen Datum zeigen, wenn nicht. Im Folgenden wird für mich gut funktioniert:

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

Answer 14

Sie haben 2 Möglichkeiten:

OPTION A) Marks als "aktiv" in Ihrem Kalender, nur, wenn Sie in der 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) Input standardmäßig mit heute. Sie haben zuerst die Datumsauswahl zu füllen.

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

Answer 15

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

Weisen Sie die prettyDate auf die notwendige Kontrolle.

Answer 16

Versuchen Sie, diese

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

Answer 17

Das funktioniert besser für mich, wie manchmal habe ich Probleme nennen .datepicker('setDate', new Date()); wie es wenn vermasselt, wenn ich die Datepicker bereits konfiguriert mit Parametern haben.

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

Answer 18

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

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