Jak wstępnie wypełnić pole tekstowe jQuery Datepicker dzisiejszą datą?


237

Mam bardzo prosty kalendarz jQuery Datepicker:

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

i oczywiście w HTML ...

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

Dzisiejsza data jest ładnie podświetlona dla użytkownika, gdy wywołuje on kalendarz, ale jak mogę uzyskać jQuery, aby wstępnie wypełniało samo pole tekstowe dzisiejszą datą przy ładowaniu strony, bez wykonywania przez użytkownika żadnych działań? 99% czasu, dzisiejsza domyślna data będzie tym, czego chcą.


7
Najpopularniejsza odpowiedź jest lepsza niż odpowiedź zaakceptowana. lepiej zmienić przyjętą odpowiedź.
ahmadali shafiee


1
@ahmadalishafiee (i wszyscy inni). Aktualnie akceptowane rozwiązanie zostało przyjęte w dniu 2015-05-07.
Teepeemm

Odpowiedzi:


569

Aktualizacja: istnieją raporty, które nie działają już w Chrome.

Jest to zwięzłe i działa (przestarzałe):

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

Jest to mniej zwięzłe, użycie łańcuchów pozwala mu pracować w chromie (2019-06-04):

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

3
To rozwiązanie jest eleganckie
ukryte

2
To właśnie dla mnie zadziałało, a nie zaakceptowane rozwiązanie. Dziękuję
Mehdiway

7
To nie zadziała, najpierw powinieneś wywołać $ (". Date-pick"). Datepicker (); a następnie $ (". date-pick"). datepicker ('setDate', new Date ());
Misha Akopov,

9
Nie działa już w Chrome po ostatniej aktualizacji przeglądarki
Max Flex,

3
Pracuje. Mam ustawienie $(".date-pick").datepicker().datepicker('setDate', new Date()); tho
seebiscuit

221

Musisz najpierw wywołać datepicker ()>, a następnie użyć „setDate”, aby uzyskać bieżącą datę.

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

LUB połącz swoje wywołanie metody setDate po inicjalizacji datepicker, jak zauważono w komentarzu do tej odpowiedzi

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

To będzie NIE działać z just

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

UWAGA : Akceptowane parametry setDate opisano tutaj


3
Używając jQueryUI 1.8 znalazłem to rozwiązanie jako jedyny (rozsądny) sposób na osiągnięcie tego.
brianz,

13
$ („selektor”). datepicker (). datepicker („setDate”, nowa data ()); będzie działać i nie sprawi, że jQuery przeszuka DOM dwukrotnie.
abc123

1
Świetna, zaakceptowana odpowiedź mówi tylko $ (". Date-pick"). Datepicker ("setDate", new Date ()); i nie działa bez pierwszego wywołania $ (". date-pick"). datepicker (); twoja odpowiedź jest znacznie lepsza
Misha Akopov

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

wydawało się, że działa, ale może istnieć lepsze wyjście.


Działa to całkiem dobrze, z wyjątkiem dwóch rzeczy: 1) Miałem nadzieję, że użyję metody jQuery, aby uzyskać bieżącą datę, ale może to nie ma znaczenia. 2) to rozwiązanie generuje wartość dokładnie miesiąc przed dzisiejszą datą!
Marcus

2
OH - masz rację! sprawdź to - w3schools.com/jsref/jsref_obj_date.asp - miesiąc to 0-11 - musisz dodać 1 .. co ciekawe, getDate to 1-31, ale getMonth to 0-11 ..
lucas

3
Jest łatwiejszy sposób .. zobacz mój post poniżej.
Ravi Ram

To rozwiązanie pozwala wyświetlać tekst bezpośrednio i jednocześnie ustawiać datę, podczas gdy rozwiązanie CiscoIPPhone wymaga kolejnego kroku, aby pokazać wartość bez otwierania selektora.
Afshar Mohebbi

4
Dla setDatemożna również użyć zwykłego względną notację datepicker, na przykład aby dostać następnego dnia po prostu wpisać .datepicker('setDate', '+1d').
kosii

59

setDate()Metoda ustawia datę i aktualizuje powiązany kontroli. Oto jak:

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

Próbny

Jak wspomniano w dokumentacji, z setDate()przyjemnością akceptuje obiekt, numer lub ciąg JavaScript Date:

