Question

在我的表单上，我有三个字段。

发布日期
有效期（月）
有效期

如果您要输入签发日期和有效期字段，请输入到期日字段进行计算和填写。我该如何实现？有效期可能会有所不同。提前致谢。

<div class="tarehe" data-validate = "Date of Issue is required">Date of Issue
<input class="inputpekee" type="date" name="issue_date" placeholder="Date of Issue">
</div>                  
<div class="tarehe" data-validate = "Validity Period is required">
<input class="inputpekee" type="number" name="validity" placeholder="Validity Period(Months)" min="1" max="60">                     
</div>
<div class="tarehe" data-validate = "Expiry Date is required">Expiry Date
<input class="inputpekee" type="date" name="expiry_date" placeholder="Expiry Date">                     
</div>

我希望格式为dd / mm / yyyy

Answer 1

这是使用moment.js

的一种方式

let dateOfIssue = moment();
    
    let validityMonths = 48;
    
    let expiryDate = moment(dateOfIssue).add(validityMonths, 'months');
    
    let el = document.getElementById('expiryDate');
    
    el.innerHTML = expiryDate.format('DD/MM/YYYY');

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</head>

<body>
<p id="expiryDate"></p>
</body>
</html>

Answer 2

您也可以使用setMonth

$('#validity').change(function(){
  let dt = new Date($('#issue_date').val());
  dt.setMonth( dt.getMonth() + parseInt($(this).val()));
  let output = dt.getDate()+'/'+(dt.getMonth()+1)+'/'+dt.getFullYear()
  $('#expiry_date').val(output);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="tarehe" data-validate = "Date of Issue is required">Date of Issue
<input class="inputpekee" type="date" id="issue_date" name="issue_date" placeholder="Date of Issue">
</div>                  
<div class="tarehe" data-validate = "Validity Period is required">
<input class="inputpekee" type="number" id="validity" name="validity" placeholder="Validity Period(Months)" min="1" max="60">                     
</div>
<div class="tarehe" data-validate = "Expiry Date is required">Expiry Date
<input class="inputpekee" disabled name="expiry_date" placeholder="Expiry Date" id="expiry_date">                     
</div>

Answer 3

不需要任何库JS就能做到这一点，只需学习文档即可：

获取日期值（valueAsDate）=> https://developer.mozilla.org/fr/docs/Web/API/HTMLInputElement

DateTimeFormat => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat

示例：

const FormOption = { day: '2-digit',  month: '2-digit',  year: 'numeric' };

document.getElementById('My-Form').onsubmit = function(evt) {
  evt.preventDefault();

  console.log('issue_date : ', new Intl.DateTimeFormat('fr-FR', FormOption).format(this.issue_date.valueAsDate) );
  
  console.log('expiry_date : ',new Intl.DateTimeFormat('fr-FR', FormOption).format(this.expiry_date.valueAsDate) );

}

<form id="My-Form">
  <label class="tarehe" data-validate="Date of Issue is required">Date of Issue
    <input class="inputpekee" type="date" name="issue_date" placeholder="Date of Issue">
  </label>
  <label class="tarehe" data-validate="Validity Period is required">
    <input class="inputpekee" type="number" name="validity" placeholder="Validity Period(Months)" min="1" max="60">
  </label>
  <label class="tarehe" data-validate="Expiry Date is required">Expiry Date
    <input class="inputpekee" type="date" name="expiry_date" placeholder="Expiry Date">
  </label>
  <button type="submit">get Values</button>
</form>

从月份表格计算日期

3 个答案: