Bagaimana cara mengisi kotak teks jQuery Datepicker dengan tanggal hari ini?


238

Saya memiliki kalender jQuery Datepicker yang sangat sederhana:

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

dan tentu saja dalam HTML ...

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

Tanggal hari ini disorot dengan baik untuk pengguna ketika mereka memunculkan kalender, tetapi bagaimana cara saya mendapatkan jQuery untuk mengisi ulang kotak teks itu sendiri dengan tanggal hari ini di memuat halaman, tanpa pengguna melakukan apa pun? 99% dari waktu, tanggal standar hari ini akan menjadi apa yang mereka inginkan.


7
Jawaban yang paling populer adalah lebih baik daripada jawaban yang diterima. lebih baik mengubah jawaban yang diterima.
ahmadali shafiee

pertanyaan saya yang berkaitan stackoverflow.com/questions/25602649/…
Adrien Be

1
@ahmadalishafiee (dan semua orang). Solusi yang saat ini diterima diterima pada 2015-05-07.
Teepeemm

Jawaban:


569

Pembaruan: Ada laporan yang tidak lagi berfungsi di Chrome.

Ini singkat dan melakukan pekerjaan (usang):

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

Ini kurang ringkas, memanfaatkan chaining memungkinkannya bekerja di chrome (2019-06-04):

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

3
Solusi ini elegan
disembunyikan

2
Ini adalah yang benar-benar bekerja untuk saya dan bukan solusi yang diterima. Terima kasih
Mehdiway

7
Ini tidak akan berfungsi, pertama-tama Anda harus memanggil $ (". Date-pick"). Datepicker (); dan kemudian $ (". date-pick"). datepicker ('setDate', Date baru ());
Misha Akopov

9
Tidak lagi berfungsi di Chrome setelah pembaruan browser terbaru
Max Flex

3
Bekerja Saya mengatur $(".date-pick").datepicker().datepicker('setDate', new Date()); tho
seebiscuit

221

Anda harus panggilan data pertama ()> lalu gunakan 'setDate' untuk mendapatkan tanggal saat ini.

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

ATAU rangkai panggilan metode setDate Anda setelah inisialisasi datepicker Anda, sebagaimana tercantum dalam komentar pada jawaban ini

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

Ini TIDAK akan bekerja dengan adil

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

CATATAN : Parameter setDate yang dapat diterima dijelaskan di sini


3
Menggunakan jQueryUI 1.8 saya menemukan solusi ini menjadi satu-satunya (waras) cara untuk mencapai ini.
brianz

13
$ (". selector"). datepicker (). datepicker ("setDate", Date baru ()); akan berfungsi dan tidak membuat jQuery mencari DOM dua kali.
abc123

1
Hebat, jawaban yang diterima mengatakan hanya $ (". Date-pick"). Datepicker ("setDate", Date baru ()); dan itu tidak berfungsi tanpa panggilan pertama $ (". date-pick"). datepicker (); jawaban Anda jauh lebih baik
Misha Akopov

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

tampaknya bekerja, tetapi mungkin ada cara yang lebih baik di luar sana ..


Ini bekerja cukup baik kecuali untuk dua hal: 1) Saya agak berharap untuk menggunakan metode jQuery untuk mendapatkan tanggal saat ini, tapi mungkin itu tidak masalah. 2) solusi ini menghasilkan nilai tepat satu bulan sebelum tanggal hari ini!
Marcus

2
OH - kamu benar! check it out - w3schools.com/jsref/jsref_obj_date.asp - bulan adalah 0-11 - Anda harus menambahkan 1 .. anehnya, getDate 1-31, tetapi getMonth 0-11 ..
lucas

3
Ada cara yang lebih mudah .. lihat posting saya di bawah ini.
Ravi Ram

Solusi ini memungkinkan untuk menampilkan teks secara langsung dan mengatur tanggal secara bersamaan, sementara solusi CiscoIPPhone memerlukan langkah lain untuk menunjukkan nilai tanpa membuka pemilih.
Afshar Mohebbi

4
Untuk setDateAnda juga dapat menggunakan notasi relatif relatif datepicker, misalnya untuk mendapatkan hari berikutnya ketikkan saja .datepicker('setDate', '+1d').
kosii

59

The setDate()Metode menetapkan tanggal dan update kontrol terkait. Begini caranya:

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

Demo

Seperti disebutkan dalam dokumentasi, setDate()dengan senang hati menerima objek Tanggal, JavaScript, atau string:

