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.