VaKeR CYBER ARMY
Apache/2.4.41 (Ubuntu) Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 www-data ( 33 )7.4.33 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, / var /www /html /libs /absol-acomp /demo /
Current File : /var/www/html/libs/absol-acomp/demo/dateinput.html <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=no">
<title>Date Input</title>
<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>
:root {
font-size: 14px;
}
</style>
</head>
<body>
<h1>Date Input</h1>
<div class="input-demo">
</div>
<script>
var _ = absol._;
var $ = absol.$;
</script>
<script class="viewable">
var inputDemoDiv = $('.input-demo');
var supportFormats = ['Quý QQ, yyyy', 'dd/mm/yyyy', 'Tuần ww, yyyy', null, 'yyyy', 'mm/yyyy', "Năm yyyy",
'dd/mm/yyyy', 'dd-mm-yyyy', 'dd.mm.yyyy', 'yyyy/mm/dd', 'yyyy-mm-dd', 'mm/dd/yyyy', 'mmm-dd,yyyy'];
supportFormats.forEach(function (format) {
_(
{
style: {
'margin-bottom': '10px'
},
child: [
{
tag: 'label',
style: { width: '10em', 'line-height': '30px', display: 'inline-block' },
child: { text: format + '' }
},
{
tag: 'dateinput',
props: {
value: new Date(),
format: format
},
on: {
change: function () {
console.trace(this.value);
}
}
}
]
}
).addTo(inputDemoDiv);
_(
{
style: {
'margin-bottom': '10px'
},
child: [
{
tag: 'label',
style: { width: '10em', 'line-height': '30px', display: 'inline-block' },
child: { text: format + '' }
},
{
tag: 'dateinput',
props: {
format: format
},
on: {
change: function () {
console.trace(this.value);
}
}
}
]
}
).addTo(inputDemoDiv);
_(
{
style: {
'margin-bottom': '10px'
},
child: [
{
tag: 'label',
style: { width: '10em', 'line-height': '30px', display: 'inline-block' },
child: { text: format + '(notNull)' }
},
{
tag: 'dateinput',
props: {
value: new Date(),
format: format,
notNull: true
},
on: {
change: function () {
console.log(this.value);
}
}
}
]
}
).addTo(inputDemoDiv);
_(
{
style: {
'margin-bottom': '10px'
},
child: [
{
tag: 'label',
style: { width: '10em', 'line-height': '30px', display: 'inline-block' },
child: { text: format + '(notNull)' }
},
{
tag: 'dateinput',
props: {
format: format,
notNull: true
},
on: {
change: function () {
console.log(this.value);
}
}
}
]
}
).addTo(inputDemoDiv);
})
</script>
<h1>Expert</h1>
<div id="min-max-inputs">
<label id="min-lb">Min </label><input id="min-ip"/>
<label id="max-lb"> Max </label><input id="max-ip"/>
<label id="disabled-lb"> Disabled </label><input id="disabled-ip"/>
</div>
<script class="viewable">
var mmInputs = $('#min-max-inputs');
var minValue = new Date(2019, 5, 17);
var maxValue = new Date(2020, 0, 1)
var minIp = absol._(
{
tag: 'dateinput',
props: {
value: minValue,
maxDateLimit: maxValue
},
on: {
change: function (ev) {
maxIp.minDateLimit = ev.value;
}
}
}
);
var maxIp = absol._(
{
tag: 'dateinput',
props: {
value: maxValue,
minDateLimit: minValue,
// dateToString: 'mmm-dd-yyyy', only support dd/mm/yyyy now
},
on: {
change: function (ev) {
minIp.maxDateLimit = ev.value;
}
}
}
);
$('#min-ip', mmInputs).selfReplace(minIp);
$('#max-ip', mmInputs).selfReplace(maxIp);
$('#disabled-ip', mmInputs).selfReplace(_({
tag: 'dateinput',
props: {
// value: maxValue,
minDateLimit: minValue,
disabled: true
}
}));
</script>
<h1>DateNLevelInput</h1>
<script>
_({
tag: 'datenlevelinput',
props: {},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
_('br').addTo(document.body);
_({
tag: 'datenlevelinput',
props: {
value: new Date()
},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
_('br').addTo(document.body);
_({
tag: 'datenlevelinput',
props: {
value: new Date(),
level: 'week',
allowLevels: ['week', 'quarter']
},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
x1 = _({
tag: 'datenlevelinput',
props: {
disabled: true,
value: new Date(),
level: 'week',
allowLevels: ['week', 'quarter']
},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
x2 = _({
tag: 'datenlevelinput',
props: {
readOnly: true,
value: new Date(),
level: 'week',
allowLevels: ['week', 'quarter']
},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
x2 = _({
tag: 'datenlevelinput',
class: 'as-border-none',
props: {
readOnly: true,
value: new Date(),
level: 'week',
allowLevels: ['week', 'quarter']
},
on: {
change: function () {
console.log(this.value, this.level);
}
}
}).addTo(document.body);
setTimeout(() => {
x1.scrollIntoView();
}, 1500);
</script>
<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>
</body>
</html> 
Server : Apache/2.4.41 (Ubuntu)