Bir jQuery Datepicker metin kutusunu bugünün tarihiyle nasıl önceden doldururum?


238

Çok basit bir jQuery Datepicker takvimim var:

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

ve elbette HTML'de ...

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

Bugünün tarihi, takvimi açtıklarında kullanıcı için güzel bir şekilde vurgulanır, ancak kullanıcı herhangi bir şey yapmadan, metin kutusunun sayfa yükündeki günün tarihi ile önceden doldurulması için jQuery'i nasıl edinebilirim? Zamanın% 99'u, bugünün varsayılan tarihi istedikleri şey olacaktır.


7
En popüler cevap kabul edilen cevaptan daha iyidir. kabul edilen cevabı değiştirmek daha iyidir.
ahmadali shafiee


1
@ahmadalishafiee (ve diğer herkes). Şu anda kabul edilen çözüm 2015-05-07 tarihinde kabul edildi.
Teepeemm

Yanıtlar:


569

Güncelleme: Artık Chrome'da çalışmayan raporlar var.

Bu özlü ve iş yok (eski):

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

Bu daha az özlüdür, zincirleme kullanmak kromda çalışmasına izin verir (2019-06-04):

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

3
Bu çözüm zarif
gizli

2
Bu benim için işe yarayan, kabul edilen çözüm değil. Teşekkür ederim
Mehdiway

7
Bu işe yaramaz, önce $ (". Date-pick"). Datepicker (); ve sonra $ (". tarih alma"). tarih seçici ('setDate', yeni Tarih ());
Misha Akopov

9
Son tarayıcı güncellemesinden sonra artık Chrome'da çalışmıyor
Max Flex

3
İşler. Ben ayarlıyorum $(".date-pick").datepicker().datepicker('setDate', new Date()); Tho
seebiscuit

221

İLK çağrı tarih seçici ()> sonra geçerli tarihi almak için 'setDate' kullanın.

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

VEYA, bu yanıtla ilgili bir yorumda belirtildiği gibi, tarih seçici başlatmanızın ardından setDate yöntemi çağrınızı zincirleyin

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

Bu olacak DEĞİL sadece çalışmak

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

NOT : Kabul edilebilir setDate parametreleri burada açıklanmaktadır


3
JQueryUI 1.8 kullanarak bu çözümü bunu başarmanın tek (akılcı) yolu olarak buldum.
brianz

13
$ (". selector"). datepicker (). datepicker ("setDate", yeni Tarih ()); jQuery DOM'da iki kez arama yapmaz.
abc123

1
Harika, kabul edilen cevap sadece $ (". Date-pick"). Datepicker ("setDate", yeni Date ()); ve $ (". date-pick"). datepicker (); cevabınız çok daha iyi
Misha Akopov

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

iş gibi görünüyordu, ama orada daha iyi bir yol olabilir ..


Bu iki şey dışında oldukça iyi çalışıyor: 1) Geçerli tarihi almak için jQuery yöntemini kullanmayı umuyordum, ama belki de önemli değil. 2) Bu çözüm, bugünün tarihinden tam bir ay önce bir değer üretir!
Marcus

2
OH - haklısın! check it out - w3schools.com/jsref/jsref_obj_date.asp - ay 0-11 - 1 eklemeniz gerekecek .. merakla, getDate 1-31, ancak getMonth 0-11 ..
lucas

3
Daha kolay bir yol var .. aşağıdaki yazıma bakınız.
Ravi Ram

Bu çözüm, metni doğrudan gösterelim ve tarihi aynı anda ayarlayalım, CiscoIPPhone'un çözümü, seçiciyi açmadan değeri göstermek için başka bir adıma ihtiyaç duyuyor.
Afshar Mohebbi

4
Çünkü tarih setDateüssünün her zamanki göreli gösterimini de kullanabilirsiniz, örneğin ertesi günü sadece yazın .datepicker('setDate', '+1d').
kosii

59

setDate()Yöntem tarihi belirler ve ilgili denetim günceller. İşte nasıl:

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

gösteri

Belgelerde belirtildiği gibi setDate(), JavaScript Tarih nesnesini, numarasını veya bir dizeyi memnuniyetle kabul eder:

