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

Question

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

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

当然在 HTML 中...

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

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

score 574 · Accepted Answer

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

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

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

这不太简洁，利用链接允许它在 chrome 中工作（2019-06-04）：

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

score 227 · Accepted Answer

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

score 72 · Accepted Answer

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

似乎工作，但可能有更好的方法在那里..

score 59 · Accepted Answer

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

score 26 · Accepted Answer

设置为今天：

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

设置为昨天：

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

以此类推，在今天 date之前或之后的任意天数。

请参阅jQuery UI › 方法 › setDate。

score 9 · Accepted Answer

解决方案是：

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

谢谢灰鬼！

score 7 · Accepted Answer

7

这个对我有用。

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

于 2013-04-08T03:44:07.847 回答

score 6 · Accepted Answer

此代码将确保使用您的 datepicker 格式：

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

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

score 5 · Accepted Answer

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

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

我还设法对其进行了一些修剪，并且它也有效：

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

score 4 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

你有两个选择：

选项 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());

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

将 prettyDate 分配给必要的控件。

score 0 · Accepted Answer

试试这个

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

用这个：

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

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

score -1 · Accepted Answer

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

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

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

19 回答 19

Related

Reference