Làm cách nào để tôi điền trước hộp văn bản jQuery Datepicker vào ngày hôm nay?

Tôi có một lịch Datepicker jQuery rất đơn giản:

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

và tất nhiên trong HTML ...

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

Ngày hôm nay được tô sáng độc đáo cho người dùng khi họ hiển thị lịch, nhưng làm cách nào để jQuery có thể tự điền trước hộp văn bản với ngày hôm nay khi tải trang mà không cần người dùng làm gì? 99% thời gian, mặc định ngày hôm nay sẽ là những gì họ muốn.

Cập nhật: Có những báo cáo này không còn hoạt động trong Chrome.

Điều này ngắn gọn và thực hiện công việc (lỗi thời):

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

Điều này ít súc tích hơn, sử dụng chuỗi cho phép nó hoạt động trong chrome (2019-06-04):

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

Bạn phải gọi FIRpicker đầu tiên ()> sau đó sử dụng 'setDate' để có được ngày hiện tại.

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

HOẶC chuỗi cuộc gọi phương thức setDate của bạn sau khi khởi tạo datepicker của bạn, như được ghi chú trong một nhận xét về câu trả lời này

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

Nó sẽ KHÔNG làm việc với chỉ

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

LƯU Ý : Các tham số setDate được chấp nhận được mô tả ở đây

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

dường như làm việc, nhưng có thể có một cách tốt hơn ra khỏi đó ..

Các setDate()phương pháp đặt ngày và cập nhật sự kiểm soát liên quan. Đây là cách thực hiện:

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

Bản giới thiệu

Như đã đề cập trong tài liệu, setDate()vui vẻ chấp nhận đối tượng Ngày, số hoặc chuỗi JavaScript:

Ngày mới có thể là một đối tượng Ngày hoặc một chuỗi ở định dạng ngày hiện tại (ví dụ: '01 / 26/2009 '), một số ngày kể từ hôm nay (ví dụ: +7) hoặc một chuỗi các giá trị và dấu chấm (' y 'cho năm, 'm' trong nhiều tháng, 'w' trong nhiều tuần, 'd' trong nhiều ngày, ví dụ '+ 1m + 7d') hoặc null để xóa ngày đã chọn.

Trong trường hợp bạn đang tự hỏi, thiết lập defaultDatethuộc tính trong hàm tạo không cập nhật điều khiển liên quan.

Đặt thành ngày hôm nay :

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

Đặt thành ngày hôm qua :

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

Và như vậy với bất kỳ số ngày trước hoặc sau ngày hôm nay .

Xem jQuery UI Phương thức làm quen với Java setDate .

Giải pháp là:

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

Cảm ơn Grayghost!

Mã này sẽ đảm bảo sử dụng định dạng ngày của bạn:

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

Không cần phải áp dụng lại định dạng, nó sử dụng định dạng ngày tháng được xác định trước bởi bạn khi khởi tạo datepicker (nếu bạn đã gán nó!);)

Cái này làm việc cho tôi

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

Mã của David K ​​Egghead hoạt động hoàn hảo, cảm ơn bạn!

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

Tôi cũng đã cố gắng để cắt nó một chút và nó cũng hoạt động:

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

Để đặt ngày tháng theo thời gian mặc định nhất định (ngày hiện tại trong trường hợp của tôi) khi tải, VÀ sau đó có tùy chọn để chọn một ngày khác, cú pháp là:

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

Để điền ngày trước, trước tiên, bạn phải khởi tạo ngày tháng, sau đó chuyển giá trị tham số setDate.

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

Chỉ cần nghĩ rằng tôi sẽ thêm hai xu của tôi. Công cụ chọn đang được sử dụng trên biểu mẫu thêm / cập nhật, do đó cần phải hiển thị ngày đến từ cơ sở dữ liệu nếu chỉnh sửa bản ghi hiện có hoặc hiển thị ngày hôm nay nếu không. Dưới đây là hoạt động tốt cho tôi:

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

Bạn có 2 lựa chọn:

TÙY CHỌN A) Đánh dấu là "hoạt động" trong lịch của bạn, chỉ khi bạn nhấp vào đầu vào.

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

TÙY CHỌN B) Nhập theo mặc định với ngày hôm nay. Trước tiên, bạn phải cư trú trong buổi hẹn hò.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", ngày mới ());

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

Chỉ định PrettyDate cho điều khiển cần thiết.

Thử cái này

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

Điều này hoạt động tốt hơn đối với tôi vì đôi khi tôi gặp khó khăn .datepicker('setDate', new Date());khi gọi vì nó gây rối nếu tôi có bộ đo ngày tháng được cấu hình với các tham số.

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

Dùng cái này:

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

Để có được ngày ở định dạng Ví dụ: 10 tháng 10 năm 2019 sẽ dễ hiểu hơn cho người dùng.

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

Nguồn: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html