javascript - Fengyuanchen Datepicker - 箭头上一个/下一个

Question

我正在尝试使用上一个/下一个箭头制作数据选择器。内联版本正在运行。但我想使用带有上个月/下个月数据 View 的按钮进行输入(就像内联版本一样)。

HTML

<div class="match__arrows">
  <button class="match__arrow match__prev" data-view="month prev">Prev</button>

  <input class="datapicker" data-toggle="datepicker">

  <button class="match__arrow match__next" data-view="month next">Next</button>
</div>

JS

$('[data-toggle="datepicker"]').datepicker({
  autoPick: true,
  format: 'dd/mm/yyyy',
  language: 'en-EN'
});

JS 库: https://fengyuanchen.github.io/datepicker/

Answer 1

如果您愿意使用全局变量，则可以打开带有日期偏移量的日历:

这是一个带有 Luxon 的版本现在moment处于维护模式:

currDate = DateTime.local();

document.getElementById('prev').addEventListener('click', function(e)
{
  currDate = currDate.plus({months:1});
  $('[data-toggle="datepicker"]').datepicker('setDate', currDate);
});

document.getElementById('next').addEventListener('click', function(e)
{
  currDate = currDate.minus({months:1});
  $('[data-toggle="datepicker"]').datepicker('setDate', currDate);
});

$('[data-toggle="datepicker"]').datepicker({
              autoPick: true,
              format: 'dd/mm/yyyy',
              language: 'en-EN'
            });

您需要添加moment js用于日期操作，这样您就不会发生奇怪的事情。

currDate = moment();
document.getElementById('prev').addEventListener('click', function(e)
{
  currDate.add(1, 'months');
  $('[data-toggle="datepicker"]').datepicker('setDate', currDate.toDate());
});

document.getElementById('next').addEventListener('click', function(e)
{
  currDate.add(-1, 'months');
  $('[data-toggle="datepicker"]').datepicker('setDate', currDate.toDate());
});

$('[data-toggle="datepicker"]').datepicker({
          autoPick: true,
          format: 'dd/mm/yyyy',
          language: 'en-EN'
        });