diff --git a/src/static/css/datetimepicker.css b/src/static/css/datetimepicker.css
index b3e6c7b..51d77f2 100644
--- a/src/static/css/datetimepicker.css
+++ b/src/static/css/datetimepicker.css
@@ -36,6 +36,11 @@ div.perfectTable > div {
flex-flow: row;
}
+div.perfectTable > div > div[picked=true] {
+ background: hsl(171, 100%, 41%);
+ color: #fff;
+}
+
diff --git a/src/static/js/datetime.js b/src/static/js/datetime.js
index 1a2cfe1..dcc4a3e 100644
--- a/src/static/js/datetime.js
+++ b/src/static/js/datetime.js
@@ -2,9 +2,9 @@
var ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var ccn_datetime_MIN_YEAR = 1950;
-var ccn_datetime_MAX_YEAR = 2199;
-var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(1950, 1, 1, 0, 0, 0, 0));
-var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(2200, 1, 1, 0, 0, 0, 0));
+var ccn_datetime_MAX_YEAR = 2200;
+var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(ccn_datetime_MIN_YEAR, 1, 1, 0, 0, 0, 0));
+var ccn_datetime_MAX_DATETIME = new Date(Date.UTC(ccn_datetime_MAX_YEAR, 1, 1, 0, 0, 0, 0));
var ccn_datetime_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000);
var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000);
diff --git a/src/static/js/datetimepicker.js b/src/static/js/datetimepicker.js
index 7b26168..9341b6a 100644
--- a/src/static/js/datetimepicker.js
+++ b/src/static/js/datetimepicker.js
@@ -5,26 +5,66 @@ var ccn_datetimepicker_tabType = {
hour: 3,
minute: 4
};
-var ccn_datetimepicker_currentTab = undefined;
+
+var ccn_datetimepicker_dialPlateRadius = 200;
+var ccn_datetimepicker_dialPlateHourInnerPercent = 0.6;
+var ccn_datetimepicker_dialPlateHourOutterPercent = 0.8;
+var ccn_datetimepicker_dialPlateHourDistinguishPercent = 0.6;
+var ccn_datetimepicker_dialPlateMinutePercent = 0.8;
var ccn_datetimepicker_mode = undefined;
var ccn_datetimepicker_pickerIndex = undefined;
var ccn_datetimepicker_isUTC = undefined;
var ccn_datetimepicker_callbackFunc = undefined;
-var internalDateTime = new Date();
+var ccn_datetimepicker_internalDateTime = new Date();
+var ccn_datetimepicker_displayCacheDateTime = new Date();
// ========================================= export func
function ccn_datetimepicker_Insert() {
$('body').append(ccn_template_datetimepicker.render());
- // bind event and trigge once
+ // bind size event and trigge once
$(window).resize(function (){
- $('div.pickerContainer > svg').each(function (){
+ $('div.pickerContainer > svg').each(function() {
ccn_datetimepicker_OnSvgResize($(this));
});
}).resize();
+
+ // add data attr
+ for(var i = 0; i < 3; i++) {
+ for(var j = 0; j < 4; j++) {
+ $('#ccn-datetimepiacker-panelMonth-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 1, j + 1))
+ .attr('data', i * 4 + j + 1);
+ }
+ }
+
+ // bind header event
+ $('header.pickerHeader > div').click(function() {
+ ccn_datetimepicker_SwitchTab(ccn_datetimepicker_Str2TabType($(this).attr('type')));
+ });
+
+ // bind button event
+ $('#ccn-datetimepiacker-panelYear-prevBtn').click(function() {
+ ccn_datetimepicker_PrevNextYear(true);
+ });
+ $('#ccn-datetimepiacker-panelYear-nextBtn').click(function() {
+ ccn_datetimepicker_PrevNextYear(false);
+ });
+ $('#ccn-datetimepiacker-panelMonth-prevBtn').click(function() {
+ ccn_datetimepicker_PrevNextMonth(true);
+ });
+ $('#ccn-datetimepiacker-panelMonth-nextBtn').click(function() {
+ ccn_datetimepicker_PrevNextMonth(false);
+ });
+ $('#ccn-datetimepiacker-panelDay-prevBtn').click(function() {
+ ccn_datetimepicker_PrevNextDay(true);
+ });
+ $('#ccn-datetimepiacker-panelDay-nextBtn').click(function() {
+ ccn_datetimepicker_PrevNextDay(false);
+ });
+
}
function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC, callbackFunc) {
@@ -33,6 +73,22 @@ function ccn_datetimepicker_Modal(mode, pickerIndex, isUTC, callbackFunc) {
ccn_datetimepicker_isUTC = isUTC;
ccn_datetimepicker_callbackFunc = callbackFunc;
+ ccn_datetimepicker_internalDateTime = ccn_datetimepicker_Get(pickerIndex, false);
+
+ $('header.pickerHeader > div').hide();
+ switch(newTab) {
+ case ccn_datetimepicker_tabType.minute:
+ $('header.pickerHeader > div[type=minute]').show();
+ case ccn_datetimepicker_tabType.hour:
+ $('header.pickerHeader > div[type=hour]').show();
+ case ccn_datetimepicker_tabType.day:
+ $('header.pickerHeader > div[type=day]').show();
+ case ccn_datetimepicker_tabType.month:
+ $('header.pickerHeader > div[type=month]').show();
+ case ccn_datetimepicker_tabType.year:
+ $('header.pickerHeader > div[type=year]').show();
+ break;
+ }
ccn_datetimepicker_SwitchTab(mode);
$('#ccn-datetimepicker-modal').show();
@@ -46,30 +102,148 @@ function ccn_datetimepicker_OnSvgResize(ele) {
}
function ccn_datetimepicker_SwitchTab(newTab) {
- $('div.pickerContainer > svg').hide();
+ $('div.pickerContainer > *').hide();
+
+ ccn_datetimepicker_displayCacheDateTime.setTime(ccn_datetimepicker_internalDateTime.getTime());
+ ccn_datetimepicker_RefreshDisplay(newTab);
+
switch(newTab) {
case ccn_datetimepicker_tabType.year:
- $('#ccn-datetimepicker-panel-year').show();
+ $('#ccn-datetimepicker-panelYear').show();
break;
case ccn_datetimepicker_tabType.month:
- $('#ccn-datetimepicker-panel-month').show();
+ $('#ccn-datetimepicker-panelMonth').show();
break;
case ccn_datetimepicker_tabType.day:
- $('#ccn-datetimepicker-panel-day').show();
+ $('#ccn-datetimepicker-panelDay').show();
break;
case ccn_datetimepicker_tabType.hour:
- ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-hour').show());
+ $('#ccn-datetimepicker-panelHour').show();
break;
case ccn_datetimepicker_tabType.minute:
- ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-minute').show());
+ $('#ccn-datetimepicker-panelMinute').show();
break;
}
}
-function ccn_datetimepicker_RefreshDisplayDateTime() {
+function ccn_datetimepicker_RefreshDisplay(tab) {
+ // header should be refreshed entirely
+ $('ccn-datetimepicker-datetime-year').text(ccn_datetimepicker_internalDateTime.getFullYear());
+ $('ccn-datetimepicker-datetime-month').text(ccn_datetimepicker_internalDateTime.getMonth() + 1);
+ $('ccn-datetimepicker-datetime-day').text(ccn_datetimepicker_internalDateTime.getDate());
+ $('ccn-datetimepicker-datetime-hour').text(ccn_datetimepicker_internalDateTime.getHours());
+ $('ccn-datetimepicker-datetime-minute').text(ccn_datetimepicker_internalDateTime.getMinutes());
+
+ // refresh tab according to specific `tab`
+ switch(tab) {
+ case ccn_datetimepicker_tabType.year:
+ var startYear = Math.floor((ccn_datetimepicker_displayCacheDateTime.getFullYear() - ccn_datetime_MIN_YEAR) / 12) * 12 + ccn_datetime_MIN_YEAR;
+ var counter = startYear;
+ for(var i = 0; i < 3; i++) {
+ for(var j = 0; j < 4; j++, counter++) {
+ var ele = $('#ccn-datetimepiacker-panelYear-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 1, j + 1));
+ if (counter < ccn_datetime_MAX_YEAR) {
+ ele.attr('data', counter)
+ .text(counter);
+ } else {
+ ele.attr('data', '')
+ .html(' ');
+ }
+
+ if (counter == ccn_datetimepicker_internalDateTime.getFullYear()) ele.attr('picked', 'true');
+ else ele.attr('picked', 'false');
+ }
+ }
+
+ $('#ccn-datetimepiacker-panelYear-title')
+ .text('{0} - {1}'.format(startYear, startYear + 12 < ccn_datetime_MAX_YEAR ? startYear + 12 : ccn_datetime_MAX_YEAR));
+
+ break;
+ case ccn_datetimepicker_tabType.month:
+ $('#ccn-datetimepiacker-panelMonth-table > div > div').attr('picked', 'false');
+ if (ccn_datetimepicker_internalDateTime.getFullYear() == ccn_datetimepicker_displayCacheDateTime.getFullYear()) {
+ var month = ccn_datetimepicker_internalDateTime.getMonth();
+ $('#ccn-datetimepiacker-panelMonth-table > div:nth-child({0}) > div:nth-child({1})'.format(Math.floor(month / 4), month % 4))
+ .attr('picked', 'true');
+ }
+
+ $('#ccn-datetimepiacker-panelMonth-title')
+ .text(ccn_datetimepicker_displayCacheDateTime.getFullYear());
+
+ break;
+ case ccn_datetimepicker_tabType.day:
+ var gottenYear = ccn_datetimepicker_displayCacheDateTime.getFullYear();
+ var gottenMonth = ccn_datetimepicker_displayCacheDateTime.getMonth() + 1;
+ var counter = -ccn_datetime_DayOfWeek(gottenYear, gottenMonth, 1);
+ var days = ccn_datetime_monthDayCount[gottenMonth - 1] + ((gottenMonth == 2 && ccn_datetime_IsLeapYear(year)) ? 1 : 0);
+ for(var i = 0; i < 6; i++) {
+ for(var j = 0; j < 7; j++, counter++) {
+ var ele = $('#ccn-datetimepiacker-panelDay-table > div:nth-child({0}) > div:nth-child({1})'.format(i + 2, j + 1));
+ if (counter < 0 || counter >= days) ele.attr('data', '').html(' ');
+ else ele.attr('data', counter + 1).text(counter + 1);
+
+ if (counter + 1 == ccn_datetimepicker_internalDateTime.getDate()) ele.attr('picked', 'true');
+ else ele.attr('picked', 'false');
+ }
+ }
+
+ $('#ccn-datetimepiacker-panelDay-title')
+ .text('{0} - {1}'.format(
+ ccn_datetimepicker_displayCacheDateTime.getFullYear(),
+ ccn_i18n_UniversalGetMonth(ccn_datetimepicker_displayCacheDateTime.getMonth())
+ ));
+
+ break;
+ case ccn_datetimepicker_tabType.hour:
+
+ break;
+ case ccn_datetimepicker_tabType.minute:
+
+ break;
+ }
+}
+
+function ccn_datetimepicker_Str2TabType(strl) {
+ switch(strl) {
+ case 'year':
+ return ccn_datetimepicker_tabType.year
+ case 'month':
+ return ccn_datetimepicker_tabType.month
+ case 'day':
+ return ccn_datetimepicker_tabType.day
+ case 'hour':
+ return ccn_datetimepicker_tabType.hour
+ case 'minute':
+ return ccn_datetimepicker_tabType.minute
+ }
+ return undefined;
+}
+
+function ccn_datetimepicker_PrevNextYear(isPrev) {
}
+function ccn_datetimepicker_PrevNextMonth(isPrev) {
+
+}
+
+function ccn_datetimepicker_PrevNextDay(isPrev) {
+
+}
+
+function ccn_datetimepicker_ClickYear() {
+
+}
+
+function ccn_datetimepicker_ClickMonth() {
+
+}
+
+function ccn_datetimepicker_ClickDay() {
+
+}
+
+/*
function ccn_datetimepicker_Init() {
var nowtime = new Date();
@@ -122,6 +296,7 @@ function ccn_datetimepicker_SyncEx(pickerIndex) {
.val(1);
}
}
+*/
function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) {
var ele = $('[datetimepicker=' + pickerIndex + ']');
diff --git a/src/static/js/i18n.js b/src/static/js/i18n.js
index b50c353..578ad25 100644
--- a/src/static/js/i18n.js
+++ b/src/static/js/i18n.js
@@ -76,3 +76,9 @@ function ccn_i18n_ApplyLanguage2Content(ctx) {
$(this).html($.i18n.prop($(this).attr('i18n-name')));
});
}
+
+// note: month is zero based
+function ccn_i18n_UniversalGetMonth(month) {
+ return $.i18n.prop('ccn-i18n-universal-month-' + (month + 1));
+}
+
diff --git a/src/static/js/page/calendar.js b/src/static/js/page/calendar.js
index bed607e..3664d4d 100644
--- a/src/static/js/page/calendar.js
+++ b/src/static/js/page/calendar.js
@@ -32,7 +32,6 @@ $(document).ready(function() {
// init datetimepicker
ccn_datetimepicker_Insert();
- ccn_datetimepicker_Init();
// bind tab control switcher and set current tab
$("#tabcontrol-tab-1-1").click(function(){
diff --git a/src/static/js/page/event.js b/src/static/js/page/event.js
index 8c8f578..ff8f967 100644
--- a/src/static/js/page/event.js
+++ b/src/static/js/page/event.js
@@ -20,7 +20,6 @@ $(document).ready(function() {
// init datetimepicker
ccn_datetimepicker_Insert();
- ccn_datetimepicker_Init();
// apply i18n
ccn_i18n_LoadLanguage();
diff --git a/src/static/tmpl/datetimepicker.tmpl b/src/static/tmpl/datetimepicker.tmpl
index e990209..e75f7cf 100644
--- a/src/static/tmpl/datetimepicker.tmpl
+++ b/src/static/tmpl/datetimepicker.tmpl
@@ -2,73 +2,73 @@
-
+
-
+
-
abc
-
abc
-
abc
-
abc
+
+
+
+
-
abc
-
abc
-
abc
-
abc
+
+
+
+
-
abc
-
abc
-
abc
-
abc
+
+
+
+
-
+
-
-
+
-
-