如何用今天的日期预填充jQuery Datepicker文本框?

I have a very simple jQuery Datepicker calendar:

我有一个非常简单的jQuery Datepicker日历:

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

and of course in the HTML...

当然在HTML中…

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

Today's date is nicely highlighted for the user when they bring up the calendar, but how do I get jQuery to pre-populate the textbox itself with today's date on page load, without the user doing anything? 99% of the time, the today's date default will be what they want.

当用户打开日历时，可以很好地突出显示今天的日期，但是如何让jQuery在页面加载时用今天的日期预填充文本框本身，而用户不需要做任何事情呢?99%的情况下，今天的日期违约将是他们想要的。

18 个解决方案

#1

Update: There are reports this no longer works in Chrome.

更新:有报告说这在Chrome中不再有效。

This is concise and does the job:

这是一个简洁的工作:

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

#2

You must FIRST call datepicker() > then use 'setDate' to get the current date.

您必须首先调用datepicker() >，然后使用'setDate'获取当前日期。

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

OR chain your setDate method call after your datepicker initialization, as noted in a comment on this answer

或者在您的datepicker初始化之后将setDate方法调用链锁，如在此答案上的注释中所指出的那样。

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

It will NOT work with just

它不能用正义来工作

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

NOTE : Acceptable setDate parameters are described here

注意:这里描述了可接受的setDate参数

#3

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

seemed to work, but there might be a better way out there..

似乎行得通，但也许有更好的办法。

#4

The setDate() method sets the date and updates the associated control. Here is how:

setDate()方法设置日期并更新相关控件。这里是:

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

Demo

演示

As mentioned in documentation, setDate() happily accepts the JavaScript Date object, number or a string:

正如文档中提到的，setDate()愉快地接受JavaScript日期对象、数字或字符串:

The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

新的日期可以是日期对象或当前日期格式的字符串(例如。'01/26/2009')，指从今天开始的几天(如+7)或一系列的数值和周期('y'表示年份，'m'表示月份，'w'表示星期，'d'表示天数，例如:'+1m +7d')，或null来清除选定的日期。

In case you are wondering, setting defaultDate property in the constructor does not update the associated control.

如果您想知道，在构造函数中设置defaultDate属性不会更新关联的控件。

#5

Set to today:

今天设置为:

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

Set to yesterday:

昨天设置为:

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

And so on with any number of days before or after today's date.

在今天之前或之后的任意天数。

See jQuery UI › Methods › setDate.

参见jQuery UI方法›setDate

#6

The solution is:

解决方案是:

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

Thanks grayghost!

谢谢grayghost !

#7

This code will assure to use your datepicker's format:

此代码将确保使用您的datepicker格式:

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

No need to re-apply format, it uses the datepicker predefined-one by you on datepicker initialization (if you have assigned it!) ;)

不需要重新应用格式，它使用您在datepicker初始化中预先定义的datepicker(如果您分配了它);

#8

This one worked for me.

这个对我有用。

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

#9

David K Egghead's code worked perfectly, thank you!

David K Egghead的代码运行得很好，谢谢!

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

I also managed to trim it a little and it also worked:

我还把它修剪了一下，它也起了作用:

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

#10

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

#11

In order to set the datepicker to a certain default time (the current date in my case) on loading, AND then have the option to choose another date the syntax is :

为了在加载时将datepicker设置为某个默认时间(我这里是当前日期)，然后可以选择另一个日期，语法是:

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

#12

Just thought I'd add my two cents. The picker is being used on an add/update form, so it needed to show the date coming from the database if editing an existing record, or show today's date if not. Below is working fine for me:

我只是想把我的两分钱加上去。选择器正在添加/更新表单中使用，因此需要显示来自数据库的日期(如果编辑现有记录的话)，或者显示今天的日期(如果不编辑的话)。以下是我的工作情况:

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

#13

To pre-populate date, first you have to initialise datepicker, then pass setDate parameter value.

要预填充日期，首先必须初始化datepicker，然后传递setDate参数值。

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

#14

You've got 2 options:

你有2个选择:

OPTION A) Marks as "active" in your calendar, only when you click in the input.

选项A)在日历中标记为“活动的”，仅当您单击输入时。

Js:

Js:

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                            }
                        }                         
                     );

Css:

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

OPTION B) Input by default with today. You've to populate first the datepicker .

选项B)默认输入为today。您必须首先填充datepicker。

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

#15

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

Assign the prettyDate to the necessary control.

将漂亮的日期分配给必要的控件。

#16

Try this

试试这个

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

#17

This works better for me as sometimes I have troubles calling .datepicker('setDate', new Date()); as it messes if if i have the datepicker already configured with parameters.

对我来说，这对我来说更好，因为有时我遇到了麻烦。datepicker(“setDate”，new Date());如果我已经用参数配置了datepicker，就会出现混乱。

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

#18

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

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

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