add dial plate svg

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;