Question

我正在为电子商务/租赁网站撰写在线合同，需要显示第一笔付款的日期。

第一笔付款是从合同签订之日起30天开始的第一次付款到期的当月1日或15日。因此，如果合同于1月10日填写，第一笔付款将于2月15日到期。

我迷失了如何通过JS实现这一目标，所以非常感谢您的帮助。谢谢！

修改

因此，假设我按照以下建议使用此代码：

function calc() {
    var invoiceDate = moment(document.getElementById("contractDate").value, ["M-D-YYYY"]).add(30, 'days');

    while (invoiceDate.date() != 1 && invoiceDate.date() != 15) {
        invoiceDate = invoiceDate.add(1, 'days')
    }
    document.getElementById("invoiceDate").innerHTML = invoiceDate.format("MMMM Do, YYYY");
}

calc()



<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<input type="text" id="contractDate" onchange="calc()" value="12-18-2014">
<div id="invoiceDate"></div>

如何将其设置为自动更新为当前日期，而不是要求填写文本表单？摆脱文本输入最好是让人们不要捏造合同。有什么建议吗？

Answer 1

这可以使用纯javascript以合理简单的方式完成

＆＃13;

function calc(){
  var contractDate = new Date(document.getElementById("contractDate").value)
  console.log('contractDate',contractDate);

  var invoiceDate = new Date(contractDate);
  invoiceDate.setDate(invoiceDate.getDate() + 30)

  while( invoiceDate.getDate() != 1 && invoiceDate.getDate() != 15){
    invoiceDate.setDate(invoiceDate.getDate() + 1)
  }
  document.getElementById("invoiceDate").innerHTML = invoiceDate;
}

calc()

＆＃13;

<input type="text" id="contractDate" onchange="calc()" value="2014-01-10">
<div id="invoiceDate"></div>

＆＃13;

然而，正如评论所说，处理日期要比首次出现时复杂得多，使用类似momentjs

的内容

＆＃13;

function calc(){
  var invoiceDate = moment(document.getElementById("contractDate").value,["YYYY-MM-DD"]).add(30,'days');
   
  while( invoiceDate.date() != 1 && invoiceDate.date() != 15){
    invoiceDate = invoiceDate.add(1,'days')
  }
  document.getElementById("invoiceDate").innerHTML = invoiceDate.format("YYYY-MM-DD");
}

calc()

＆＃13;

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<input type="text" id="contractDate" onchange="calc()" value="2014-01-10">
<div id="invoiceDate"></div>

＆＃13;

Answer 2

这是我的出价：

// http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js

function getNextBillingDate(d){
    var m = new moment(d);
    m = m.add(1, 'month');
    if (m.date() > 15){
        m = m.add('1', 'month').date(1);
    } else if (m.date() > 1) {
        m = m.date(15);
    }
    return m.toDate();
}

var t = document.getElementById('t');
function test(input,expected){
    var actual = getNextBillingDate(input);
    
    var im = new moment(input),
        em = new moment(expected),
        am = new moment(actual);
    
    t.innerHTML += im.format('L') + ' => ' + am.format('L');
    t.innerHTML += ' (' + (em.isSame(am) ? 'PASS' : 'FAIL') + ')' + '\r\n';
}
test(new Date('Jan 10, 2016'), new Date('Feb 15, 2016'));
test(new Date('Jan 15, 2016'), new Date('Feb 15, 2016'));
test(new Date('Jan 16, 2016'), new Date('Mar 1, 2016'));
test(new Date('Mar 1, 2016'), new Date('Apr 1, 2016'));





// Only scroll down if you care about the input field in the demo
$('#d').val(moment().format('L'));
$('#b').on('click', function(e){
  try {
    var d = new moment(getNextBillingDate(new Date($('#d').val())));
    $('#r').text(d.format('L'));
  } catch(ex) {
    $('#r').text('Error');
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

<input type="date" id="d" /><button id="b">Convert</button><span id="r"></span>

<pre id="t">Unit Tests:
</pre>

Answer 3

查看一个名为的框架 MomentJS

您将采取以下措施：

moment(beginning date here, format here).add(30, 'days')

所以在你的情况下，这将导致：

moment("15-01-2014", ["DD-MM-YYYY"]).add(30, 'days')

这是在DayDay-MonthMonth-YearYearYearYear表示法，但是根据您的愿望改变它。
在这行代码之后你有一个时刻对象。就我而言，我使用以下方法从中检索日期：

getDateFromMoment(moment){
    var currentDay = moment.date();
      if(currentDay < 10){
          currentDay = '0' + moment.date();
      }
      var currentMonth = moment.month() + 1;
      if(currentMonth < 10){
          currentMonth = '0' + (moment.month() + 1);
      }
      var currentYear = moment.year();
      return currentDay + "-" + currentMonth + "-" + currentYear;
}

这将返回一个字符串表单日期，例如＆＃34; 15-02-2014＆＃34 ;.
框架本身可能需要一点点习惯于＃34;但是答应我......值得你这么做

该框架的优点：

易于学习
通过年度变化，2月份的不一致，53或52周的年份，任何日期问题都可以向你投掷，MomentJS会让你满意！
您可以将其自定义到您的应用程序中，更改区域设置，格式，您可以输入的不仅仅是字符串日期对象，还可以输入JavaScript对象，还有很多。

希望我帮助你;）

如何计算和显示具体日期？

3 个答案: