javascript - Pikaday JS如何在没有时刻js的情况下使用全天和月份名称作为输入格式

Question

我像这样使用 Pikaday.js:

new Pikaday({
            field: document.getElementById('top-banner-datepicker'),
            minDate: new Date()

我知道答案就在文档中的这个例子中:

var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    format: 'D/M/YYYY',
    toString(date, format) {
        // you should do formatting based on the passed format,
        // but we will just return 'D/M/YYYY' for simplicity
        const day = date.getDate();
        const month = date.getMonth() + 1;
        const year = date.getFullYear();
        return `${day}/${month}/${year}`;
    },
    parse(dateString, format) {
        // dateString is the result of `toString` method
        const parts = dateString.split('/');
        const day = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1;
        const year = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
});

但我不知道如何使用全天(周一、周二、周三等)和全月名称(一月、二月等)而不是缩写词(周一、周二、周三... Jan、Feb、Mar ... ETC)
我不想使用 Moment.JS，因为它是一个巨大的依赖项。
非常感谢任何帮助!
谢谢

Answer 1

如果您希望格式化 datepicker 字段，您可以使用 toLocaleString() .
例如，如果您想获得十月而不是十月:

date.toLocaleString('default', {
      month: 'long' // use localestring month to get the long month
});

如果你想得到星期天而不是太阳:

date.toLocaleString('default', { // use localestring weekday to get the long day
      weekday: 'long'
});

示例片段:

var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  firstDay: 1,
  minDate: new Date(),
  maxDate: new Date(2020, 12, 31),
  yearRange: [2000, 2020],
  format: 'D-M-YYYY',
  toString(date, format) {
    console.log(date.toLocaleString('default', {
      weekday: 'short' // use localestring weekday to get the short abbv of day
    }));
    console.log(date.toLocaleString('default', {
      month: 'short' // use localestring weekday to get the short abbv of month
    }));
    // you should do formatting based on the passed format,
    // but we will just return 'D/M/YYYY' for simplicity
    const day = date.getDate();
    const daylong = date.toLocaleString('default', { // use localestring weekday to get the long day
      weekday: 'long'
    });
    const month = date.getMonth() + 1;
    const monthlong = date.toLocaleString('default', {
      month: 'long' // use localestring month to get the long month
    });
    const year = date.getFullYear();
    return `${daylong}, ${monthlong}, ${day} ${year}`; // just format as you wish
  }
});

#datepicker {
  width: 200px;
}

<link href="https://pikaday.com/css/pikaday.css" rel="stylesheet" />
<script src="https://pikaday.com/pikaday.js"></script>
<label for="datepicker">Date:</label>
<input type="text" id="datepicker">