动态减去日期,月份和年份,并使用Jquery将数据作为天数

问题描述 投票:1回答:2

我想从另一个输入年份中减去用户输入年份,但到目前为止我没有运气。

我会创造一个你可以玩的snippet

我想做的是让input field (A)进入年份。然后选择任何日期并从input year (A)中减去它(日期和月份固定为31.03.input_year)...

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var year_enter = $('#year_select').val();
  var current_year = year_enter+'-03-31';
  var new_date = $('#new_date').val();
  if(year_enter != '') {
    //alert(current_year);
  }
  if(new_date != '') {
    //alert(new_date);
    
    var total = new_date - current_year;
    $('#answer').val(total);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001">

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

我总是得到NaN值,我的减法方法不正确。我尝试使用setDate()getDate()等,但我不明白逻辑。

提前致谢...

javascript jquery date
2个回答
1
投票

您可以使用new Date()键入将它们转换为日期以进行算术运算

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var year_enter = $('#year_select').val();
  var current_year = new Date(year_enter + '-03-31');
  var new_date = new Date($('#new_date').val());
  if (year_enter != '') {

  }
  if (new_date != '' && year_enter != '') {

    if (current_year < new_date) {
      $('#answer').val('A must be greater than B');
      return;
    }

    var total = Math.round(Math.abs((current_year.getTime() - new_date.getTime()) / (24*60*60*1000)));

    $('#answer').val(total);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001"><span style="opacity: 0.5;">&nbsp;this currently has fixed -month-day(-03-31) </span>

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

1
投票

日期可能很难处理,但moment库使它更容易。在我的例子中,我接受两个字段的输入,将它们解析为一个时刻对象并计算它们在持续时间中的差异。您可以在Moment.js docs上阅读有关持续时间的更多信息。

代码段差异以天为单位表示。如果您想将其更改为数月或数年,请更新以下行。

log(Math.round(duration.as('days')) + 'days');

您还可以包含多个if语句,以检查差异是否为一年,以年为单位显示结果。如果没有,并且有整整一个月,请在几个月内表达结果,依此类推。

这是几天的工作示例。

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var yearSelect = document.querySelector('#year_select').value;
  var newDate = document.querySelector('#new_date').value;
  var first_date = new window.moment('31-03-' + yearSelect, 'DD-MM-YYYY');
  var second_date = new window.moment(newDate, 'YYYY-MM-DD');

  if(yearSelect.length !== 4 || newDate === '') {
    log('');
    return;
  }
  
  var duration = window.moment.duration(first_date.diff(second_date));

  log(Math.round(duration.as('days')) + 'days');
}

function log(value) {
  var answer = document.querySelector('#answer');
  answer.value = value;
}
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001">

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

注意:有一些关于如何格式化日期/持续时间的讨论,例如: 1年,2个月,5天。如果您想要这样的话,请在这些讨论中查看可能的解决方案。

© www.soinside.com 2019 - 2024. All rights reserved.