Question

我试图通过MM / dd / YYYY文本框显示和更新孩子的年龄，以及年（s）和月（s）文本框中的简单int值。

因此，如果孩子的生日为：02/03/2015，并且我与03/07/2018的今天日期进行比较，那么年份文本框应该说3并且月份文本框应该说1

如果您要将年份值更改为5，则DoB值应更改为02/03/2013。
如果您然后将月份值更改为9，则DoB值应更改为05/03/2012。
如果我要更改DoB值，则Year和Month文本框也应更改为适当的值日期值应该保留，并且当它无法更改为01。

我当然要考虑奇数算术。

到目前为止，我在C＃MVC应用程序中所拥有的是我有一个具有这些属性的ChildViewModel对象：

DateTime? DateOfBirth
public int AgeMonths
public int AgeYears

在我看来，我为每个值都有一个文本框。

<div class="row">
    <div class="form-group">
        @Html.LabelFor(m => m.DateOfBirth, new { @class = "control-label" })
        @Html.TextBoxFor(m => m.DateOfBirth, "{0:MM/dd/yyyy}", new { @class = "form-control", placeholder = "Child's Date of Birth", onchange = "determineAge(this.id, null, null)" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AgeYears, new { @class = "control-label" })
        @Html.TextBoxFor(m => m.AgeYears, new { @class = "form-control", placeholder = "x years and...", onchange = "determineAge(null, this.id, null)" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.AgeMonths, new { @class = "control-label" })
        @Html.TextBoxFor(m => m.AgeMonths, new { @class = "form-control", placeholder = "...y months old", onchange = "determineAge(null, null, this.id)" })
    </div>
</div>

这是我到目前为止的JavaScript，稍微修改后可以在片段中使用，使用一点点的时刻.js v2.21.0

https://jsfiddle.net/RyanTaite/fak22xrf
下面的代码段实际上是相同的代码：

＆＃13;

function determineAge(dobId, ageYearsId, ageMonthsId) {
  ///<summary>Updates the Date of Birth, Years, and/or Months text box(es) based on what's passed in. It's likely terribly written and I'd welcome a rewrite by someone better at date math. Dependant on moment.js</summary>

  var dobValue = null;
  var yearValue = null;
  var monthValue = null;
  var today = new Date();

  // Update DOB, AgeYears, and AgeMonths based on who was changed
  if (dobId !== null) {
    dobValue = new Date(document.getElementById(DateOfBirth.value));
    var ageInMonths = today.getMonth() - dobValue.getMonth() + (12 * (today.getFullYear() - dobValue.getFullYear()));
    yearValue = Math.floor(ageInMonths / 12);
    monthValue = ageInMonths % 12;
    document.getElementById('AgeYears').value = yearValue;
    document.getElementById('AgeMonths').value = monthValue;
  } else if (ageYearsId !== null) {
    yearValue = document.getElementById('AgeYears').value;
    monthValue = document.getElementById('AgeMonths').value;
    dobValue = new Date(document.getElementById('DateOfBirth').value);
    dobValue.setFullYear(today.getFullYear() - yearValue);
    document.getElementById('DateOfBirth').value = dobValue.toLocaleDateString();
  } else if (ageMonthsId !== null) {
    dobValue = new moment(new Date());
    monthValue = parseInt(document.getElementById('AgeMonths').value);
    yearValue = parseInt(document.getElementById('AgeYears').value);
    var dayValue = new moment(document.getElementById('DateOfBirth').value, "MMDDYYYY").get('date');
    var totalMonths = monthValue + (yearValue * 12);

    dobValue.subtract(totalMonths, "months");
    // This is the proper way to set the day value of a moment object, you have to chain your way there
    dobValue.year(dobValue.get('year')).month(dobValue.get('month')).date(dayValue);

    document.getElementById('DateOfBirth').value = moment(dobValue._d).format("MM/DD/YYYY");
  }
}

＆＃13;

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="form-group">
    <div class="control-label">Date of Birth</div>
    <input class="form-control" id="DateOfBirth" placeholder="Child's Date of Birth" onchange="determineAge(this.id, null, null)"></input>
  </div>
  <div class="form-group">
    <div class="control-label">Years</div>
    <input class="form-control" id="AgeYears" placeholder="x years and..." onchange="determineAge(null, this.id, null)"></input>
  </div>
  <div class="form-group">
    <div class="control-label">Months</div>
    <input class="form-control" id="AgeMonths" placeholder="...y months old" onchange="determineAge(null, null, this.id)"></input>
  </div>
</div>

＆＃13;

它的马车很可能写得非常糟糕，所以我非常喜欢这方面的帮助。

Answer 1

我认为我使用function determineAge(dobId, ageYearsId, ageMonthsId) { ///<summary>Updates the Date of Birth, Years, and/or Months text box(es) based on what's passed in. Dependant on moment.js</summary> var dobValue = null; var yearValue = null; var monthValue = null; var today = new moment(); // Update DOB, AgeYears, and AgeMonths based on who was changed if (dobId !== null) { dobValue = new moment(document.getElementById('DateOfBirth').value, "MMDDYYYY"); yearValue = new moment().diff(dobValue, 'years'); monthValue = new moment().diff(dobValue, 'month') % 12; document.getElementById('AgeYears').value = yearValue; document.getElementById('AgeMonths').value = monthValue; } else if (ageYearsId !== null || ageMonthsId !== null) { yearValue = parseInt(document.getElementById('AgeYears').value); monthValue = parseInt(document.getElementById('AgeMonths').value); dobValue = new moment(document.getElementById('DateOfBirth').value, "MMDDYYYY"); const ageInMonths = (yearValue * 12) + (monthValue); const todayMinusMonths = today.subtract(ageInMonths, 'months'); const dayValue = dobValue.date(); dobValue = todayMinusMonths; dobValue.date(dayValue); document.getElementById('DateOfBirth').value = dobValue.format("MM/DD/YYYY"); } }和一般时刻属性修正了它，因为Matt's评论建议。

如果不出意外，它更干净，更接近我想要的。

我欢迎任何人的建议或修改，以改善这一点。

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="form-group">
    <div class="control-label">Date of Birth</div>
    <input class="form-control" id="DateOfBirth" placeholder="MM/dd/YYYY" onchange="determineAge(this.id, null, null)">
  </div>
  <div class="form-group">
    <div class="control-label">Years</div>
    <input class="form-control" id="AgeYears" placeholder="x years and..." onchange="determineAge(null, this.id, null)">
  </div>
  <div class="form-group">
    <div class="control-label">Months</div>
    <input class="form-control" id="AgeMonths" placeholder="...y months old" onchange="determineAge(null, null, this.id)">
  </div>
</div>

sudo -S <<< "password from stdin" -u user_account ./script_name

使用年份和月份值更新生日

1 个答案: