如何根据给定的开始日期和期限动态设置结束日期？

Question

我想根据学期类型（年、半年、季度、月）和学期开始日期动态设置学期结束日期。

因此，如果我们将期限设置为年度，并且开始日期设置为 03/10/2016，则期限结束应设置为 03/10/2017。

到目前为止，这是我所拥有的，但不确定如何处理 Term Type（每年 == 12 个月等）。我还收到日期格式的控制台错误。任何帮助或指点将不胜感激。

.field
  = f.label :term_start_date, 'Term Start', class: 'label'
  .input
    = f.date_field :term_start_date, id: 'termStart'
.field
  = f.label :term_end_date, 'Term End', class: 'label'
  .input
    = f.date_field :term_end_date, id: 'termEnd'
    :javascript
      $("#termStart").val();
      $("#termEnd").val({
          onSelect: function () {
              var toDate = $(this).val('getDate');
              toDate.setDate(toDate.getDate()+7)
              $("#termStart").val("setDate", toDate);
          }
      });

指定的值“[object Object]”不符合要求的格式，“yyyy-MM-dd”。

Answer 1

您正在尝试的事情并不难，但还有一些工作要做。日期库可以提供帮助，但编写自己的方法并不需要花费太多精力。你需要做几件事：

1. 解析并验证输入的开始日期
2. 获取期限并在开始日期上添加几个月
3. 处理无效输入
4. 显示结果

以下内容不使用任何 jQuery（您可以根据需要使用它，但它没有任何好处）并且应该让您对需要做什么有所了解。

var dLib = {

  // Given a date string in format m/d/y, return a Date instance
  parseMDY: function (s) {
    var b = s.split(/\D+/);
    var d = new Date(b[2], --b[0], b[1]);
    return /\d{1,2}\/\d{1,2}\/\d{1,4}/.test(s) &&
           d.getMonth() == b[0]? d : new Date(NaN);
  },

  // Given a Date, return date string formatted as mm/dd/yyyy
  formatMDY: function (date) {
    function z(n){return (n<10?'0':'')+n}
    if (isNaN(date)) return date.toString();
    return z(date.getMonth() + 1) + '/' + z(date.getDate()) + '/' + date.getFullYear();
  },

  // Add months to a date. If end date itn's equal to start date,
  // must have gone past end of month so set to last day of month
  addMonths: function (date, months) {
    var startDate = date.getDate();
    date = new Date(+date);
    date.setMonth(date.getMonth() + Number(months))
    if (date.getDate() != startDate) {
      date.setDate(0);
    }
    return date;
  },
};

function setTermEnd(el) {
  var form = el.form;
  var term = form.termInMonths.value;
  var startDate = dLib.parseMDY(form.termStart.value);
  
  // Check that a valid date was entered. If no date entered
  // yet, do nothing. Else, put error message in termEnd
  if (isNaN(startDate)) {
    form.termEnd.value = form.termStart.value == ''? '' : 'Term start date is invalid';
    
  // Add months and set term end
  } else {
    form.termEnd.value = dLib.formatMDY(dLib.addMonths(startDate, term));
  }
}

// Attach listeners and run to initialise
window.onload = function() {
  var form = document.forms[0];
  form.termInMonths.onchange = function() {setTermEnd(this)};
  form.termStart.onchange = function() {setTermEnd(this)};
  form.termStart.onchange(form.termStart);
}

.hint {
  color: #999999;
  font-size: 75%;
}

<form>
  <table>
   <tr><td>Term:<td><select name="termInMonths">
                      <option value="12" selected>Annual
                      <option value="6">Semi-annual
                      <option value="3">Quarter
                      <option value="1">Month
                    </select>
   <tr><td>Term start:<td><input name="termStart" value="1/31/2016"><span class="hint">m/d/y</span>
   <tr><td>Term End:<td><input name="termEnd" readonly><span class="hint">m/d/y</span>
  </table>
</form>

Answer 2

Javascript 的内置日期时间操作非常有限。

最好的办法是使用 javascript 日期时间库。 moment.js 不错

您的第二个最佳选择是以秒为单位处理时间，因为 javascript 就是这样做的。使用 Date.parse(toDate) 将其转换为自纪元以来的秒数，然后添加秒数，然后将其转换回日期。