Fengyuanchen Datepicker - 箭头prev/next

Question

我正在尝试制作带箭头的数据选择器 prev/next。内联版本正在运行。但我想用带有数据视图 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 now that 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'
        });

Fengyuanchen Datepicker - 箭头prev/next

Fengyuanchen Datapicker - arrows prev/next

html

javascript

jquery

datepicker