我如何预填充一个jQuery Datepicker文本框与今天's日期?

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

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

当然在HTML中…

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

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

390788 次浏览
小开 
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
myDate.getFullYear();
$("#date_pretty").val(prettyDate);

似乎很管用，但也许还有更好的办法。

小开

解决方案是:

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

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

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

小开
最佳答案

更新:有报道称，这将不再适用于Chrome浏览器。

这句话简明扼要，能起到作用(过时):

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

这是不那么简洁的，使用链接允许它在chrome中工作(2019-06-04):

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

这段代码将确保使用你的datepicker的格式:

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

不需要重新应用格式，它使用预定义的datepicker -由你在datepicker初始化(如果你已经分配了它!);)

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

将prettyDate分配给必要的控件。

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

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

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

或者在初始化datepicker后将setDate方法调用链起来，如此答案的注释中所述

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

它将不工作与just

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

< >强注: 可接受的setDate参数描述这里

小开

设置为今天< em > < / em >:

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

设置为昨天< em > < / em >:

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

以此类推，任意天数< em > < / em >之前或< em > < / em >后 今天的日期。

看到jQuery UI >方法> setDate。

小开

为了在加载时将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
});
});
小开

setDate()方法设置日期并更新相关控件。以下是如何做到的:

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

Demo

正如文档中提到的，setDate()欣然接受JavaScript Date对象、数字或字符串:

新的日期可以是date对象，也可以是当前日期中的字符串 格式(如。'01/26/2009')、从今天算起的天数(例如+7)或a 值和周期字符串('y'表示年，'m'表示月，'w'表示 Weeks，“d”表示天。'+1m +7d')，或null以清除所选对象 日期。< / p >

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

小开

David K Egghead的代码工作得很完美，谢谢!

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

我也设法修剪了一下，它也有用:

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

这个方法对我很管用。

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

我只是想说几句。选择器用于添加/更新表单，因此如果编辑现有记录，则需要显示来自数据库的日期，如果没有则显示今天的日期。下面是为我工作良好:

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

试试这个

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

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

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

你有两个选择:

选择一个)标记为“活动”在你的日历，只有当你点击输入。

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)默认输入today。 你必须先填充datepicker。

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

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

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

用这个:

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

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


提交答案