Air Datepicker Japanese and Cleave.js and React.js

/**
 * datepicker function
 * @param {string} selector   : "#id", ".className"
 * @param {function} callback : function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);
 * @param {string} dateString : "2023-07-11"
 *
 * https://air-datepicker.com/docs
 * https://github.com/t1m0n/air-datepicker/tree/v3/dist
 *
Example:
// Air Datepicker and Cleave.js and React.js
const e = React.createElement;
e(Cleave, {
    options: { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] },
    id: "date",
    value: record.Date,
    onChange: e => { setRecord({ ...record, Date: e.target.value }); },
    onClick: e => {
        datepicker("#date", function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);
    },
    // onFocus: ...
    placeholder: "YYYY-MM-DD",
    style: { gridColumn: "span 2" },
}),
 */
function datepicker(selector, callback, dateString) {
    let obj = new AirDatepicker(selector, {
        // startDate: record.Date,
        locale: {
            days: ['日', '月', '火', '水', '木', '金', '土'],
            daysShort: ['日', '月', '火', '水', '木', '金', '土'],
            daysMin: ['日', '月', '火', '水', '木', '金', '土'],
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            today: '今日',
            clear: 'クリア',
            // dateFormat: 'yyyy-mm-dd',
            dateFormat: 'yyyy-MM-dd',
            // timeFormat: 'hh:ii aa',
            timeFormat: 'HH:mm',
            firstDay: 0
        },
        position: 'top center',
        dateFormat: "yyyy-MM-dd",
        range: false,
        timepicker: false,
        // multipleDates: true,
        // Title format:
        navTitles: {
            // days: 'MM, <i>yyyy</i>',
            days: 'yyyy 年 MM 月',
            months: 'yyyy',
            years: 'yyyy1 - yyyy2'
        },
        onSelect: function (event) {
            if (event) {
                callback(event);
            }
        },
        onHide: function (event) {
            if (event) {
                obj.destroy();
                obj = null;
            }
        },
    });

    const regex = /^(\d{4})-(\d{2})-(\d{2})$/;
    if (regex.test(dateString)) {
        const matches = dateString.match(regex);
        obj.selectDate(new Date(Number(matches[1]), Number(matches[2]) - 1, Number(matches[3])));
    }
    obj.show();
}

/**

* datepicker function

* @param {string} selector : "#id", ".className"

* @param {function} callback : function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);

* @param {string} dateString : "2023-07-11"

* https://air-datepicker.com/docs

* https://github.com/t1m0n/air-datepicker/tree/v3/dist

Example:

// Air Datepicker and Cleave.js and React.js

const e = React.createElement;

e(Cleave, {

options: { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] },

id: "date",

value: record.Date,

onChange: e => { setRecord({ ...record, Date: e.target.value }); },

onClick: e => {

datepicker("#date", function (event) { setRecord({ ...record, Date: event.formattedDate }); }, record.Date);

// onFocus: ...

placeholder: "YYYY-MM-DD",

style: { gridColumn: "span 2" },

}),

function datepicker(selector, callback, dateString) {

let obj = new AirDatepicker(selector, {

// startDate: record.Date,

locale: {

days: ['日', '月', '火', '水', '木', '金', '土'],

daysShort: ['日', '月', '火', '水', '木', '金', '土'],

daysMin: ['日', '月', '火', '水', '木', '金', '土'],

months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

today: '今日',

clear: 'クリア',

// dateFormat: 'yyyy-mm-dd',

dateFormat: 'yyyy-MM-dd',

// timeFormat: 'hh:ii aa',

timeFormat: 'HH:mm',

firstDay: 0

position: 'top center',

dateFormat: "yyyy-MM-dd",

range: false,

timepicker: false,

// multipleDates: true,

// Title format:

navTitles: {

// days: 'MM, <i>yyyy</i>',

days: 'yyyy 年 MM 月',

months: 'yyyy',

years: 'yyyy1 - yyyy2'

onSelect: function (event) {

if (event) {

callback(event);

}

onHide: function (event) {

if (event) {

obj.destroy();

obj = null;

}

});

const regex = /^(\d{4})-(\d{2})-(\d{2})$/;

if (regex.test(dateString)) {

const matches = dateString.match(regex);

obj.selectDate(new Date(Number(matches[1]), Number(matches[2]) - 1, Number(matches[3])));

}

obj.show();

}

コメントを残す