Skip to content

Commit 982ccc6

Browse files
petersirkapetersirka
committed
Added option to set time in j-DatePicker.
1 parent 2dffa1b commit 982ccc6

File tree

4 files changed

+169
-45
lines changed

4 files changed

+169
-45
lines changed

‎j-DatePicker/component.css

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,60 @@
1-
.ui-datepicker-container { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 99; }
2-
.ui-datepicker { font-size: 12px; width: 247px; height: 300px; position: absolute; background-color: #FFF; border: 1px solid #E0E0E0; left: 100px; top: 100px; border-radius: var(--radius); z-index: 100; color: gray; box-shadow: 0 5px 25px rgba(0,0,0,0.1); opacity: 0; transform: scale(0.6); transition: all 0.2s; }
3-
.ui-datepicker-visible { transform: scale(1); opacity: 1; }
1+
.ui-datepicker-container { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 99; }
2+
.ui-datepicker { -moz-transform: scale(0.6); -moz-transition: all 0.2s; -ms-transform: scale(0.6); -ms-transition: all 0.2s; -webkit-transform: scale(0.6); -webkit-transition: all 0.2s; background-color: #FFF; border-radius: var(--radius); border: 1px solid #E0E0E0; box-shadow: 0 5px 25px rgba(0,0,0,0.1); color: gray; filter: alpha(opacity=0); font-size: 12px; left: 100px; opacity: 0; position: absolute; top: 100px; transform: scale(0.6); transition: all 0.2s; width: 247px; z-index: 100; }
3+
.ui-datepicker-visible { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); filter: alpha(opacity=100); opacity: 1; transform: scale(1); }
44
.ui-datepicker-disabled { color: silver !important; cursor: pointer; }
5-
.ui-datepicker-body, .ui-datepicker-months, .ui-datepicker-years { height: 235px; }
6-
.ui-datepicker-footer { height: 28px; border-top: 1px solid #E0E0E0; font-size: 11px; padding: 0 8px; line-height: 26px; background-color: #F8F8F8; display: flex; justify-content: space-between; }
7-
.ui-datepicker-footer > span:hover { text-decoration: underline; }
8-
.ui-datepicker-now, .ui-datepicker-clear { color: #000; cursor: pointer; }
5+
.ui-datepicker-body,.ui-datepicker-months,.ui-datepicker-years { height: 235px; }
6+
.ui-datepicker-footer { background-color: #F8F8F8; border-top: 1px solid #E0E0E0; display: flex; font-size: 11px; height: 28px; justify-content: space-between; line-height: 26px; padding: 0 8px; }
7+
.ui-datepicker-footer > span: hover { text-decoration: underline; }
8+
.ui-datepicker-now,.ui-datepicker-clear { color: #000; cursor: pointer; }
99
.ui-datepicker-day-today div { background-color: #F0F0F0; font-weight: bold; }
10-
.ui-datepicker-selected div { background-color: var(--color); font-weight: bold; color: #FFF; }
11-
.ui-datepicker-date i { position: absolute; left: 12px; top: 25px; font-size: 12px; color: red; }
12-
.ui-datepicker-months > div { width: 61px; height: 78px; line-height: 76px; position: relative; display: inline-block; text-align: center; cursor: pointer; text-transform: uppercase; font-weight: bold; }
13-
.ui-datepicker-months > div > div { width: 50px; height: 50px; line-height: 46px; position: relative; display: inline-block; border-radius: 100%; border: 2px solid transparent; }
14-
.ui-datepicker-months > div:hover > div { border-color: #E0E0E0; color: #000; }
10+
.ui-datepicker-selected div { background-color: var(--color); color: #FFF; font-weight: bold; }
11+
.ui-datepicker-date i { color: red; font-size: 12px; left: 12px; position: absolute; top: 25px; }
12+
.ui-datepicker-months > div { cursor: pointer; display: inline-block; font-weight: bold; height: 78px; line-height: 76px; position: relative; text-align: center; text-transform: uppercase; width: 61px; }
13+
.ui-datepicker-months > div > div { border-radius: 100%; border: 2px solid transparent; display: inline-block; height: 50px; line-height: 46px; position: relative; width: 50px; }
14+
.ui-datepicker-months > div: hover > div { border-color: #E0E0E0; color: #000; }
1515
.ui-datepicker-years { padding: 5px 0 0; }
16-
.ui-datepicker-years > div { width: 49px; height: 46px; line-height: 44px; position: relative; display: inline-block; text-align: center; cursor: pointer; }
17-
.ui-datepicker-years > div > div { width: 40px; height: 40px; line-height: 36px; position: relative; display: inline-block; border-radius: 100%; border: 2px solid transparent; }
18-
.ui-datepicker-years > div:hover > div { border-color: #E0E0E0; color: #000;}
19-
.ui-datepicker-header { height: 35px; border-bottom: 1px solid #E0E0E0; text-align: center; font-size: 14px; }
20-
.ui-datepicker-prev { float: left; line-height: 34px; width: 34px; color: #000; cursor: pointer; }
21-
.ui-datepicker-next { float: right; line-height: 34px; width: 34px; color: #000; cursor: pointer; }
22-
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { background-color: #F0F0F0; }
23-
.ui-datepicker-info { margin: 0 34px; line-height: 34px; }
16+
.ui-datepicker-years > div { cursor: pointer; display: inline-block; height: 46px; line-height: 44px; position: relative; text-align: center; width: 49px; }
17+
.ui-datepicker-years > div > div { border-radius: 100%; border: 2px solid transparent; display: inline-block; height: 40px; line-height: 36px; position: relative; width: 40px; }
18+
.ui-datepicker-years > div: hover > div { border-color: #E0E0E0; color: #000; }
19+
.ui-datepicker-header { border-bottom: 1px solid #E0E0E0; font-size: 14px; height: 35px; text-align: center; }
20+
.ui-datepicker-prev { color: #000; cursor: pointer; float: left; line-height: 34px; width: 34px; }
21+
.ui-datepicker-next { color: #000; cursor: pointer; float: right; line-height: 34px; width: 34px; }
22+
.ui-datepicker-prev: hover,.ui-datepicker-next: hover { background-color: #F0F0F0; }
23+
.ui-datepicker-info { line-height: 34px; margin: 0 34px; }
2424
.ui-datepicker-info > span { cursor: pointer; }
25-
.ui-datepicker-info > span:hover { color: #000; }
25+
.ui-datepicker-info > span: hover { color: #000; }
2626
.ui-datepicker-info .ui-datepicker-year { margin-left: 5px; }
27-
.ui-datepicker-week > div, .ui-datepicker-days > div { width: 35px; height: 35px; line-height: 35px; position: relative; display: inline-block; vertical-align: middle; text-align: center; }
28-
.ui-datepicker-week > div { height: 25px; line-height: 25px; font-weight: bold; color: #000; border-bottom: 1px solid #E0E0E0; }
29-
.ui-datepicker-days > div { font-size: 11px; cursor: pointer; }
30-
.ui-datepicker-date:hover > div { border-color: #E0E0E0; color: #000; }
31-
.ui-datepicker-selected:hover > div { border-color: var(--color); color: #FFF; }
32-
.ui-datepicker-days > div > div { width: 28px; height: 28px; line-height: 24px; border-radius: 100%; margin: 0 auto; position: relative; display: inline-block; border: 2px solid transparent; }
27+
.ui-datepicker-week > div,.ui-datepicker-days > div { display: inline-block; height: 35px; line-height: 35px; position: relative; text-align: center; vertical-align: middle; width: 35px; }
28+
.ui-datepicker-week > div { border-bottom: 1px solid #E0E0E0; color: #000; font-weight: bold; height: 25px; line-height: 25px; }
29+
.ui-datepicker-days > div { cursor: pointer; font-size: 11px; }
30+
.ui-datepicker-date: hover > div { border-color: #E0E0E0; color: #000; }
31+
.ui-datepicker-selected: hover > div { border-color: var(--color); color: #FFF; }
32+
.ui-datepicker-days > div > div { border-radius: 100%; border: 2px solid transparent; display: inline-block; height: 28px; line-height: 24px; margin: 0 auto; position: relative; width: 28px; }
33+
.ui-datepicker-time { align-items: center; background-color: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: center; padding: 10px; }
34+
.ui-datepicker-time .ti-clock { margin-right: 32px; }
35+
.ui-datepicker-select-wrapper { border-radius: 3px; border: 1px solid #E0E0E0; gap: 0; overflow: hidden; transform: translateX(-22px); }
36+
.ui-datepicker-select-wrapper.col-2 { columns: 2; }
37+
.ui-datepicker-select-wrapper.col-3 { columns: 3; }
38+
.ui-datepicker-time select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: none; border-radius: 0; border: none; color: inherit; color: #000; font: inherit; margin: 0; outline: none; padding: 0; padding: 5px 10px; width: 100%; }
39+
.ui-datepicker-selecticon { position: relative; width: 50px; }
40+
.ui-datepicker-selecticon i { pointer-events: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
41+
.ui-datepicker-select-wrapper > .ui-datepicker-selecticon: first-of-type:: after { content: ': '; position: absolute; right: -1px; top: 4px; }
42+
.ui-datepicker-selecticon.ampm:: after { content: ': '; left: -1px; position: absolute; top: 4px; }
3343

3444
.ui-dark .ui-datepicker { background-color: #282828; border-color: #404040; color: gray; }
3545
.ui-dark .ui-datepicker-disabled { color: #505050 !important; }
36-
.ui-dark .ui-datepicker-footer { border-top-color: #404040; background-color: #303030; }
37-
.ui-dark .ui-datepicker-now, .ui-dark .ui-datepicker-clear { color: #FFF; }
46+
.ui-dark .ui-datepicker-footer { background-color: #303030; border-top-color: #404040; }
47+
.ui-dark .ui-datepicker-now,.ui-dark .ui-datepicker-clear { color: #FFF; }
3848
.ui-dark .ui-datepicker-day-today div { background-color: #353535; }
3949
.ui-dark .ui-datepicker-selected div { background-color: var(--color); color: #FFF; }
4050
.ui-dark .ui-datepicker-date i { color: red; }
41-
.ui-dark .ui-datepicker-months > div:hover > div { border-color: #505050; color: #FFF; }
42-
.ui-dark .ui-datepicker-years > div:hover > div { border-color: #505050; color: #FFF; }
51+
.ui-dark .ui-datepicker-months > div: hover > div { border-color: #505050; color: #FFF; }
52+
.ui-dark .ui-datepicker-years > div: hover > div { border-color: #505050; color: #FFF; }
4353
.ui-dark .ui-datepicker-header { border-bottom-color: #404040; }
4454
.ui-dark .ui-datepicker-prev { color: #FFF; }
4555
.ui-dark .ui-datepicker-next { color: #FFF; }
46-
.ui-dark .ui-datepicker-prev:hover, .ui-dark .ui-datepicker-next:hover { background-color: #303030; }
47-
.ui-dark .ui-datepicker-info > span:hover { color: #FFF; }
48-
.ui-dark .ui-datepicker-week > div { color: #FFF; border-bottom-color: #404040; }
49-
.ui-dark .ui-datepicker-date:hover > div { border-color: #505050; color: #FFF; }
50-
.ui-dark .ui-datepicker-selected:hover > div { border-color: var(--color); color: #FFF; }
56+
.ui-dark .ui-datepicker-prev: hover,.ui-dark .ui-datepicker-next: hover { background-color: #303030; }
57+
.ui-dark .ui-datepicker-info > span: hover { color: #FFF; }
58+
.ui-dark .ui-datepicker-week > div { border-bottom-color: #404040; color: #FFF; }
59+
.ui-dark .ui-datepicker-date: hover > div { border-color: #505050; color: #FFF; }
60+
.ui-dark .ui-datepicker-selected: hover > div { border-color: var(--color); color: #FFF; }

‎j-DatePicker/component.js

Lines changed: 120 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -271,12 +271,14 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
271271
return;
272272
}
273273

274-
var time = self.time.split(':');
274+
if (!self.opt.clock) {
275+
var time = self.time.split(':');
275276

276-
if (time.length > 1) {
277-
dt.setHours(+(time[0] || '0'));
278-
dt.setMinutes(+(time[1] || '0'));
279-
dt.setSeconds(+(time[2] || '0'));
277+
if (time.length > 1) {
278+
dt.setHours(+(time[0] || '0'));
279+
dt.setMinutes(+(time[1] || '0'));
280+
dt.setSeconds(+(time[2] || '0'));
281+
}
280282
}
281283

282284
self.opt.scope && M.scope(self.opt.scope);
@@ -352,7 +354,47 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
352354

353355
for (var i = 0; i < 42; i++)
354356
builder.push('<div class="{0}-date"><div></div></div>'.format(cls, i));
355-
builder.push('</div></div><div class="{0}-footer"><span class="{0}-now">{2}</span><span class="{0}-clear">{3}</span></div>'.format(cls, config.close, config.today, clearbtn));
357+
358+
builder.push('</div></div>');
359+
360+
if (self.opt.clock) {
361+
var cols = self.opt.ampm ? ' col-3' : ' col-2';
362+
var timepicker = '<div class="{0}-time"><i class="ti ti-clock"></i><div class="{0}-select-wrapper{1}">{{ content }}</div></div>'.format(cls, cols);
363+
var selecthours = '<div class="{0}-selecticon"><select id="{0}-hours" class="{0}-hours">{{ options }}</select><i class="ti ti-angle-down"></i></div>'.format(cls);
364+
var selectminutes = '<div class="{0}-selecticon"><select id="{0}-minutes" class="{0}-minutes">{{ options }}</select><i class="ti ti-angle-down"></i></div>'.format(cls);
365+
var selectampm = '';
366+
367+
var hoursopt = [];
368+
var minutesopt = [];
369+
370+
if (self.opt.ampm) {
371+
for (let i = 1; i <= 12; i++) {
372+
let val = i.toString().padStart(2, "0");
373+
hoursopt.push('<option value="{0}">{0}</option>'.format(val));
374+
}
375+
} else {
376+
for (let i = 0; i < 24; i++) {
377+
let val = i.toString().padStart(2, "0");
378+
hoursopt.push('<option value="{0}">{0}</option>'.format(val));
379+
}
380+
}
381+
382+
for (let i = 0; i < 60; i++) {
383+
let val = i.toString().padStart(2, "0");
384+
minutesopt.push('<option value="{0}">{0}</option>'.format(val));
385+
}
386+
387+
if (self.opt.ampm)
388+
selectampm = '<div class="{0}-selecticon ampm"><select id="{0}-ampm" class="{0}-ampm"><option value="am">AM</option><option value="pm">PM</option></select><i class="ti ti-angle-down"></i></div>'.format(cls);
389+
390+
selecthours = selecthours.arg({ options: hoursopt.join('') });
391+
selectminutes = selectminutes.arg({ options: minutesopt.join('') });
392+
393+
timepicker = timepicker.arg({ content: selecthours + selectminutes + selectampm });
394+
builder.push(timepicker);
395+
}
396+
397+
builder.push('<div class="{0}-footer"><span class="{0}-now">{2}</span><span class="{0}-clear">{3}</span></div>'.format(cls, config.close, config.today, clearbtn));
356398

357399
self.html('<div class="{0}">{1}</div>'.format(cls, builder.join('')));
358400
main = $(self.find(cls2)[0]);
@@ -437,7 +479,26 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
437479

438480
self.find(cls2 + '-date').on('click', function() {
439481
var dt = $(this).attrd('date').split('-');
440-
self.setdate(new Date(+dt[0], +dt[1], +dt[2], 12, 0, 0));
482+
483+
var hours = 12;
484+
var minutes = 0;
485+
486+
if (self.opt.clock) {
487+
hours = parseInt(self.find(cls2 + '-hours').val());
488+
minutes = parseInt(self.find(cls2 + '-minutes').val());
489+
490+
if (self.opt.ampm) {
491+
var ampm = self.find(cls2 + '-ampm').val();
492+
493+
if (ampm === 'pm' && hours < 12) {
494+
hours += 12;
495+
} else if (ampm === 'am' && hours === 12) {
496+
hours = 0;
497+
}
498+
}
499+
}
500+
501+
self.setdate(new Date(+dt[0], +dt[1], +dt[2], hours, minutes, 0));
441502
self.hide();
442503
});
443504

@@ -447,6 +508,17 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
447508
});
448509

449510
self.find(cls2 + '-clear').on('click', function() {
511+
if (self.opt.clock ) {
512+
self.find(cls2 + '-minutes').val('00');
513+
514+
if (self.opt.ampm) {
515+
self.find(cls2 + '-hours').val('01');
516+
self.find(cls2 + '-ampm').val('am');
517+
} else {
518+
self.find(cls2 + '-hours').val('00');
519+
}
520+
}
521+
450522
self.setdate(null);
451523
self.hide();
452524
});
@@ -478,6 +550,47 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
478550
e.preventDefault();
479551
e.stopPropagation();
480552
});
553+
554+
self.opt.clock && self.find(cls2 + '-hours').on('change', function() {
555+
var el = $(this);
556+
var value = parseInt(el.val());
557+
558+
if (self.opt.ampm) {
559+
var ampm = self.find(cls2 + '-ampm').val();
560+
561+
if (ampm === 'pm' && value < 12) {
562+
value += 12;
563+
} else if (ampm === 'am' && value === 12) {
564+
value = 0;
565+
}
566+
}
567+
568+
current.setHours(value);
569+
self.setdate(current);
570+
});
571+
572+
self.opt.clock && self.find(cls2 + '-minutes').on('change', function() {
573+
var el = $(this);
574+
var value = parseInt(el.val());
575+
576+
current.setMinutes(value);
577+
self.setdate(current);
578+
});
579+
580+
self.opt.clock && self.opt.ampm && self.find(cls2 + '-ampm').on('change', function() {
581+
var el = $(this);
582+
var value = el.val();
583+
var hour = current.getHours();
584+
585+
if (value === 'pm' && hour < 12) {
586+
hour += 12;
587+
} else if (value === 'am' && hour >= 12) {
588+
hour -= 12;
589+
}
590+
591+
current.setHours(hour);
592+
self.setdate(current);
593+
});
481594
};
482595

483596
self.date = function(value, skipday) {
@@ -563,7 +676,6 @@ COMPONENT('datepicker', 'today:Set today;clear:Clear;firstday:-1', function(self
563676
if (el.length && !el.find('i').length)
564677
el.append('<i class="ti ti-circle-alt"></i>');
565678
}
566-
567679
});
568680

569681
var info = self.find(cls2 + '-info');

‎j-DatePicker/component.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"datecreated": "2019-02-06T21:33:00.000Z",
3-
"dateupdated": "2024-10-30T09:33:00.000Z",
3+
"dateupdated": "2025-05-07T11:57:00.000Z",
44
"name": "j-DatePicker",
55
"jcomponent": "19|20",
66
"color": "white",

‎j-DatePicker/readme.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ opt.value = new Date();
2626
// or opt.value = 'path.to.date'; --> then "opt.callback" is disabled
2727
// opt.align {String} : align "left" (default), "center" or "right"
2828
// opt.position {String} : position "top" (default) or "bottom"
29+
// NEW: opt.time {Boolean} : enables time (default: false)
30+
// NEW: opt.ampm {Boolean} : enables AM/PM (default: false)
2931

3032
opt.clear = false; // Removes "clear" button from datepicker. If this property is not specified as "false" - "clear" button will be shown
3133

0 commit comments

Comments
 (0)