我需要在日期日历的文本输入字段上提供一点帮助

时间:2016-09-05 21:19:01

标签: javascript jquery html



<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
     
      <p>Enter Date: <input type="text" id="datepicker-13"></p>
      
      <form>
    
           <input type="submit" />
    </form>

<p id="outty"></p>

    <script>
      function processAge(event){
        var colour = colourField.value,
            output;
        
        switch (colour) {
          case "09/06/2016":
            output = "09/06/2016";
            break;
          case "09/07/2016":
            output = "09/07/2016";
            break;
          case "09/08/2016":
            output = "09/08/2016!";
            break;
          default:
            output = "I don't have anything to say about that";
        }

        document.getElementById("outty").innerHTML=output; 
        
        event.preventDefault();
      }
      var form = document.forms[0],
          colourField = document.getElementById('datepicker-13');

      form.addEventListener('submit', processAge, false);
    </script>
   </body>
</html
&#13;
&#13;
&#13;

**我被困在日期选择的某个点上,当我点击日期时,日期不会显示在文本字段上**

我在点击提交按钮时使用addEventListener获得了它。

我希望在点击日历日期时显示

之间的选定日期。

抱歉英语不好。 在此先感谢。一个例子将被评估。

1 个答案:

答案 0 :(得分:0)

如果您有兴趣处理日期选择,请点击,您必须使用onSelect,如:

&#13;
&#13;
var form, colourField;

$(function() {
  $( "#datepicker-13" ).datepicker({
    onSelect: function(dateText, inst) {
      document.getElementById("outty").innerHTML = dateText;
    }
  })
  .datepicker("show");

  form = document.forms[0];
  colourField = document.getElementById('datepicker-13');

  form.addEventListener('submit', processAge, false);

});

 function processAge(event){
   var colour = colourField.value,
       output;

   switch (colour) {
     case "09/06/2016":
       output = "09/06/2016";
       break;
     case "09/07/2016":
       output = "09/07/2016";
       break;
     case "09/08/2016":
       output = "09/08/2016!";
       break;
     default:
       output = "I don't have anything to say about that";
   }

   document.getElementById("outty").innerHTML=output;

   event.preventDefault();
 }
&#13;
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<p>Enter Date: <input type="text" id="datepicker-13"></p>

<form>

    <input type="submit" />
</form>

<p id="outty"></p>
&#13;
&#13;
&#13;