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


237

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

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

当然还有HTML ...

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

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


7
最受欢迎的答案要好于公认的答案。最好更改接受的答案。
ahmadali shafiee,2012年


1
@ahmadalishafiee(和其他所有人)。当前接受的解决方案于2015-05-07接受。
Teepeemm '18

Answers:


569

更新:有报告称此功能不再适用于Chrome。

这是简洁明了的工作(已过时):

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

这不太简洁,利用链接使其可以在chrome中工作(2019-06-04):

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

3
此解决方案很优雅
隐藏

2
这实际上是为我工作的,而不是公认的解决方案。谢谢
Mehdiway 2013年

7
这将不起作用,首先应调用$(“。date-pick”)。datepicker();。然后$(“。date-pick”)。datepicker('setDate',new Date());
Misha Akopov

9
不再工作在Chrome浏览器的最近更新后
最大的Flex

3
作品。我设置$(".date-pick").datepicker().datepicker('setDate', new Date()); 寿
seebiscuit

221

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


3
使用jQueryUI 1.8,我发现此解决方案是完成此任务的唯一(明智)方法。
brianz 2012年

13
$(“。selector”)。datepicker()。datepicker(“ setDate”,new Date()); 将起作用,并且不会使jQuery搜索DOM两次。
2013年

1
伟大的,被接受的答案说只有$(“。date-pick”)。datepicker(“ setDate”,new Date()); 如果没有先调用$(“。date-pick”)。datepicker();,它将无法正常工作。您的答案要好得多
Misha Akopov

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

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


除以下两点外,此方法效果很好:1)我有点希望使用jQuery方法来获取当前日期,但是也许没关系。2)此解决方案会在今天之前一个月产生一个值!
马库斯

2
哦-你是对的!检查出来-w3schools.com/jsref/jsref_obj_date.asp-月是0-11-您必须添加1.。奇怪的是,getDate是1-31,但是getMonth是0-11 ..
lucas

3
有一个更简单的方法..请参阅下面的我的帖子。
拉维·拉姆

该解决方案让我们直接显示文本并同时设置日期,而CiscoIPPhone的解决方案需要另一步骤来显示值而无需打开选择器。
Afshar Mohebbi 2012年

4
因为setDate您还可以使用datepicker的通常相对表示法,例如要输入第二天的数据.datepicker('setDate', '+1d')
kosii 2012年

59

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构造函数中的 set 属性不会更新关联的控件。


1
为什么在您的演示中它起作用了。当我将此代码复制到我的站点时,在pg加载时对话框会不断弹出。
chobo2 2012年

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

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

尽管我需要将日期格式设置为“ mm-dd-yy”以匹配日期选择器,但目前该问题的最佳答案。
约翰81年

26

设置为今天

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

设置为昨天

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

以此类推,直到今天之前之后的 任何天数。

参见jQuery UI›方法› setDate


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

由于我的dateFormat需要匹配MySQL的日期格式(yy-mm-dd),因此这也可以按我希望的那样工作。此setDate为月份和日期添加零填充。
jjohn

9

解决方案是:

$(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!


7

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

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

无需重新应用格式,它在datepicker初始化时使用了datepicker预定义的一个(如果已分配!);)


7

这个为我工作。

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

5

David K Egghead的代码运行完美,谢谢!

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

我也设法将它修剪了一点,并且也起作用了:

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

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

2

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

    $(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中对我有效,在此列出的其他解决方案均无效
Mike Volmar

2

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

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

1

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

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

1

您有2个选择:

选项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)默认情况下为今天输入。您必须首先填充datepicker。

$(“ input.datepicker”)。datepicker()。datepicker(“ setDate”,new Date());

1
选项A很好,因为日期选择器可以保持空白,直到要选择一个日期为止,该日期默认为当前日期
蜡笔画

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

将prettyDate分配给必要的控件。


0

试试这个

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

0

这对我来说更好,因为.datepicker('setDate', new Date());如果我已经使用参数配置了日期选择器,有时会遇到麻烦,因为混乱了。

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

0

用这个:

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

要获取日期格式的日期,例如:2019年10月10日,这对于用户而言将更加容易理解。


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

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

1
Kevin Luck的DatePicker和Jquery UI DatePicker是两个截然不同的datepicker。
Craig Hooghiem

@gamerzfuse jQuery UI的日期选择器基于Kevin Luck的日期选择器。
Mathias Bynens 2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.