diff --git a/src/static/css/datetimepicker.css b/src/static/css/datetimepicker.css index dacdfb3..b3e6c7b 100644 --- a/src/static/css/datetimepicker.css +++ b/src/static/css/datetimepicker.css @@ -37,14 +37,71 @@ div.perfectTable > div { } + + + + + + div.pickerContainer { display: flex; align-items: center; flex-flow: row; + justify-content: center; } div.pickerContainer > div { flex-grow: 1; flex-shrink: 1; flex-basis: 0; +} + +div.pickerContainer > svg { + width: 100%; + height: 100%; +} + +div.pickerContainer > svg > text { + dominant-baseline: middle; + text-anchor: middle; +} + +div.pickerContainer > svg > circle[type=background] { + stroke-width: 0; + fill: #d0d0d0; +} + +div.pickerContainer > svg > circle[type=symbol] { + stroke-width: 0; + fill: hsl(171, 100%, 41%); /* $primary */ +} + +div.pickerContainer > svg > line { + stroke-width: 0.125em; + stroke: hsl(171, 100%, 41%); /* $primary */ +} + + + + + + +header.pickerHeader { + display: flex; + flex-flow: row; + + flex-grow: 1; + flex-basis: 0; + flex-shrink: 0; + + justify-content: space-between; +} + +header.pickerHeader > div { + display: flex; + flex-flow: column; + + flex-grow: 1; + flex-basis: 0; + flex-shrink: 0; } \ No newline at end of file diff --git a/src/static/js/datetimepicker.js b/src/static/js/datetimepicker.js index 681880a..7b26168 100644 --- a/src/static/js/datetimepicker.js +++ b/src/static/js/datetimepicker.js @@ -1,7 +1,76 @@ +var ccn_datetimepicker_tabType = { + year: 0, + month: 1, + day: 2, + hour: 3, + minute: 4 +}; +var ccn_datetimepicker_currentTab = undefined; + +var ccn_datetimepicker_mode = undefined; +var ccn_datetimepicker_pickerIndex = undefined; +var ccn_datetimepicker_isUTC = undefined; +var ccn_datetimepicker_callbackFunc = undefined; + +var internalDateTime = new Date(); + +// ========================================= export func + function ccn_datetimepicker_Insert() { $('body').append(ccn_template_datetimepicker.render()); + + // bind event and trigge once + $(window).resize(function (){ + $('div.pickerContainer > svg').each(function (){ + ccn_datetimepicker_OnSvgResize($(this)); + }); + }).resize(); } +function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC, callbackFunc) { + ccn_datetimepicker_mode = mode; + ccn_datetimepicker_pickerIndex = pickerIndex; + ccn_datetimepicker_isUTC = isUTC; + ccn_datetimepicker_callbackFunc = callbackFunc; + + ccn_datetimepicker_SwitchTab(mode); + + $('#ccn-datetimepicker-modal').show(); +} + +// ========================================= internal func + +function ccn_datetimepicker_OnSvgResize(ele) { + var scale = 200 / Math.min(ele.width(), ele.height()); + ele.css('font-size', scale + 'em'); +} + +function ccn_datetimepicker_SwitchTab(newTab) { + $('div.pickerContainer > svg').hide(); + switch(newTab) { + case ccn_datetimepicker_tabType.year: + $('#ccn-datetimepicker-panel-year').show(); + break; + case ccn_datetimepicker_tabType.month: + $('#ccn-datetimepicker-panel-month').show(); + break; + case ccn_datetimepicker_tabType.day: + $('#ccn-datetimepicker-panel-day').show(); + break; + case ccn_datetimepicker_tabType.hour: + ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-hour').show()); + break; + case ccn_datetimepicker_tabType.minute: + ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-minute').show()); + break; + } +} + +function ccn_datetimepicker_RefreshDisplayDateTime() { + +} + + function ccn_datetimepicker_Init() { var nowtime = new Date(); @@ -54,20 +123,27 @@ function ccn_datetimepicker_SyncEx(pickerIndex) { } } -function ccn_datetimepicker_Set(pickerIndex, dt, isUTC) { - $('.datetimepicker-year[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCFullYear() : dt.getFullYear()); - $('.datetimepicker-month[datetimepicker=' + pickerIndex + ']').val((isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1); - $('.datetimepicker-day[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCDate() : dt.getDate()); - $('.datetimepicker-hour[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCHours() : dt.getHours()); - $('.datetimepicker-minute[datetimepicker=' + pickerIndex + ']').val(isUTC ? dt.getUTCMinutes() : dt.getMinutes()); +function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) { + var ele = $('[datetimepicker=' + pickerIndex + ']'); + if (mode < ccn_datetimepicker_tabType.year) return; + ele.attr('datetimepicker-year', isUTC ? dt.getUTCFullYear() : dt.getFullYear()); + if (mode < ccn_datetimepicker_tabType.month) return; + ele.attr('datetimepicker-month', (isUTC ? dt.getUTCMonth() : dt.getMonth()) + 1); + if (mode < ccn_datetimepicker_tabType.day) return; + ele.attr('datetimepicker-day', isUTC ? dt.getUTCDate() : dt.getDate()); + if (mode < ccn_datetimepicker_tabType.hour) return; + ele.attr('datetimepicker-hour', isUTC ? dt.getUTCHours() : dt.getHours()); + if (mode < ccn_datetimepicker_tabType.minute) return; + ele.attr('datetimepicker-minute', isUTC ? dt.getUTCMinutes() : dt.getMinutes()); } function ccn_datetimepicker_Get(pickerIndex, isUTC) { - year = $('.datetimepicker-year[datetimepicker=' + pickerIndex + ']').val(); - month = $('.datetimepicker-month[datetimepicker=' + pickerIndex + ']').val(); - day = $('.datetimepicker-day[datetimepicker=' + pickerIndex + ']').val(); - hour = $('.datetimepicker-hour[datetimepicker=' + pickerIndex + ']').val(); - minute = $('.datetimepicker-minute[datetimepicker=' + pickerIndex + ']').val(); + var ele = $('[datetimepicker=' + pickerIndex + ']'); + year = ele.attr('datetimepicker-year'); + month = ele.attr('datetimepicker-month'); + day = ele.attr('datetimepicker-day'); + hour = ele.attr('datetimepicker-hour'); + minute = ele.attr('datetimepicker-minute'); if (IsUndefinedOrEmpty(year)) year = ccn_datetime_MIN_YEAR; if (IsUndefinedOrEmpty(month)) month = 1; if (IsUndefinedOrEmpty(day)) day = 1; diff --git a/src/static/tmpl/datetimepicker.tmpl b/src/static/tmpl/datetimepicker.tmpl index da7cd25..e990209 100644 --- a/src/static/tmpl/datetimepicker.tmpl +++ b/src/static/tmpl/datetimepicker.tmpl @@ -1,12 +1,15 @@