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

IT技术 javascript jquery jquery-ui date jquery-ui-datepicker
2021-01-14 05:16:03

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

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

当然在 HTML 中...

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

当用户打开日历时,今天的日期会很好地突出显示给用户,但是如何让 jQuery 在页面加载时使用今天的日期预先填充文本框本身,而无需用户执行任何操作?99% 的情况下,今天的默认日期将是他们想要的。

6个回答

更新:有报告称这不再适用于 Chrome。

这很简洁并且可以完成工作(已过时):

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

这不太简洁,利用链接允许它在 chrome 中工作(2019-06-04):

$(".date-pick").datepicker().datepicker('setDate', new Date());
@QuinnDaley 谢谢 - 我在回答中添加警告。
2021-03-19 05:16:03
这行不通,首先你应该调用 $(".date-pick").datepicker(); 然后 $(".date-pick").datepicker('setDate', new Date());
2021-03-26 05:16:03
这是真正对我有用的解决方案,而不是公认的解决方案。谢谢
2021-03-27 05:16:03
作品。我设置$(".date-pick").datepicker().datepicker('setDate', new Date()); 寿
2021-03-29 05:16:03
最近浏览器更新后不再在 Chrome 中工作
2021-04-10 05:16:03

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

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

或在您的日期选择器初始化之后链接您的 setDate 方法调用,如对此答案的评论中所述

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

这将与刚工作

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

注意此处描述可接受的 setDate 参数

很好,接受的答案只说 $(".date-pick").datepicker("setDate", new Date()); 如果不先调用 $(".date-pick").datepicker(); 它就无法工作。你的回答要好得多
2021-03-13 05:16:03
$(".selector").datepicker().datepicker("setDate", new Date()); 会工作并且不会让 jQuery 搜索 DOM 两次。
2021-03-26 05:16:03
使用 jQueryUI 1.8 我发现这个解决方案是实现这一目标的唯一(理智)方法。
2021-04-10 05:16:03
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

似乎有效,但可能有更好的方法。

这个解决方案让我们直接显示文本并同时设置日期,而 CiscoIPPhone 的解决方案需要另一个步骤来显示值,而无需打开选择器。
2021-03-27 05:16:03
除了两件事外,这很有效:1)我有点希望使用 jQuery 方法来获取当前日期,但也许这无关紧要。2) 此解决方案产生的值恰好是今天日期前一个月!
2021-04-03 05:16:03
因为setDate您还可以使用 datepicker 的常用相对表示法,例如要获取第二天,只需键入.datepicker('setDate', '+1d').
2021-04-03 05:16:03
哦 - 你说得对!检查一下 - w3schools.com/jsref/jsref_obj_date.asp - 月份是 0-11 - 你必须加 1.. 奇怪的是,getDate 是 1-31,但 getMonth 是 0-11..
2021-04-04 05:16:03
有一个更简单的方法..见我下面的帖子。
2021-04-06 05:16:03

setDate()方法设置日期并更新相关控件。方法如下:

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

演示

如文档中所述,setDate()愉快地接受 JavaScript 日期对象、数字或字符串:

新日期可以是 Date 对象或当前日期格式的字符串(例如 '01/26/2009')、距今天的天数(例如 +7)或一串值和句点('y' 表示年,'m' 表示月,'w' 表示周,'d' 表示天,例如 '+1m +7d'),或 null 以清除所选日期。

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

为什么它在您的演示中有效。当我将此代码复制到我的站点时,当 pg 加载时,对话框会不断弹出。
2021-03-28 05:16:03
目前这个问题的最佳答案,尽管我需要日期格式为“mm-dd-yy”以匹配日期选择器。
2021-03-28 05:16:03
这对我有用 - 上面接受的答案和其他选项没有。
2021-04-07 05:16:03
这是一个比上述任何一个都好得多的解决方案。
2021-04-10 05:16:03

设置为今天

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

设置为昨天

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

今天日期之前之后的 任意天数依此类推

请参阅jQuery UI › 方法 › setDate

这也如我所愿,因为我的 dateFormat 需要匹配 MySQL 的日期格式 (yy-mm-dd)。此 setDate 向月和日添加零填充。
2021-03-13 05:16:03
太好了,正如其他人所提到的,您一定已经调用过 datepicker() 一次了, $(".date-pick").datepicker("setDate", '+0');
2021-03-22 05:16:03