Skip to content

Commit f2df2c2

Browse files
author
hikki
committed
v5.0 时间选择器flatpickr
1 parent 34c6b87 commit f2df2c2

File tree

4 files changed

+27
-59
lines changed

4 files changed

+27
-59
lines changed

‎resources/assets/component.js

Lines changed: 11 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -887,7 +887,7 @@ window.ComponentLine = class {
887887
this.DOM.addEventListener("contextmenu", (e) => {
888888
e.preventDefault();
889889
});
890-
this.format_settings = {};
890+
this.flatpickr_settings = {};
891891
this.COLUMNS = columns;
892892
this.DATA = data;
893893
this.OPTIONS = Object.assign({
@@ -907,8 +907,6 @@ window.ComponentLine = class {
907907
this.makeBody();
908908
/*foot*/
909909
this.makeFoot(foot);
910-
/*datetime*/
911-
this.datepicker();
912910
/*sort*/
913911
if (this.OPTIONS.sortable) this.sortable();
914912
}
@@ -940,19 +938,7 @@ window.ComponentLine = class {
940938
foot.append(td);
941939
break;
942940
case 'datetime':
943-
let format;
944-
switch (val.format) {
945-
case 1:
946-
format = 'YYYY-MM-DD';
947-
break;
948-
case 2:
949-
format = 'YYYY';
950-
break;
951-
default:
952-
format = 'YYYY-MM-DD HH:mm:ss';
953-
break;
954-
}
955-
this.format_settings[column] = format;
941+
this.flatpickr_settings[column] = val.config;
956942
style = val.style ? `${val.style}` : '';
957943
foot.insertAdjacentHTML('beforeend', `<th style="position: relative;overflow: unset;${style}"><input class="dlp dlp-input datetime-${column}" data-column="${column}"/></th>`);
958944
break;
@@ -971,6 +957,11 @@ window.ComponentLine = class {
971957
_component.imgDelay(`${this.NAME}-${column}-img`,200,zoom);
972958
});
973959
}
960+
if(val.type === 'datetime' || val.insert_type === 'datetime'){
961+
setTimeout(() => {
962+
document.querySelectorAll(`#${this.NAME} input.datetime-${column}`).flatpickr(this.flatpickr_settings[column]);
963+
});
964+
}
974965
}
975966
head += '<th class="operate-column" style="width: 48px;"></th></tr>';
976967
foot.insertAdjacentHTML('beforeend', '<th class="insert_handel operate-column" style="width: 48px;"><div></div></th></tr>');
@@ -1096,7 +1087,6 @@ window.ComponentLine = class {
10961087
this.DATA.push(insert);
10971088
this.DATA_INPUT.value = JSON.stringify(this.DATA);
10981089
this.TBODY_DOM.scrollTop = this.TBODY_DOM.scrollHeight;
1099-
this.datepicker();
11001090
}, false);
11011091
this.TABLE_DOM.querySelector('.insert_handel div').appendChild(i);
11021092
}
@@ -1129,19 +1119,7 @@ window.ComponentLine = class {
11291119
input.setAttribute('class', `dlp dlp-input datetime-${column}`);
11301120
input.setAttribute('data-column', column);
11311121
input.value = value;
1132-
let format;
1133-
switch (settings.format) {
1134-
case 1:
1135-
format = 'YYYY-MM-DD';
1136-
break;
1137-
case 2:
1138-
format = 'YYYY';
1139-
break;
1140-
default:
1141-
format = 'YYYY-MM-DD HH:mm:ss';
1142-
break;
1143-
}
1144-
this.format_settings[column] = format;
1122+
11451123
input.addEventListener('blur', () => {
11461124
let key = this.searchChildrenDomIndex(input.parentNode.parentNode);
11471125
let column = input.getAttribute('data-column');
@@ -1152,6 +1130,9 @@ window.ComponentLine = class {
11521130
}, false);
11531131
td.appendChild(input);
11541132
td.style.position = 'relative';
1133+
setTimeout(()=>{
1134+
input.flatpickr(settings.config);
1135+
});
11551136
break;
11561137
case 'select':
11571138
td.append(this.menuMake(column, value, settings.options, settings.options_limit, settings.name));
@@ -1327,17 +1308,6 @@ window.ComponentLine = class {
13271308
});
13281309
}
13291310

1330-
datepicker() {
1331-
if (typeof jQuery != 'undefined') {
1332-
setTimeout(() => {
1333-
for (let col in this.format_settings) {
1334-
let format = this.format_settings[col];
1335-
$(`#${this.NAME} input.datetime-${col}`).datetimepicker({"format": format, "locale": "zh-CN"});
1336-
}
1337-
});
1338-
}
1339-
}
1340-
13411311
searchChildrenDomIndex(dom) {
13421312
let i = 0;
13431313
while ((dom = dom.previousSibling) != null) i++;

‎src/Widget/Linear.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ public function render()
5454
* column.style 自定义style格式
5555
* column.options insert_type或type为select时 多选项
5656
* column.options_limit insert_type或type为select时 多选项选择限制数 数字类型默认0:无限制
57-
* column.format insert_type或type为datetime时时间格式 数字类型默认0: YYYY-MM-DD HH:mm:ss | 1: YYYY-MM-DD | 2: YYYY
57+
* column.config insert_type或type为datetime时 配置参考flatpickr官方文档
5858
* @param array $list 数据集 二维数据集列表格式
5959
* @param array $style 组件样式设置 宽:width 高:height
6060
* @param array $options 操作列设置

‎test/example.php

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -157,20 +157,20 @@ protected function form($id)
157157
->options($this->cascadeExampleData())
158158
->checked([614,550,543])
159159
->attribute(['height'=>'200px']);
160-
161160
/**
162161
* 线组件
163162
* columns[column...] 列数据格式配置
164163
* column.name 列表头名称
165-
* column.type 列数据 输出格式input,text,hidden,datetime,date,select,image,file
164+
* column.type 列数据 输出格式input,text,hidden,datetime,date,select,image
166165
* column.insert_type 增加列格式(不填时默认等同于type值) hidden表示置空
167-
* column.options insert_type或type为select时 多选项
168-
* column.options_limit insert_type或type为select时 多选项选择限制数 默认0:无限制
166+
* column.options insert_type或type为select时 多选项配置 例如.[1=>'是',2=>'否']
167+
* column.options_limit insert_type或type为select时 多选项选择限制数 int 默认0:无限制
168+
* column.config insert_type或type为datetime时 配置项参考flatpickr官方文档
169169
* column.style 自定义style格式
170-
* list 设置数据集 二维数组列表格式
171-
* attribute.width 设置宽度 默认100%
172-
* attribute.height 设置高度 默认355px
173-
* attribute.options 设置操作列 默认开启:可排序/可删除/可新增['sortable' => true, 'delete' => true, 'insert' => true]
170+
* list 设置数据集 二维数组列表格式
171+
* attribute.width 设置宽度 默认100%
172+
* attribute.height 设置高度 默认355px
173+
* attribute.options 设置操作列 默认开启:可排序/可删除/可新增['sortable' => true, 'delete' => true, 'insert' => true]
174174
*/
175175
$form->Linear('line', '列表管理器')
176176
->columns([

‎test/index.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,9 @@
66
<link rel="stylesheet" href="../resources/assets/component.css">
77
<script src="../resources/assets/component.js"></script>
88

9-
<!--时间选择器依赖项-->
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
14-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
15-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
16-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
9+
<!--flatpickr时间选择器依赖项-->
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
1712
</head>
1813
<body>
1914
<svg style="position: absolute;top:0;left: 0;right: 0;bottom: 0;" xmlns='http://www.w3.org/2000/svg'
@@ -236,7 +231,10 @@
236231
"name": {"name": "名称", "type": "input"},
237232
"meta": {"name": "番号", "type": "text","insert_type":"input"},
238233
"url": {"name": "图片", "type": "image"},
239-
"time": {"name": "更新时间", "type": "datetime","insert_type":"datetime"},
234+
"time": {"name": "更新时间", "type": "datetime","insert_type":"datetime","config":{
235+
enableTime: true,
236+
dateFormat: "Y-m-d H:i",
237+
}},
240238
"is-small": {"name": "高清", "type": "select","options":{1:'是',2:'否'},"options_limit":1, "style": "width:60px"}
241239
}, [{
242240
"name": "ごめんなさい、もう別れたいの…別れを拒む彼氏と結んだ《愛人》と言う名の従順契約 美乃すずめ",

0 commit comments

Comments
 (0)