如何在jQuery日期选择器文本框中预填今天的日期？

Question

我有一个非常简单的jQuery日期选择器日历：

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

当然，在HTML中也可以使用...

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

当用户打开日历时，今天的日期会很好地突出显示，但是我应该如何在页面加载时让jQuery预填充文本框本身的今天日期，而不需要用户做任何操作？99％的时间，今天的日期默认值就是他们想要的。

- Marcus

---

最受欢迎的答案比被采纳的答案更好。更改被采纳的答案会更好。 - ahmadali shafiee

我的相关问题：https://dev59.com/z4Lba4cB1Zd3GeqPmP3q - Adriano

@ahmadalishafiee（以及其他所有人）。当前被接受的解决方案是在2015年5月7日被接受的。 - Teepeemm

Answer 1

更新：有报道称该方法在Chrome中已经失效。

这种方法简洁且能够胜任工作（已过时）：

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

这段代码不够简洁，但使用链式调用可以让它在Chrome中正常运行（2019-06-04）：

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

- CiscoIPPhone

---

这是实际上对我起作用的代码，而不是被接受的解决方案。谢谢。 - Mehdiway

这样不起作用，首先您应该调用 $(".date-pick").datepicker();然后再调用 $(".date-pick").datepicker('setDate', new Date()); - Misha Akopov

最近浏览器更新后，在Chrome中不再起作用。 - Max Flex

@QuinnDaley 谢谢 - 我正在我的答案中添加一个警告。 - CiscoIPPhone

工作正常。我正在设置 $(".date-pick").datepicker().datepicker('setDate', new Date());。 - seebiscuit

Answer 2

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

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

或者在你的datepicker初始化之后链接调用setDate方法，正如在这个答案的评论中所指出的。

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

仅仅这样不能使其工作。

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

注意：可以使用的setDate参数在这里描述。

- Ravi Ram

---

使用jQueryUI 1.8版本，我发现这个解决方案是实现这个目标的唯一（明智）方法。 - brianz

$(".selector").datepicker().datepicker("setDate", new Date()); 这行代码可以正常运行，并且不会让 jQuery 重复搜索 DOM。 - abc123

很好，被接受的答案只是说 $（“.date-pick”）.datepicker（“setDate”，new Date（））; 而且如果没有先调用 $（“.date-pick”）.datepicker（）; 它是不起作用的。你的答案更好。 - Misha Akopov

Answer 3

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

看起来似乎可以工作，但可能有更好的解决方法存在...

- lucas

---

这个方案运行得相当不错，除了两件事：1）我原本希望使用jQuery方法来获取当前日期，但也许这并不重要。2）这个解决方案产生的值比今天的日期早一个月！ - Marcus

哦 - 你说得对！看这个 - http://www.w3schools.com/jsref/jsref_obj_date.asp - 月份是0-11，你需要加1..有趣的是，getDate是1-31，但getMonth是0-11.. - lucas

有一种更简单的方式...请看下面我的帖子。 - Ravi Ram

这个解决方案可以直接显示文本并同时设置日期，而CiscoIPPhone的解决方案需要另一步来显示值而不打开选择器。 - Afshar Mohebi

对于setDate，您还可以使用datepicker的常规相对表示法。例如要获取明天的日期，只需输入.datepicker('setDate', '+1d')。 - mutantacule

Answer 4

setDate() 方法设置日期并更新相关控件。下面是如何使用它:

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

演示

如文档所述，setDate() 可以接受 JavaScript Date 对象、数字或字符串：

新日期可以是一个 Date 对象或当前日期格式的字符串（例如“01/26/2009”），今天往后的天数（例如“+7”）或包含值和周期的字符串（“y”表示年，“m”表示月，“w”表示周，“d”表示日，例如“+1m +7d”），或 null 来清除所选日期。

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

- Salman A

---

为什么在你的演示中它可以正常工作，但当我把这段代码复制到我的网站上时，对话框在页面加载时一直弹出。 - chobo2

这对我有用-采纳的答案和上面的其他选项都没有作用。 - lydiat

这是比上面任何解决方案都要好得多的解决方案。 - adamj

目前来看，这是最佳答案，尽管我需要日期格式为“mm-dd-yy”以匹配日期选择器。 - John81

Answer 5

设置为今天：

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

设置为昨天：

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

可以在今天的日期之前或之后任何天数上设置日期。

参见jQuery UI › Methods › setDate。

- KirilleXXI

---

很好，正如其他人所提到的，你必须已经调用了datepicker()一次，因此 $(".date-pick").datepicker("setDate", '+0'); - jwbensley

这也符合我的期望，因为我的dateFormat需要与MySQL的日期格式（yy-mm-dd）匹配。这个setDate方法会在月份和日期前补零。 - jjohn

Answer 6

解决方案是：

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

感谢 grayghost！

- Marcus

Answer 7

这个对我有用。

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

- Celestz

Answer 8

这段代码将确保使用您的日期选择器格式：

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

无需重新应用格式，它使用您在日期选择器初始化时预定义的日期选择器（如果您已经分配了它！）;)

- Jeff Girard

Answer 9

David K Egghead的代码完美运行，谢谢！

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

我也设法将其修剪一下，它也起作用了：

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

- Gary Medina

Answer 10

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

- quocnguyen