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

Posted 2023-02-22

【中文标题】如何使用今天的日期预先填充 jQuery Datepicker 文本框？

【英文标题】：How do I pre-populate a jQuery Datepicker textbox with today's date?

【发布时间】：2010-09-19 00:18:48

【问题描述】：

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

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

当然还有 html...

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

今天的日期在用户调出日历时很好地突出显示，但是我如何让 jQuery 在页面加载时使用今天的日期预先填充文本框本身，而不需要用户做任何事情？ 99% 的情况下，今天的默认日期将是他们想要的。

【问题讨论】：

最受欢迎的答案比公认的答案更好。最好更改接受的答案。

我的相关问题***.com/questions/25602649/…

@ahmadalishafiee（以及其他所有人）。当前接受的解决方案已于 2015-05-07 接受。

【参考方案1】：

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

这很简洁并且可以完成工作（已过时）：

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

这不太简洁，使用chaining 允许它在 chrome (2019-06-04) 中工作：

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

【讨论】：

这是真正为我工作的解决方案，而不是公认的解决方案。谢谢

这不行，首先你应该调用 $(".date-pick").datepicker();然后 $(".date-pick").datepicker('setDate', new Date());

在最近的浏览器更新后不再在 Chrome 中工作

@QuinnDaley 谢谢 - 我在回答中添加了警告。

有效。我正在设置$(".date-pick").datepicker().datepicker('setDate', new Date()); tho

【参考方案2】：

您必须首先调用 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 参数here

【讨论】：

使用 jQueryUI 1.8 我发现这个解决方案是完成此任务的唯一（理智）方法。

$(".selector").datepicker().datepicker("setDate", new Date());可以工作，并且不会让 jQuery 搜索 DOM 两次。

很好，接受的答案只说 $(".date-pick").datepicker("setDate", new Date());如果没有第一次调用 $(".date-pick").datepicker(); 它就不起作用你的答案好多了

【参考方案3】：

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

似乎可行，但可能有更好的方法......

【讨论】：

这很好用，除了两件事：1）我有点希望使用jQuery方法来获取当前日期，但也许没关系。 2）这个解决方案产生一个恰好在今天之前一个月的值！

哦——你是对的！看看 - w3schools.com/jsref/jsref_obj_date.asp - 月份是 0-11 - 你必须加 1.. 奇怪的是，getDate 是 1-31，但 getMonth 是 0-11..

有一种更简单的方法..请参阅下面的帖子。

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

对于setDate，您还可以使用日期选择器的常用相对表示法，例如，只需键入.datepicker('setDate', '+1d') 即可获取第二天。

【参考方案4】：

setDate() 方法设置日期并更新关联的控件。方法如下：

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

Demo

如文档中所述，setDate() 很乐意接受 javascript Date 对象、数字或字符串：

新日期可能是一个日期对象，也可能是当前日期中的一个字符串 格式（例如 '01/26/2009'）、从今天开始的天数（例如 +7）或 值和句点字符串（'y' 表示年份，'m' 表示月份，'w' 表示 周，“d”表示天，例如'+1m +7d'), 或 null 清除选中的 日期。

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

【讨论】：

为什么它在您的演示中有效。当我将此代码复制到我的站点时，当 pg 加载时对话框不断弹出。

这对我有用 - 上面接受的答案和其他选项没有。

这是一个比上述任何一个都好得多的解决方案。

目前这个问题的最佳答案，尽管我需要日期格式为“mm-dd-yy”以匹配日期选择器。

【参考方案5】：

设置为今天：

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

设置为昨天：

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

以此类推，之前或之后 今天的日期 >.

见jQuery UI › Methods › setDate。

【讨论】：

太好了，正如其他人所提到的，您一定已经调用过 datepicker() 一次，$(".date-pick").datepicker("setDate", '+0');

这也如我所愿，因为我的 dateFormat 需要匹配 mysql 的日期格式 (yy-mm-dd)。此 setDate 将零填充添加到月份和日期。

【参考方案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);
);

谢谢灰鬼！

【参考方案7】：

这个对我有用。

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

【参考方案8】：

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

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

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

【参考方案9】：

David K Egghead 的代码运行良好，谢谢！

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

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

$(".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】：

为了在加载时将日期选择器设置为某个默认时间（在我的情况下为当前日期），然后可以选择另一个日期，语法为：

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

【讨论】：

这个解决方案在 chrome 中对我有用，这里列出的其他解决方案没有

【参考方案12】：

你有两个选择：

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

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

选项 B) 默认输入今天。 您必须先填充日期选择器。

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

【讨论】：

选项 A 很好，因为日期选择器可以保持空白，直到要选择一个日期，此时它默认为当前日期

【参考方案13】：

只是想我会加两分钱。选择器正在添加/更新表单上使用，因此如果编辑现有记录，则需要显示来自数据库的日期，否则需要显示今天的日期。以下对我来说很好用：

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

【参考方案14】：

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

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

【参考方案15】：

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

将 prettyDate 分配给必要的控件。

【参考方案16】：

试试这个

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

【参考方案17】：

这对我来说效果更好，因为有时我在调用 .datepicker('setDate', new Date()); 时遇到麻烦，因为如果我已经为 datepicker 配置了参数，它就会变得混乱。

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

【参考方案18】：

使用这个：

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

以格式获取日期，例如：2019 年 10 月 10 日，这对用户来说更容易理解。

【参考方案19】：

$(function()

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

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

【讨论】：

我的浏览器无法识别 asString() 函数。我是这样做的： $(".date-pick").datepicker('setDate', new Date());

我认为 asString() 应该是 toString()。

Kevin Luck 的 DatePicker 和 Jquery UI DatePicker 是两个截然不同的日期选择器。

@gamerzfuse jQuery UI 的日期选择器是基于 Kevin Luck 的。