Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory : /var/www/html/libs/absol-acomp/demo/
Upload File :
Current File : /var/www/html/libs/absol-acomp/demo/timeinput.html
<!DOCTYPE html>
<html>
<head>
<title>TimeInput</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
<!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
<script src="../dist/absol-acomp.js?<?php echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
<script src="https://absol.cf/hightlight/highlight.pack.js"></script>
<style>
body {
/* background-color: black; */
min-height: 80vh;
}
</style>
</head>
<body>
<h3>Time24Picker</h3>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
_({
tag: 'chrometime24picker',
props: {}
}).addTo(document.body);
})();
</script>
<h3>TimeInput</h3>
<div class="input-demo"></div>
<script>
var isTouchDevice = 'ontouchstart' in window ||
window.DocumentTouch && document instanceof window.DocumentTouch ||
navigator.maxTouchPoints > 0 ||
window.navigator.msMaxTouchPoints > 0;
</script>
<script class="viewable">
(function () {
var _ = absol._;
var $ = absol.$;
var inputDemoDiv = $('.input-demo');
_({
tag: 'timeinput',
style: {
// fontSize: isTouchDevice ? '4vw' : '14px'//default 14px, optional
},
props: {
dayOffset: new Date(),//now, dayOffset can be Date or Number
// dayOffset: 1000 * 60 * ( 5* 60 + 59) => 5h59
// hour: 20, or set hour and minute
// minute:59
notNull: false
},
on: {
change: function () {
absol.require('snackbar').show(this.hour + ":" + this.minute + '=>' + this.dayOffset);
}
}
}).addTo(inputDemoDiv);
_({
tag: 'timeinput',
style: {
width: '15em'
// fontSize: isTouchDevice ? '4vw' : '14px'//default 14px, optional
},
props: {
dayOffset: new Date(),//now, dayOffset can be Date or Number
// dayOffset: 1000 * 60 * ( 5* 60 + 59) => 5h59
// hour: 20, or set hour and minute
// minute:59,
format: 'HH giờ mm phút'
},
on: {
change: function () {
absol.require('snackbar').show(this.hour + ":" + this.minute + '=>' + this.dayOffset);
}
}
}).addTo(inputDemoDiv);
_({
tag: 'timeinput',
style: {
width: '15em'
// fontSize: isTouchDevice ? '4vw' : '14px'//default 14px, optional
},
props: {
dayOffset: new Date(),//now, dayOffset can be Date or Number
// dayOffset: 1000 * 60 * ( 5* 60 + 59) => 5h59
// hour: 20, or set hour and minute
// minute:59,
format: 'HH giờ mm phút',
notNull: true
},
on: {
change: function () {
absol.require('snackbar').show(this.hour + ":" + this.minute + '=>' + this.dayOffset);
}
}
}).addTo(inputDemoDiv);
_({
tag: 'timeinput',
style: {
width: '15em'
// fontSize: isTouchDevice ? '4vw' : '14px'//default 14px, optional
},
props: {
dayOffset: new Date(),//now, dayOffset can be Date or Number
// dayOffset: 1000 * 60 * ( 5* 60 + 59) => 5h59
// hour: 20, or set hour and minute
// minute:59,
format: 'hh : mm a',
notNull: true
},
on: {
change: function () {
absol.require('snackbar').show(this.hour + ":" + this.minute + '=>' + this.dayOffset);
}
}
}).addTo(inputDemoDiv);
_({
tag: 'timeinput',
style: {
// fontSize: isTouchDevice ? '4vw' : '14px'//default 14px, optional
},
props: {
// dayOffset: new Date(),//now, dayOffset can be Date or Number
// dayOffset: 1000 * 60 * ( 5* 60 + 59) => 5h59
// hour: 20, or set hour and minute
// minute:59
dayOffset: null,
disabled: true
},
on: {
change: function () {
absol.require('snackbar').show(this.hour + ":" + this.minute + '=>' + this.dayOffset);
}
}
}).addTo(inputDemoDiv);
})();
</script>
<h3>TimeInput(min)</h3>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
var start = _({
tag: 'timeinput',
props: {
format: 'HH:mm',
value: new Date(2021, 8, 9, 11, 30, 0),
min: 1000* (3600* 3 + 60 *8)
},
on: {
change: function () {
}
}
}).addTo(document.body);
})();
</script>
<h3>Time24Input</h3>
<div><label>Thời gian bắt đầu </label><input type="timeinput"/> <label> Thời gian kết thúc </label> <input
type="time24input"/></div>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
var start = _({
tag: 'timeinput',
props: {
format: 'HH:mm',
value: new Date(2021, 8, 9, 11, 30, 0),
notNull: false
},
on: {
change: function () {
end.dayOffset = this.dayOffset
}
}
});
var end = _({
tag: 'time24input',
props: {
// format:'HH:mm',
value: 0
}
});
$('input[type="timeinput"]').selfReplace(start);
$('input[type="time24input"]').selfReplace(end);
})();
</script>
<h2>TimeRange24Input</h2>
<script>
(function () {
var _ = absol._;
var $ = absol.$;
var i0 = _({
tag: 'TimeRange24Input'.toLowerCase(),
style:{
width: '100%'
},
props: {
dayOffset: new Date().getTime(),
duration: 3600 * 1000 * 2.5,
disabled: true
},
on: {
change: function () {
update(i1, o1);
}
}
}).addTo(document.body);
var o0 = _('<span></span>').addTo(document.body);
update(i0, o0);
_('br').addTo(document.body);
_('br').addTo(document.body);
var i1 = _({
tag: 'TimeRange24Input'.toLowerCase(),
props: {
// dayOffset: new Date().getTime(),
// duration: 3600 * 1000 * 2.5,
value: null,
gmt: true,
notNull: true
},
on: {
change: function () {
update(i1, o1);
}
}
}).addTo(document.body);
var o1 = _('<span></span>').addTo(document.body);
function update(i, o) {
o.innerHTML = ' dayOffset: ' + i.dayOffset + ' - duration:' + i.duration;
}
update(i1, o1);
_('br').addTo(document.body);
_('br').addTo(document.body);
var i2 = _({
tag: 'TimeRange24Input'.toLowerCase(),
props: {
dayOffset: 0,
duration: null,
notNull: false
},
on: {
change: function () {
update(i2, o2);
}
}
}).addTo(document.body);
var o2 = _('<span> 0 null</span>').addTo(document.body);
update(i2, o2);
_('br').addTo(document.body);
_('br').addTo(document.body);
var i3 = _({
tag: 'TimeRange24Input'.toLowerCase(),
props: {
dayOffset: null,
duration: 0,
notNull: false
},
on: {
change: function () {
update(i3, o3);
}
}
}).addTo(document.body);
var o3 = _('<span> null 0</span>').addTo(document.body);
update(i3, o3);
_('br').addTo(document.body);
_('br').addTo(document.body);
var i4 = _({
tag: 'TimeRange24Input'.toLowerCase(),
props: {
dayOffset: null,
duration: null,
notNull: false
},
on: {
change: function () {
update(i4, o4);
}
}
}).addTo(document.body);
o4 = _('<span> null null</span>').addTo(document.body);
update(i4, o4);
})();
</script>
<!--<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>-->
</body>
</html>
Server : Apache/2.4.41 (Ubuntu)