Fengyuanchen Datepicker - 箭头 prev/next

Question

我正在尝试使用箭头 prev/next 制作数据选择器。内联版本正在运行。但我想使用带有数据视图上/下个月的按钮进行输入（如内联版本）。

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