用整数添加日期选择器日期答案

【问题标题】：Adding datepicker date with integer用整数添加日期选择器日期
【发布时间】：2018-02-06 05:46:47
【问题描述】：

我的代码包含三个字段，

日期选择器
整数值的输入字段
用于显示结果日期的输入框。

我选择日期选择器日期，它以dd/mm/yyyy 格式读取，例如06/02/2018。现在我在下一个输入框中输入一个整数值，然后单击一个按钮以在将整数添加到所选日期后显示结果日期。结果，我的日期以mm-dd-yyyy 格式显示，该整数添加到所选日期的月份部分，即如果我在所选日期06/02/2018 上添加3 天，它应该显示09/02/2018，但结果日期显示为@ 987654326@.

如何解决？欢迎任何见解和意见。

<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="panel panel-primary">
  <div class="panel-heading">Registration Parameters</div>
  <br><br>
  <form class="form-horizontal" method="post" action="" >
    <div class="form-group">
      <div class="col-md-6">
        <div class="col-md-4">
          <label for="username" class="control-label"><b>Date from:</b></label>
        </div>
        <div class="col-md-8 input-group date" >
          <input id="txtDate"  name="title"  class="form-control" placeholder="Start Date" value="" >
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-4">
          <label for="username" class="control-label"><b>New Date formed:</b></label>
        </div>
        <div class="col-md-8">
          <div class="input-group date">
            <input id="follow_Date"  name="days_for_start" disabled class="form-control"  value="" >
          </div>
        </div>
      </div>
      <br><br><br><br>
      <input type="button" id="btn"  value="Check New Date" />
      <div class="col-md-6">
        <div class="col-md-4">
          <label for="username" class="control-label"><b>Extension days:</b></label>
        </div>
        <div class="col-md-8">
          <input id="extdays" type="text" name="days_for_end"  class="form-control"  required="" value="" >
        </div>
      </div>
    </div>
  </form>
</div>
      
<script type="text/javascript">
  $(document).ready(function () {
    $('#txtDate').datepicker({
      dateFormat:'mm/dd/yy',
    });
  });

  function getdate() {
    var tt = document.getElementById('txtDate').value;
    var input = document.getElementById('extdays').value;
    if (input == "" || input==null){
      input =0
    }
    if(tt != ''){
      var date = new Date(tt);
      var newdate = new Date(tt);
      newdate.setDate(newdate.getDate() + parseInt(input));

      var dd = newdate.getDate();
      var mm = newdate.getMonth() + 1;
      var y = newdate.getFullYear();

      var someFormattedDate = mm + '/' + dd + '/' + y;
    
      document.getElementById('follow_Date').value = someFormattedDate;
    }
  }
</script>

【问题讨论】：

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

我做了一些更改，现在可以查看此答案

<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="form-group">
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>Date from:</b></label>
                </div>
                <div class="col-md-8 input-group date" >
                <input id="txtDate"  name="title" maxlength="150" class="form-control" placeholder="Start Date" value="" >

                </div>
              </div>
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>New Date formed:</b></label>
                </div>
                <div class="col-md-8">
                  <div class="input-group date">
               <input id="follow_Date" type="text" name="days_for_start" disabled class="form-control"  value="" >
                </div>
                </div>
                </div><br><br> <br><br>
                 <input type="button" onclick="getdate()" value="Check New Date" />
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>Extension days:</b></label>
                </div>
                <div class="col-md-8">
               <input id="extdays" type="text" name="days_for_end"  class="form-control"  required="" value="" >
                </div>
              </div>
              </div>
              <script>
  $(document).ready(function () {
            $('#txtDate').datepicker({
   
    dateFormat:'mm/dd/yy',
   
});
    });


  function getdate() {
  var tt = document.getElementById('txtDate').value;
  var input = document.getElementById('extdays').value;
  if (input == "" || input==null){
    input =0
  }
  if(tt != ''){
    var date = new Date(tt);
    var newdate = new Date(tt);


    newdate.setDate(newdate.getDate() + parseInt(input));

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;
    
    document.getElementById('follow_Date').value = someFormattedDate;
  }
  }

  </script>

