【问题标题】:Setting default date for Jqueryui datepicker为 Jqueryui datepicker 设置默认日期
【发布时间】:2012-07-02 20:25:05
【问题描述】:

我有一个用于生成报告的简单表单,我正在向其中添加一个 jqueryUI 日期选择器。我遇到的问题是当我尝试使用来自用户的信息重新填充字段时。

Jquery 似乎正在重置我的日期字段的默认值(目前,它在 7 月选择了 2 个不同的日期)。如何将其设置回用户提交的值?

我当前的代码:

<form method="post" action="">
        Username: <input type="text" size="12" name="username" required  value="foo" />
        Password: <input type="password" size="12" name="password" required value="bar" />
        Start Date: <input id="startdate" type="text" size="12" name="startday" required  value="06/28/2012" />
        End Date: <input id="enddate" type="text" size="12" name="endday" required  value="06/30/2012" />

        <script type="text/javascript">
            $(function(){
                $("#startdate").datepicker();
                $("#enddate").datepicker();
            });
        </script>
        <input type="submit">
    </form>

【问题讨论】:

  • @anonymousdownvotingislame 我做到了。当那不起作用时,我在这里发布。
  • answer中的第二句话。
  • 我不明白。究竟是什么问题?代码工作正常,日期选择器根据value 属性初始化,“选择”日期覆盖预填充的日期。那么问题出在哪里?
  • @SalmanA 由于某种原因,日期选择器没有使用 value 属性初始化,而是用 7 月的随机日期覆盖它

标签: javascript jquery jquery-ui


【解决方案1】:

如果该字段为空白,则设置在首次打开时突出显示的日期。通过 Date 对象或当前 dateFormat 中的字符串指定实际日期,或从今天开始的天数(例如 +7)或值和句点字符串('y' 表示年份,'m' 表示月份, 'w' 表示几周,'d' 表示几天,例如 '+1m +7d'),或者 null 表示今天。

使用指定的 defaultDate 选项初始化日期选择器。

$( ".selector" ).datepicker({ defaultDate: +7 });

在初始化之后获取或设置 defaultDate 选项。

//getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );

//setter
$( ".selector" ).datepicker( "option", "defaultDate", +7 );

http://jqueryui.com/demos/datepicker/#option-defaultDate

小提琴: http://jsfiddle.net/iambriansreed/gMNrZ/

【讨论】:

  • 我试过了,但它不起作用:$("#startdate").datepicker({ defaultDate: 06/26/2012 });
  • @MrGlass 我的回答中的第二句话。
  • 你是不是想让我试试这个? var d = new Date(06/26/12); $("#enddate").datepicker({ defaultDate: d }); 还是不行。
  • 对不起,var d = new Date('06/26/12'); $("#enddate").datepicker({ defaultDate: d }); 有效的日期对象,仍然不起作用。
【解决方案2】:

您可以在填写日期时执行此操作:

$( "#startdate" ).datepicker( "setDate" , date );

this

【讨论】:

  • 试过了,没用:$("#startdate").datepicker( "setDate" , 06/16/2012 );
  • 在设置日期之前试试这个..... $( "#startdate" ).datepicker( "option", "dateFormat", "dd-mm-yyyy" );
  • 每当我使用“setDate”时,日期选择器根本不起作用。另外,您的链接已损坏。
  • 那个链接没有坏掉,,,,,你必须到那个页面下面才能看到方法标签。
【解决方案3】:

http://docs.jquery.com/UI/Datepicker#option-minDate

  var dateOptions = { 
  dateFormat: "mm/dd/yy", 
  constrainInput: true, 
  gotoCurrent: true, 
  minDate: new Date()
  };

  $('.date').datepicker(dateOptions);

【讨论】: