Question

我是Javascript /客户端编程的新手但是我从所有关于JQuery UI的datepicker的帖子中了解到，datepicker的altfield将填充与datepicker相同的值，而无需创建函数在更改或选择时填充它。但是，我已为我拥有的2个日期选择器设置了我的altfield，但它们没有填充或我缺少一些配置。代码如下......

dates.js：

$(document).ready(function() {
// Datepicker Popups calender to Choose date.
$(function() {
$("#datepicker1").datepicker({
altField : "dbBegDate",
altFormat : "yy-mm-dd" }
);
$("#datepicker1").datepicker("setDate", "-1d");
$("#datepicker2").datepicker({
altField : "dbEndDate",
altFormat : "yy-mm-dd" }
);
$("#datepicker2").datepicker("setDate", "0d");
});

的index.html：

<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
    <title>BES Bad Bucket Report Date Selection</title>
    <link href="./css/jquery-ui.css" rel="stylesheet"> 
    <link href="./css/mydatepicker.css" rel="stylesheet">
    <style>...
    <body>
       <div class="container">
       <h2>Bad Bucket Report Dates Selector</h2>
       <div class="main">
       <form action="index.jsp" method="post">
       <label>Beginning Date :</label>
       <input type="text" name="beg_date" id="datepicker1"/>
       <!-- <input type="hidden" id="dbBegDate" name="dbBegDate"/>-->
       <input type="text" id="dbBegDate" name="dbBegDate"/>

      <label>Ending Date :</label>
      <input type="text" name="end_date" id="datepicker2"/>
      <input type="hidden" id="dbEndDate" name="dbEndDate"/>

      <input type="submit" id="submit" value="Submit">
 </div>
 </div>
 </body>
 </html>

当我尝试从index.jsp中的altfields获取日期时，它是一个空值。 datepicker值返回有效的选定日期

Answer 1

定义了JQuery UI API：

altField ：类型：选择器或jQuery或Element; 默认值：“”

因此，您可以使用“＃”匹配元素ID，例如altField : "#dbBegDate"。

修复此问题后，下面的代码工作。

$(document).ready(function() {
  // Datepicker Popups calender to Choose date.

  $("#datepicker1").datepicker({
    altField : "#dbBegDate",
    altFormat : "yy-mm-dd" 
  });
  $("#datepicker1").datepicker("setDate", "-1d");
  $("#datepicker2").datepicker({
    altField : "#dbEndDate",
    altFormat : "yy-mm-dd" 
  });
  $("#datepicker2").datepicker("setDate", "0d");
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
   <!-- <h2>Bad Bucket Report Dates Selector</h2>-->
   <div class="main">
     <form action="index.jsp" method="post">
     <label>Beginning Date :</label>
     <input type="text" name="beg_date" id="datepicker1"/>
     <!-- <input type="hidden" id="dbBegDate" name="dbBegDate"/>-->
     <input type="text" id="dbBegDate" name="dbBegDate"/>
    <br/>
    <label>Ending Date :</label>
    <input type="text" name="end_date" id="datepicker2"/>
    <input type="text" id="dbEndDate" name="dbEndDate"/>
    <br/>
    <input type="submit" id="submit" value="Submit"/>
  </div>
</div>

JQuery UI Datepicker altfield未填充

1 个答案: