yyc12345/coconut-leaf
1
0
Fork 0
Code Activity

finishing datetimepicker...

Browse Source
This commit is contained in:
yyc12345
2021-03-13 16:48:16 +08:00
parent 1980f61242
commit 46a18fae99
7 changed files with 234 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/static/css/datetimepicker.css
View File

@@ -36,6 +36,11 @@ div.perfectTable > div {
flex-flow: row; flex-flow: row;
} }
div.perfectTable > div > div[picked=true] {
background: hsl(171, 100%, 41%);
color: #fff;
}

6
src/static/js/datetime.js
View File

@@ -2,9 +2,9 @@
var ccn_datetime_monthDayCount = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 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_MIN_YEAR = 1950;
var ccn_datetime_MAX_YEAR = 2199; var ccn_datetime_MAX_YEAR = 2200;
var ccn_datetime_MIN_DATETIME = new Date(Date.UTC(1950, 1, 1, 0, 0, 0, 0)); 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(2200, 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_MIN_TIMESTAMP = Math.floor(ccn_datetime_MIN_DATETIME.getTime() / 60000);
var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000); var ccn_datetime_MAX_TIMESTAMP = Math.floor(ccn_datetime_MAX_DATETIME.getTime() / 60000);

197
src/static/js/datetimepicker.js
View File

