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

时间：2022-08-26 12:07:17

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

**I have been stuck at a point on date selection the date will not shown on the text field when i click on the date **

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

i have got it by using addEventListener when clicking on submit button.

我点击提交按钮时使用addEventListener得到它。

i want to show the selected date in between

我想在两者之间显示所选日期

when click on the calender date .

sorry for poor english. thanks in advance .an example will be appriciated.

抱歉英语不好。在此先感谢。一个例子将是appriciated。

1 个解决方案

#1

0  

If you are interested to handle the date selection click you have to use onSelect like in:

如果您有兴趣处理日期选择,请单击以下内容,您必须使用onSelect:

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

#1

0  

If you are interested to handle the date selection click you have to use onSelect like in:

如果您有兴趣处理日期选择,请单击以下内容,您必须使用onSelect:

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

标签：

相关文章