提取年份并计算日期差异

Question

我在编码方面相对较新，最近我必须对表格中输入的数据进行一些日期操作。我搜索了很多，但我找不到对我有用的解决方案 这是问题：

用户在HTML中的datetime-local字段中输入以下数据：
1）入学年份（日期1）
2）毕业年份（日期2）
3）生日（日期3）

我需要一个使用此日期和输出的JQuery或JavaScript脚本：
1）录取年份，根据录取日期（我知道有一个getFullYear函数，但我无法正确使用它...）＆gt;＆gt;＆gt;结果1 2）毕业年龄（出生日期和毕业日期之间的日期差异。＆gt;＆gt;＆gt; result2

我尝试添加datepicker，但不知何故，我看起来非常糟糕的日历显示在方框上。我无法安装datetimepicker ...

提前谢谢你。非常感谢您的帮助。

这是我的HTML代码。

<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text"  readonly="true" name="year" placeholder="=(getFullYear from date1)"/>  
<label for="result1">year</label>    
<br />


<input id="date2" type="datetime-local" />
<label for="date2">graduation</label> 
<br />

<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label> 
<br />

Answer 1

您没有包含对此问题更重要的js代码。我将包括一些应该有用的功能。

要查找日期中的年份，我使用以下功能

function getYearFromDate(date){
  const yearFromDate = new Date();
  yearFromDate.setTime(date.getTime());
  yearFromDate.setFullYear(date.getFullYear() + 1);
  return yearFromDate;
}

console.log(getYearFromDate(new Date()));

毕业年龄主要来自Calculate age given the birth date in the format YYYYMMDD

function getYearsBetween(oldDate, newDate) {
    var age = newDate.getFullYear() - oldDate.getFullYear();
    var m = newDate.getMonth() - oldDate.getMonth();
    if (m < 0 || (m === 0 && newDate.getDate() < oldDate.getDate())) {
        age--;
    }
    return age;
}

包括moment.js也是一个选项，但如果可以的话，这是一个我想避免使用的大型库。

编辑我以为你想要一年+ 1天。从日期开始全年变得更加容易。

const date = new Date();

console.log(date.getFullYear());

修改：现在一起

function updateGradYear(event) {
  console.log(event.target.value);
  let date = new Date(event.target.value);
  document.querySelector('#result1').value = date.getFullYear();
}

function updateAge() {
  let gradDate = new Date(document.querySelector('#date2').value);
  console.log(document.querySelector('#date3').value);
  let birthdate = new Date(document.querySelector('#date3').value);
  document.querySelector('#result2').value = gradDate.getFullYear() - birthdate.getFullYear();
}



// set some default values
let today = new Date();
document.querySelector('#date1').value = today.toISOString().split('.')[0];
document.querySelector('#result1').value = today.getFullYear();
document.querySelector('#date2').value = today.toISOString().split('.')[0];

let birthdate = new Date(today.getTime);
birthdate.setFullYear(1984);
console.log(birthdate.toISOString().slice(0, 10).replace(/\//g, "-"));
document.querySelector('#date3').value = birthdate.toISOString().slice(0, 10).replace(/\//g, "-");

updateAge();

<input id="date1" type="datetime-local" onchange="updateGradYear(event)" />
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="number" readonly="true" name="year" placeholder="=(getFullYear from date1)" />
<label for="result1">year</label>
<br />


<input id="date2" type="datetime-local" onchange="updateAge()" />
<label for="date2">graduation</label>
<br />

<input id="date3" type="date" name="born" onchange="updateAge()" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)" /></textarea>
<label for="result2">age</label>
<br />

Answer 2

让我知道这对你有用！正如我所说，请在运行此代码时输入所有字段！

＆＃13;

＆＃13;

$('#date1, #date2').on('blur',function(){
  var dc = document.querySelector('input[id="date1"]');
  var date = new Date(dc.value);
  var collegeadmission = date.getFullYear();
  $('#result1').val(date.getFullYear());
  
  dc = document.querySelector('input[id="date2"]');
  date = new Date(dc.value);
  var collegegrad = date.getFullYear();
  if(! isNaN(collegegrad))
   $('#result2').val(collegegrad - collegeadmission);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text"  readonly="true" name="year" placeholder="=(getFullYear from date1)"/>  
<label for="result1">year</label>    
<br />


<input id="date2" type="datetime-local" />
<label for="date2">graduation</label> 
<br />

<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label> 
<br />

＆＃13;

＆＃13;

＆＃13;

Answer 3

check out this url:http://jsbin.com/vebiwogipu/edit?html,js,output

Make sure u fill all the dates and time properly as you discussed in your html.

Similarly you can attach the output on click or change event. and aso you can leverage getMonth() and getDay() in the code to get desired output.

Answer 4

看一下标签，可能会发出警报，当您点击按钮时，它会显示第一个日期字段的年份。正如我所说，你需要添加休息逻辑。

让我知道它是否有意义，如果没有请添加更多信息让我明白！