添加带有整数的日期选择器日期

Question

我的代码包含三个字段，

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

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

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

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

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

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

Answer 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;
  }
  }

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

添加带有整数的日期选择器日期

Adding datepicker date with integer

javascript

jquery

jquery-ui

datepicker

jquery-ui-datepicker