Yeni tarih, bir Date nesnesi veya geçerli tarih biçimindeki bir dize (ör. '01 / 26/2009 '), bugünden birkaç gün (örneğin +7) veya bir değer ve nokta dizesi (' y ') olabilir. yıl, aylar için 'm', haftalar için 'w', günler için 'd', örneğin '+ 1m + 7d') veya seçilen tarihi silmek için null.

Eğer ayar merak ediyor defaultDateyapıcı tesise gelmez ilişkili denetim güncelleyin.


1
Neden demoda çalışıyor. Bu kodu siteme kopyaladığımda, pg yüklendiğinde iletişim kutusu açılır.
chobo2

1
Bu benim için çalıştı - kabul edilen cevap ve yukarıdaki diğer seçenekler olmadı.
lydiat

Bu, yukarıdakilerden çok daha iyi bir çözümdür.
adamj

Şu anda bu soru için en iyi yanıt tarih tarih seçici eşleştirmek için "aa-gg-yy" olması gereken tarih biçimine rağmen.
John81

26

Bugüne ayarla :

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

Dün olarak ayarla :

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

Ve böylece bugünün tarihinden önce veya sonra herhangi bir sayıda gün ile devam edin .

Bkz. JQuery UI ›Yöntemler› setDate .


1
Harika, diğerleri de söylediğim gibi, zaten bir kez datepicker () çağırmış olmalısınız,$(".date-pick").datepicker("setDate", '+0');
jwbensley

DateFormat'ımın MySQL'in tarih biçimiyle (yy-aa-gg) eşleşmesi gerektiğinden bu da istediğim gibi çalıştı. Bu setDate, ay ve güne sıfır dolgu ekler.
jjohn

9

Çözüm şudur:

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

Teşekkürler greyhost!


7

Bu benim için çalıştı.

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

6

Bu kod, tarih seçmeninizin biçimini kullanmanızı sağlayacaktır:

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

Biçimi yeniden uygulamanıza gerek yoktur, tarih seçici başlatma işleminde sizin tarafınızdan önceden tanımlanmış bir tarih seçici kullanır (atadıysanız!);)


5

David K ​​Egghead'in kodu mükemmel çalıştı, teşekkürler!

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

Ayrıca biraz düzeltmeyi başardım ve ayrıca çalıştı:

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

Tarih seçiciyi yükleme sırasında belirli bir varsayılan saate (benim durumumdaki geçerli tarih) ayarlamak için, sözdiziminin başka bir tarih seçme seçeneğine sahip olmasını sağlayın:

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

Bu çözüm benim için
kromda

2

Tarihi önceden doldurmak için önce tarih seçiciyi başlatmanız, sonra setDate parametre değerini iletmeniz gerekir.

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

1

Sadece iki sentimi ekleyeceğimi düşündüm. Seçici bir ekleme / güncelleme formunda kullanılıyor, bu nedenle mevcut bir kaydı düzenlerseniz veritabanından gelen tarihi veya yoksa bugünün tarihini göstermesi gerekiyordu. Aşağıda benim için iyi çalışıyor:

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

1

2 seçeneğiniz var:

SEÇENEK A) Takviminizde, yalnızca girdiyi tıklattığınızda "etkin" olarak işaretler.

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

SEÇENEK B) Bugün ile varsayılan olarak girin. Önce tarih seçiciyi doldurmanız gerekiyor.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", yeni Tarih ());

1
A seçeneği iyidir, çünkü tarih seçici geçerli tarih olan bir tarih seçilinceye kadar boş kalabilir
waxingsatirical

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

PrettyDate öğesini gerekli kontrole atayın.


0

Bunu dene

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

0

Bazen benim için .datepicker('setDate', new Date());zaten parametreleri ile yapılandırılmış tarih seçici varsa ben karışıklık olarak arama sorunları var bu benim için daha iyi çalışır .

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

0

Bunu kullan:

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

Biçimdeki Tarihi Almak İçin Örn: 10-Oct-2019, kullanıcılar için daha anlaşılır olacaktır.


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

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


Tarayıcım asString () işlevini tanımadı. Bunu şöyle yaptım: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone

1
Ben asString () toString () olması gerektiğini düşünüyorum.
rg88

1
Kevin Luck'ın DatePicker ve Jquery UI DatePicker iki çok farklı datepicker'dur.
Craig Hooghiem

@gamerzfuse jQuery Kullanıcı Arayüzü'nün tarih seçicisi Kevin Luck'ın tarihine dayanmaktadır.
Mathias Bynens
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.