Nowa data może być obiektem Date lub ciągiem w bieżącym formacie daty (np. „01/26/2009”), liczbą dni od dzisiaj (np. +7) lub ciągiem wartości i okresów („y” dla lata, „m” dla miesięcy, „w” dla tygodni, „d” dla dni, np. „+ 1m + 7d”) lub zero, aby wyczyścić wybraną datę.

Jeśli się zastanawiasz, ustawienie defaultDatewłaściwości w konstruktorze nie aktualizuje powiązanej kontrolki.


1
Dlaczego jest w twoim demo, działa. Kiedy kopiuję ten kod na moją stronę, okno dialogowe wyskakuje, gdy ładuje się pg.
chobo2

1
To działało dla mnie - zaakceptowana odpowiedź i inne powyższe opcje nie.
lydiat

To jest o wiele lepsze rozwiązanie niż którekolwiek z powyższych.
adamj

Najlepsza odpowiedź na to pytanie w chwili obecnej, chociaż potrzebowałem formatu daty „mm-dd-rr”, aby pasował do selektora dat.
John81,

26

Ustaw na dziś :

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

Ustaw na wczoraj :

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

I tak dalej z dowolną liczbą dni przed lub po dzisiejszej dacie .

Zobacz interfejs użytkownika jQuery ›Metody› setDate .


1
Świetnie, jak wspomnieli inni, musieliście już raz wywołać datepicker (),$(".date-pick").datepicker("setDate", '+0');
jwbensley

Działa to również tak, jak chciałem, ponieważ mój dateFormat musi pasować do formatu daty MySQL (rr-mm-dd). Ten setDate dodaje zero dopełnienia do miesiąca i dnia.
jjohn

9

Rozwiązaniem jest:

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

Dzięki grayghost!


7

Ten kod zapewni użycie formatu narzędzia datepicker:

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

Nie ma potrzeby ponownego stosowania formatu, używa on predefiniowanego datepicker-jeden podczas inicjowania datepicker (jeśli go przypisałeś!);)


7

Ten działał dla mnie.

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

5

Kod Davida K Egghead działał idealnie, dziękuję!

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

Udało mi się też trochę przyciąć i zadziałało:

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

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

2

Aby ustawić datepicker na określony domyślny czas (bieżąca data w moim przypadku) przy ładowaniu, ORAZ wtedy możesz wybrać inną datę, składnia jest następująca:

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

to rozwiązanie działało dla mnie w chromie, inne nie wymienione tutaj
Mike Volmar

2

Aby wstępnie wypełnić datę, najpierw należy zainicjować datepicker, a następnie przekazać wartość parametru setDate.

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

1

Pomyślałem, że dodam dwa centy. Selektor jest używany w formularzu dodawania / aktualizacji, więc musiał edytować datę pochodzącą z bazy danych, jeśli edytujesz istniejący rekord, lub pokazywać dzisiejszą datę, jeśli nie. Poniżej działa dobrze dla mnie:

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

1

Masz 2 opcje:

OPCJA A) Zaznacza jako „aktywne” w kalendarzu, tylko po kliknięciu wejścia.

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

OPCJA B) Wprowadź domyślnie z dzisiaj. Musisz wypełnić najpierw datepicker.

$ („input.datepicker”). datepicker (). datepicker („setDate”, nowa data ());

1
opcja A jest dobra, ponieważ selektor daty może pozostać pusty, dopóki nie zostanie wybrana data, w której domyślnie ustawiona jest bieżąca data
waxingsatirical

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

Przypisz prettyDate do niezbędnej kontroli.


0

Spróbuj tego

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

0

Działa to dla mnie lepiej, ponieważ czasami mam problemy z dzwonieniem, .datepicker('setDate', new Date());ponieważ zadziera, jeśli mam ustawiony wcześniej parametr z datownikiem.

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

0

Użyj tego:

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

Aby uzyskać datę w formacie Np .: 10-paź-2019, która będzie bardziej zrozumiała dla użytkowników.


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

Źródło: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html


Moja przeglądarka nie rozpoznała funkcji asString (). Zrobiłem to tak: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone

1
Myślę, że asString () powinien być toString ().
rg88

1
DatePicker Kevina Lucka i DatePicker interfejsu użytkownika Jquery są dwoma bardzo różnymi dobieraczami dat.
Craig Hooghiem

@Gamerzfuse jQuery UI datepicker jest oparty na Kevin Luck.
Mathias Bynens,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.