Tanggal baru dapat berupa objek Tanggal atau string dalam format tanggal saat ini (mis. '01 / 26/2009 '), beberapa hari dari hari ini (mis. +7) atau serangkaian nilai dan periode (' y 'untuk tahun, 'm' selama berbulan-bulan, 'w' selama berminggu-minggu, 'd' selama berhari-hari, misalnya '+ 1m + 7d'), atau nol untuk menghapus tanggal yang dipilih.

Jika Anda bertanya-tanya, pengaturan defaultDateproperti di konstruktor tidak memperbarui kontrol terkait.


1
Mengapa ini ada di demo Anda? Ketika saya menyalin kode ini ke situs saya dialog terus muncul ketika pg memuat.
chobo2

1
Ini bekerja untuk saya - jawaban yang diterima dan opsi lain di atas tidak.
lydiat

Ini adalah solusi yang jauh lebih baik daripada yang di atas.
adamj

Jawaban terbaik untuk pertanyaan ini pada saat ini meskipun saya membutuhkan format tanggal untuk menjadi "mm-dd-yy" agar cocok dengan pemilih tanggal.
John81

26

Setel ke hari ini :

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

Setel ke kemarin :

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

Demikian seterusnya dengan jumlah hari sebelum atau setelah tanggal hari ini .

Lihat jQuery UI ›Methods› setDate .


1
Hebat, seperti yang disebutkan orang lain, Anda pasti sudah menelepon datepicker () sekali sudah begitu,$(".date-pick").datepicker("setDate", '+0');
jwbensley

Ini juga berfungsi seperti yang saya inginkan, karena dateFormat saya harus cocok dengan format tanggal MySQL (yy-mm-dd). SetDate ini menambahkan nol padding pada bulan dan hari.
jjohn

9

Solusinya adalah:

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

Terima kasih grayghost!


7

Yang ini berhasil untuk saya.

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

6

Kode ini akan memastikan untuk menggunakan format datepicker Anda:

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

Tidak perlu mendaftar ulang format, ia menggunakan datepicker yang sudah ditentukan sebelumnya oleh Anda pada inisialisasi datepicker (jika Anda telah menetapkannya!);)


5

Kode David K ​​Egghead bekerja dengan sempurna, terima kasih!

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

Saya juga berhasil memangkasnya sedikit dan itu juga berhasil:

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

Untuk menetapkan datepicker ke waktu default tertentu (tanggal saat ini dalam kasus saya) saat memuat, DAN kemudian memiliki opsi untuk memilih tanggal lain sintaksnya adalah:

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

solusi ini bekerja untuk saya di chrome, yang lain yang tercantum di sini tidak
Mike Volmar

2

Untuk pra-mengisi tanggal, pertama-tama Anda harus menginisialisasi datepicker, kemudian lulus nilai parameter setDate.

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

1

Hanya berpikir saya akan menambahkan dua sen saya. Pemilih sedang digunakan pada formulir tambah / perbarui, jadi perlu untuk menunjukkan tanggal yang datang dari database jika mengedit catatan yang ada, atau menunjukkan tanggal hari ini jika tidak. Di bawah ini berfungsi dengan baik untuk saya:

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

1

Anda punya 2 opsi:

OPSI A) Ditandai sebagai "aktif" di kalender Anda, hanya ketika Anda mengklik input.

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

OPSI B) Input secara default dengan hari ini. Anda harus mengisi datepicker terlebih dahulu.

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

1
opsi A adalah baik karena pemilih tanggal dapat tetap kosong sampai tanggal akan dipilih pada titik mana defaultnya ke tanggal saat ini
waxingsatirical

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

Tetapkan prettyDate ke kontrol yang diperlukan.


0

Coba ini

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

0

Ini berfungsi lebih baik bagi saya karena kadang-kadang saya memiliki masalah memanggil .datepicker('setDate', new Date());karena berantakan jika jika saya memiliki datepicker yang sudah dikonfigurasi dengan parameter.

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

0

Gunakan ini:

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

Untuk Mendapatkan Tanggal dalam Format Misalnya: 10-Okt-2019 yang akan lebih dimengerti oleh pengguna.


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

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


Browser saya tidak mengenali fungsi asString (). Saya melakukannya seperti ini: $ (". Date-pick"). Datepicker ('setDate', Date baru ());
CiscoIPPhone

1
Saya pikir asString () harus toString ().
rg88

1
DatePicker Kevin Luck dan Jquery UI DatePicker adalah dua datepicker yang sangat berbeda.
Craig Hooghiem

@gamerzfuse datepicker UI jQuery didasarkan pada Kevin Luck.
Mathias Bynens
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.