仅使用时刻库从日历中使用按钮（上一个-下一个）更改日期

Question

我希望单击上一个和下一个按钮时更改月份的日期。

如您所见，以下代码正在运行。

对我来说这似乎是肮脏的代码。

document.getElementById('nextdate').addEventListener('click', function() {
  let dataactual = document.getElementById('bday-month').value;
  let year = Number(dataactual.split('-')[0]);
  let month = Number(dataactual.split('-')[1]);
  month = month + 1;
  if (month > 12) {
    year = year + 1;
    month = 1;
  }
  let monthtwodigit = _.padStart(month.toString(), 2, '0')
  document.getElementById('bday-month').value = `${year}-${monthtwodigit}`
})

document.getElementById('prevdate').addEventListener('click', function() {
  let dataactual = document.getElementById('bday-month').value;
  let year = Number(dataactual.split('-')[0]);
  let month = Number(dataactual.split('-')[1]);
  month = month - 1;
  if (month < 1) {
    year = year - 1;
    month = 12;
  }
  let monthtwodigit = _.padStart(month.toString(), 2, '0')
  document.getElementById('bday-month').value = `${year}-${monthtwodigit}`
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

<input id="bday-month" type="month" name="bday-month" value="2024-08" />

<i id="prevdate" class="fa-solid fa-arrow-left"></i>
<i id="nextdate" class="fa-solid fa-arrow-right"></i>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

我看到有一个名为 moment 的库，可以让你使用纯 js 来“玩”日期。

注意：日期必须采用“YYYY-MM”格式

这个图书馆对我来说是新的。

我尝试使用下面的代码来使用它，但我注意到我总是必须使用 Number() 将月份或年份转换为数字，将其加 1，然后使用 padStart 在月份上添加两位数字。

let year = moment(dataactual,"YYYY-MM").format("YYYY");
let month = Number(moment(dataactual,"YYYY-MM").format("MM"));

有人可以帮助我并让我了解如何适应我的代码吗？

Answer 1

我会委托并只使用字符串/整数操作

const dateField = document.getElementById('bday-month');
document.getElementById('monthChange').addEventListener('click', (e) => { // delegate from a wrapper
  const tgt = e.target;
  if (!tgt.matches('i')) return; // not an "i"
  let [yyyy, mm] = dateField.value.split('-').map(str => +str); // get and convert to number
  mm += tgt.id === 'nextdate' ? 1 : -1; // add or subtract depending on clicked span
  if      (mm > 12) { mm =  1; yyyy += 1; } 
  else if (mm <= 0) { mm = 12; yyyy -= 1; }

  dateField.value = `${yyyy}-${String(mm).padStart(2,'0')}`;
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

<input id="bday-month" type="month" name="bday-month" value="2024-08" />
<span id="monthChange">
  <i id="prevdate" class="fa-solid fa-arrow-left"></i>
  <i id="nextdate" class="fa-solid fa-arrow-right"></i>
</span>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>