代码之家 › 专栏 › 技术社区 › Vpa

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

date jquery javascript

Vpa · 技术社区 · 6 年前

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

我将创建一个 snippet 你可以玩的地方。

我想做的是 input field (A) 只进入年份。然后,选择任何日期并从 input year (A) 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">

setDate() getDate() 等等,但我不明白其中的逻辑。

2 回复 | 直到 6 年前

95faf8e76605e973 6 年前

你可以用 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">

Roy Scheffers suresh sunkari 6 年前

日期可能很难处理,但是 moment 图书馆使它容易得多。在我的示例中,我获取这两个字段的输入,将它们解析为一个moment对象,并计算它们在持续时间内的差异。您可以在 Moment.js docs .

代码段的差异以天表示。如果要将其更改为月或年,请更新下面的行。

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

这是一个工作日的例子。

$(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天 . 如果你想要这样的东西,在这些讨论中看看一个可能的解决方案。