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




jquery datepicker中文 (15)

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

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

当然在HTML中...

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

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


Answer #1

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

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

Answer #2

here方法设置日期并更新关联的控件。 这里是:

$("#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属性不会更新关联的控件。


Answer #3

设置为今天

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

设置为昨天

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

今天的日期 之前之后的任何天数都是如此。

查看jQuery UI> Methods> setDate


Answer #4

解决方案是:

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


Answer #5

你有两个选择:

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

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

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

将prettyDate分配给必要的控件。


Answer #8

这一个为我工作。

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

Answer #9

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

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

或者在你的datepicker初始化之后链接你的setDate方法调用,如对此答案的评论所述

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

不会与刚刚工作

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

注意here描述here可接受的setDate参数


Answer #10

David K Egghead的代码非常完美,谢谢!

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

我也设法修剪它,它也工作:

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

Answer #11

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

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

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


Answer #12

尝试这个

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


Answer #14

只是想我会增加我的两分钱。 拾取器正在添加/更新表单中使用,所以如果编辑现有记录,它需要显示来自数据库的日期,如果没有,则显示今天的日期。 下面的工作对我来说很好:

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

Answer #15

更新:有些报告在Chrome中不再适用。

这是简洁的,并做到这一点:

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




jquery-ui-datepicker