JavaScript - jQuery 萬年曆

效果：

用法：

    $('<div id=\"pickdate\"></div>').appendTo($('body'));
    $('#pickdate').calendar({
        weeks: [ '7', '1', '2', '3', '4', '5', '6', ],  // 可不設定，會有預設值
        months: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ], // 可不設定，會有預設值
        width: 240,
        height: 220,
        onSelect: function(date) { // 選擇日期會進的func
            var _date = funcUtility.datetimeFormat('YYYYMMDD', date);
            console.log(funcUtility.formatDatetext(_date));
            $(this).remove();
        },
        onNavigate: function() { // 一開始會呼叫的func
            console.log('onNavigate');
            var pos = $('#nowdate').offset(); // 以這個物件為基準點，決定月曆的位置
            $(this).offset({ left: pos.left - 5, top: pos.top - 5 });
        }
    });

轉換時間的 lib：

const funcUtility = {
    datetimeFormat: function(format, datetime) {
    let _format = format || 'YYYY/MM/DD hh:mm:ss';
    let _datetime = datetime || new Date();
    let _YYYY = _datetime.getFullYear(), _MM = _datetime.getMonth() + 1, _DD = _datetime.getDate();
    let _hh = _datetime.getHours(), _mm = _datetime.getMinutes(), _ss = _datetime.getSeconds();
    const map = {
        YYYY: _YYYY,
        MM: String(_MM).padStart(2, '0'),
        DD: String(_DD).padStart(2, '0'),
        hh: String(_hh).padStart(2, '0'),
        mm: String(_mm).padStart(2, '0'),
        ss: String(_ss).padStart(2, '0'),
        M: _MM,
        D: _DD,
        h: _hh,
        m: _mm,
        s: _ss
    };
    return _format.replace(/YYYY|MM|DD|M|D|hh|mm|ss|h|m|s/gi, (matched) => { return map[matched]; });
    },

    formatDatetext: function(date, symb) {
    if (date.length == 8) {
        if (symb) {
           return (date.substr(0, 4) + '-' + date.substr(4, 2) + '-' + date.substr(6, 2));
        } else {
           return (date.substr(0, 4) + '年' + date.substr(4, 2) + '月' + date.substr(6, 2) + '日');
        }
    }
    return date;
    }
};