【讨论】：

我也试过这个。你发布的 sn-p 和我的脚本一样。
是的，我做了一些改变。一个是从您的代码中删除 jquery.min.js
是的，我看到了。但还是朋友。它也在做同样的事情
这是因为日期格式，用 mm/dd/yy 格式检查它是否正常工作。我正在检查 dd/mm/yy 格式
我已经应用了这两种格式，但结果完全一样。

【解决方案2】：

希望这会有所帮助

<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="form-group">
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>Date from:</b></label>
                </div>
                <div class="col-md-8 input-group date" >
                <input id="txtDate"  name="title" maxlength="150" class="form-control" placeholder="Start Date" value="" >

                </div>
              </div>
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>New Date formed:</b></label>
                </div>
                <div class="col-md-8">
                  <div class="input-group date">
               <input id="follow_Date" type="text" name="days_for_start" disabled class="form-control"  value="" >
                </div>
                </div>
                </div><br><br> <br><br>
                 <input type="button" onclick="getdate()" value="Check New Date" />
              <div class="col-md-6">
                <div class="col-md-4">
                  <label for="username" class="control-label"><b>Extension days:</b></label>
                </div>
                <div class="col-md-8">
               <input id="extdays" type="text" name="days_for_end"  class="form-control"  required="" value="" >
                </div>
              </div>
              </div>
              <script>
  $(document).ready(function () {
            $('#txtDate').datepicker({
   
    dateFormat:'mm/dd/yy',
   
});
    });


  function getdate() {
  var tt = document.getElementById('txtDate').value;
  var input = document.getElementById('extdays').value;
  if (input == "" || input==null){
    input =0
  }
  if(tt != ''){
    var date = new Date(tt);
    var newdate = new Date(tt);


    newdate.setDate(newdate.getDate() + parseInt(input));

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = dd + '/' + mm + '/' + y;
    
    document.getElementById('follow_Date').value = someFormattedDate;
  }
  }

  </script>

【讨论】：

【解决方案3】：

您好，您需要将 DateString 解析为 Date -

tt = $.datepicker.parseDate("dd/mm/yy",tt);

您更新的脚本是-

 function getdate() {  
  var tt = document.getElementById('txtDate').value;
  var input = document.getElementById('extdays').value;
  if (input == "" || input==null){
    input =0
  }
  if(tt != ''){
   tt = $.datepicker.parseDate("dd/mm/yy",tt);
    var date = new Date(tt);
    var newdate = new Date(tt);


    newdate.setDate(newdate.getDate() + parseInt(input));

    var dd = newdate.getDate();
    var mm = newdate.getMonth() + 1;
    var y = newdate.getFullYear();

    var someFormattedDate = mm + '/' + dd + '/' + y;

    document.getElementById('follow_Date').value = someFormattedDate;
  }
  }

【讨论】：

你需要添加 tt = $.datepicker.parseDate("dd/mm/yy",tt);在你的脚本代码中。
console.log(someFormattedDate) 说 $.datepicker 未定义。
是的，你的小提琴工作正常。对我来说，正如我之前所说的console.log(someFormattedDate) says $.datepicker is undefined.

【解决方案4】：

终于有结果了。必须解析输入日期并转换，

    <script>  

    $(document).ready(function () {

       $( "#txtDate" ).datepicker({
            //dateFormat: "dd/mm/yy"
            dateFormat: "dd/mm/yy"
        });
      });
    function getdate() {
        var tt = document.getElementById('txtDate').value;
        var input = document.getElementById('extdays').value;
        if (input == "" || input==null)
        {
          input =0
        }


    var initial = tt.split(/\//).reverse().join('/'); // to change the format

        var date = new Date(initial);
        var newdate = new Date(date);


       newdate.setDate(newdate.getDate() + parseInt(input));

        var dd = newdate.getDate();
        var mm = newdate.getMonth() + 1;
        var y = newdate.getFullYear();

        var someFormattedDate = dd + '/' + mm + '/' + y;
        document.getElementById('follow_Date').value = someFormattedDate;
    }
</script>

【讨论】：