从日期中提取年份并计算日期差异

Question

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

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

我需要一个使用此日期的 JQuery 或 JavaScript 脚本并输出以下内容：
1) 录取年份，根据录取日期（我知道有getFullYear函数，但我不能正确使用...）>>> result1
2）毕业年龄（出生日期与毕业日期之间的日期差异。>>>结果2

我尝试添加日期选择器，但不知何故，我得到了看起来非常糟糕的日历，它显示在框上。我无法安装 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

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

$('#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);
})

<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 />

Answer 3

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

确保按照您在 html 中讨论的内容正确填写所有日期和时间。

同样，您可以在单击或更改事件时附加输出。 并且您可以在代码中利用 getMonth() 和 getDay() 来获得所需的输出。

Answer 4

查看标签可能会引起注意，当您单击按钮时，它会显示您的第一个日期字段之外的年份。正如我所说，您需要添加休息逻辑。

让我知道是否有意义，如果没有，请添加更多信息以使我理解！