@@ -5,26 +5,66 @@ var ccn_datetimepicker_tabType = {
hour: 3, hour: 3,
minute: 4 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_mode = undefined;
var ccn_datetimepicker_pickerIndex = undefined; var ccn_datetimepicker_pickerIndex = undefined;
var ccn_datetimepicker_isUTC = undefined; var ccn_datetimepicker_isUTC = undefined;
var ccn_datetimepicker_callbackFunc = undefined; var ccn_datetimepicker_callbackFunc = undefined;
var internalDateTime = new Date(); var ccn_datetimepicker_internalDateTime = new Date();
var ccn_datetimepicker_displayCacheDateTime = new Date();
// ========================================= export func // ========================================= export func
function ccn_datetimepicker_Insert() { function ccn_datetimepicker_Insert() {
$('body').append(ccn_template_datetimepicker.render()); $('body').append(ccn_template_datetimepicker.render());
// bind event and trigge once // bind size event and trigge once
$(window).resize(function (){ $(window).resize(function (){
$('div.pickerContainer > svg').each(function (){ $('div.pickerContainer > svg').each(function() {
ccn_datetimepicker_OnSvgResize($(this)); ccn_datetimepicker_OnSvgResize($(this));
}); });
}).resize(); }).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) { 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_isUTC = isUTC;
ccn_datetimepicker_callbackFunc = callbackFunc; 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_SwitchTab(mode);
$('#ccn-datetimepicker-modal').show(); $('#ccn-datetimepicker-modal').show();
@@ -46,30 +102,148 @@ function ccn_datetimepicker_OnSvgResize(ele) {
} }
function ccn_datetimepicker_SwitchTab(newTab) { 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) { switch(newTab) {
case ccn_datetimepicker_tabType.year: case ccn_datetimepicker_tabType.year:
$('#ccn-datetimepicker-panel-year').show(); $('#ccn-datetimepicker-panelYear').show();
break; break;
case ccn_datetimepicker_tabType.month: case ccn_datetimepicker_tabType.month:
$('#ccn-datetimepicker-panel-month').show(); $('#ccn-datetimepicker-panelMonth').show();
break; break;
case ccn_datetimepicker_tabType.day: case ccn_datetimepicker_tabType.day:
$('#ccn-datetimepicker-panel-day').show(); $('#ccn-datetimepicker-panelDay').show();
break; break;
case ccn_datetimepicker_tabType.hour: case ccn_datetimepicker_tabType.hour:
ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-hour').show()); $('#ccn-datetimepicker-panelHour').show();
break; break;
case ccn_datetimepicker_tabType.minute: case ccn_datetimepicker_tabType.minute:
ccn_datetimepicker_OnSvgResize($('#ccn-datetimepicker-panel-minute').show()); $('#ccn-datetimepicker-panelMinute').show();
break; 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('&nbsp;');
}
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('&nbsp;');
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() { function ccn_datetimepicker_Init() {
var nowtime = new Date(); var nowtime = new Date();
@@ -122,6 +296,7 @@ function ccn_datetimepicker_SyncEx(pickerIndex) {
.val(1); .val(1);
} }
} }
*/
function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) { function ccn_datetimepicker_Set(pickerIndex, dt, isUTC, mode) {
var ele = $('[datetimepicker=' + pickerIndex + ']'); var ele = $('[datetimepicker=' + pickerIndex + ']');

6
src/static/js/i18n.js
View File

@@ -76,3 +76,9 @@ function ccn_i18n_ApplyLanguage2Content(ctx) {
$(this).html($.i18n.prop($(this).attr('i18n-name'))); $(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));
}

1
src/static/js/page/calendar.js
View File

@@ -32,7 +32,6 @@ $(document).ready(function() {
// init datetimepicker // init datetimepicker
ccn_datetimepicker_Insert(); ccn_datetimepicker_Insert();
ccn_datetimepicker_Init();
// bind tab control switcher and set current tab // bind tab control switcher and set current tab
$("#tabcontrol-tab-1-1").click(function(){ $("#tabcontrol-tab-1-1").click(function(){

1
src/static/js/page/event.js
View File

@@ -20,7 +20,6 @@ $(document).ready(function() {
// init datetimepicker // init datetimepicker
ccn_datetimepicker_Insert(); ccn_datetimepicker_Insert();
ccn_datetimepicker_Init();
// apply i18n // apply i18n
ccn_i18n_LoadLanguage(); ccn_i18n_LoadLanguage();

68
src/static/tmpl/datetimepicker.tmpl
View File

@@ -2,73 +2,73 @@
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card" style="height: 70%;"> <div class="modal-card" style="height: 70%;">
<header class="modal-card-head pickerHeader"> <header class="modal-card-head pickerHeader">
<div><small i18n-name="ccn-i18n-universal-text-year"></small><span id="ccn-datetimepicker-datetime-year">&nbsp;</span></div> <div type="year"><small i18n-name="ccn-i18n-universal-text-year"></small><span id="ccn-datetimepicker-datetime-year">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-month"></small><span id="ccn-datetimepicker-datetime-month">&nbsp;</span></div> <div type="month"><small i18n-name="ccn-i18n-universal-text-month"></small><span id="ccn-datetimepicker-datetime-month">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-day"></small><span id="ccn-datetimepicker-datetime-day">&nbsp;</span></div> <div type="day"><small i18n-name="ccn-i18n-universal-text-day"></small><span id="ccn-datetimepicker-datetime-day">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-hour"></small><span id="ccn-datetimepicker-datetime-hour">&nbsp;</span></div> <div type="hour"><small i18n-name="ccn-i18n-universal-text-hour"></small><span id="ccn-datetimepicker-datetime-hour">&nbsp;</span></div>
<div><small i18n-name="ccn-i18n-universal-text-minute"></small><span id="ccn-datetimepicker-datetime-minute">&nbsp;</span></div> <div type="minute"><small i18n-name="ccn-i18n-universal-text-minute"></small><span id="ccn-datetimepicker-datetime-minute">&nbsp;</span></div>
</header> </header>
<div class="modal-card-body pickerContainer"> <div class="modal-card-body pickerContainer">
<div id="ccn-datetimepicker-panel-year"> <div id="ccn-datetimepicker-panelYear">
<nav class="level is-mobile"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelYear-prevBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a> </a>
</div> </div>
</div> </div>
<div class="level-item">this is a title</div> <div id="ccn-datetimepiacker-panelYear-title" class="level-item"></div>
<div class="level-right"> <div class="level-right">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelYear-nextBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a> </a>
</div> </div>
</div> </div>
</nav> </nav>
<div class="perfectTable"> <div id="ccn-datetimepiacker-panelYear-table" class="perfectTable">
<div> <div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
</div> </div>
<div> <div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
</div> </div>
<div> <div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
<div>abc</div> <div></div>
</div> </div>
</div> </div>
</div> </div>
<div id="ccn-datetimepicker-panel-month"> <div id="ccn-datetimepicker-panelMonth">
<nav class="level is-mobile"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelMonth-prevBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a> </a>
</div> </div>
</div> </div>
<div class="level-item">this is a title</div> <div id="ccn-datetimepiacker-panelMonth-title" class="level-item"></div>
<div class="level-right"> <div class="level-right">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelMonth-nextBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a> </a>
</div> </div>
</div> </div>
</nav> </nav>
<div class="perfectTable"> <div id="ccn-datetimepiacker-panelMonth-table" class="perfectTable">
<div> <div>
<div i18n-name="ccn-i18n-universal-month-1"></div> <div i18n-name="ccn-i18n-universal-month-1"></div>
<div i18n-name="ccn-i18n-universal-month-2"></div> <div i18n-name="ccn-i18n-universal-month-2"></div>
@@ -89,26 +89,26 @@
</div> </div>
</div> </div>
</div> </div>
<div id="ccn-datetimepicker-panel-day"> <div id="ccn-datetimepicker-panelDay">
<nav class="level is-mobile"> <nav class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelDay-prevBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-left"></i></span>
</a> </a>
</div> </div>
</div> </div>
<div class="level-item">this is a title</div> <div id="ccn-datetimepiacker-panelDay-title" class="level-item"></div>
<div class="level-right"> <div class="level-right">
<div class="level-item control"> <div class="level-item control">
<a class="button"> <a id="ccn-datetimepiacker-panelDay-nextBtn" class="button">
<span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span> <span class="icon is-small"><i class="fas fa-chevron-circle-right"></i></span>
</a> </a>
</div> </div>
</div> </div>
</nav> </nav>
<div class="perfectTable"> <div id="ccn-datetimepiacker-panelDay-table" class="perfectTable">
<div> <div>
<div i18n-name="ccn-i18n-universal-week-1"></div> <div i18n-name="ccn-i18n-universal-week-1"></div>
<div i18n-name="ccn-i18n-universal-week-2"></div> <div i18n-name="ccn-i18n-universal-week-2"></div>
@@ -138,7 +138,7 @@
</div> </div>
</div> </div>
</div> </div>
<svg id="ccn-datetimepicker-panel-hour" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200"> <svg id="ccn-datetimepicker-panelHour" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
<circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle> <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
<line x1="100" y1="100" x2="100.000000" y2="20.000000"></line> <line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
<circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle> <circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>
@@ -168,7 +168,7 @@
<text x="48.038476" y="70.000000">22</text> <text x="48.038476" y="70.000000">22</text>
<text x="70.000000" y="48.038476">23</text> <text x="70.000000" y="48.038476">23</text>
</svg> </svg>
<svg id="ccn-datetimepicker-panel-minute" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200"> <svg id="ccn-datetimepicker-panelMinute" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid" viewBox="0 0 200 200">
<circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle> <circle cx="100.000000" cy="100.000000" r="100.000000" type="background"></circle>
<line x1="100" y1="100" x2="100.000000" y2="20.000000"></line> <line x1="100" y1="100" x2="100.000000" y2="20.000000"></line>
<circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle> <circle cx="100.000000" cy="20.000000" r="1em" type="symbol"></circle>