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

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.

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

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

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 ..

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.

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 .

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!

Yang ini berhasil untuk saya.

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

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!);)

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

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

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

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

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

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; ?>
  });

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

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

Tetapkan prettyDate ke kontrol yang diperlukan.

Coba ini

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

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'));

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.

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

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