［未解决］Framework7中实现同时选择日期和时间

之前已经实现了：

［已解决］如何在Framework7中实现点击列表某行实现跳转到新页面

但是此处只能选择对应的日期，没发选择时间

此处希望实现可以同时选择日期和时间

参考：

Calendar / Datepicker | Framework7 Documentation

去试试

结果搞了半天，用代码：

<ul>

<li>

</div>

</li>

</ul>

</div>

my-app.js

var myCalendar = $$(‘.calenadr-inline’)[0].f7Calendar;

var calendarDateFormat = myApp.calendar({

input: ‘#calendar-date-format’,

dateFormat: ‘DD, MM dd, yyyy’

});

却显示不出来。

最终发现，还看错了：

这个是日期的选择，不带时间的。。。

所以要去找，带时间的

发现SUI有带时间的：

组件 · SUI Mobile －日期时间选择器

SUI Mobile Demo

所以现在就是：

想办法，看看能不能实现，同时使用两套JS框架。。。

结果不行：

加了：

<head>

<title>简道工作台</title>

<!– Path to Framework7 Library CSS–>

<!–<link rel="stylesheet" href="css/framework7.ios.min.css">

<!–<link rel="stylesheet" href="css/framework7.ios.css">

<!– Path to your custom app styles–>

</head>

但是导致页面顶部导航栏出错了：

然后再去找找：

framework7 select date and time

Can we have TIME Picker · Issue #523 · nolimits4web/Framework7

Framework7/kitchen-sink.js at master · nolimits4web/Framework7

Form Elements | Framework7 Documentation

Picker | Framework7 Documentation

->Inline Picker / Date-time

然后用代码：

但是加载不出来。。。

<div class="content-block-title">行内时间和日期选择器</div>

<li>

</div>

</li>

</ul>

</div>

</div>

my-app.js

var today = new Date();

var pickerInline = myApp.picker({

input: ‘#picker-date’,

container: ‘#picker-date-container’,

toolbar: false,

rotateEffect: true,

value: [today.getMonth(), today.getDate(), today.getFullYear(), today.getHours(), (today.getMinutes() < 10 ? ‘0’ + today.getMinutes() : today.getMinutes())],

onChange: function (picker, values, displayValues) {

var daysInMonth = new Date(picker.value[2], picker.value[0]*1 + 1, 0).getDate();

if (values[1] > daysInMonth) {

picker.cols[1].setValue(daysInMonth);

}

formatValue: function (p, values, displayValues) {

return displayValues[0] + ‘ ‘ + values[1] + ‘, ‘ + values[2] + ‘ ‘ + values[3] + ‘:’ + values[4];

cols: [

// Months

{

values: (‘0 1 2 3 4 5 6 7 8 9 10 11’).split(‘ ‘),

displayValues: (‘January February March April May June July August September October November December’).split(‘ ‘),

textAlign: ‘left’

// Days

{

values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],

// Years

{

values: (function () {

var arr = [];

for (var i = 1950; i <= 2030; i++) { arr.push(i); }

return arr;

})(),

// Space divider

{

divider: true,

content: ‘ ‘

// Hours

{

values: (function () {

var arr = [];

for (var i = 0; i <= 23; i++) { arr.push(i); }

return arr;

})(),

// Divider

{

divider: true,

content: ‘:’

// Minutes

{

values: (function () {

var arr = [];

for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? ‘0’ + i : i); }

return arr;

})(),

}

]

});

但是点击后，无法显示出来日期时间的选择器：

参考：

Framework7 Inline Picker / Date-time

去试试

最后是：

把所有内容都放到：

index.html

中：

<!– Scrollable page content–>

<div class="content-block-title">行内时间和日期选择器</div>

<li>

</div>

</li>

</ul>

</div>

</div>

var today = new Date();

var pickerInline = myApp.picker({

input: ‘#picker-date’,

container: ‘#picker-date-container’,

toolbar: false,

rotateEffect: true,

value: [today.getMonth(), today.getDate(), today.getFullYear(), today.getHours(), (today.getMinutes() < 10 ? ‘0’ + today.getMinutes() : today.getMinutes())],

onChange: function (picker, values, displayValues) {

var daysInMonth = new Date(picker.value[2], picker.value[0]*1 + 1, 0).getDate();

if (values[1] > daysInMonth) {

picker.cols[1].setValue(daysInMonth);

}

formatValue: function (p, values, displayValues) {

return displayValues[0] + ‘ ‘ + values[1] + ‘, ‘ + values[2] + ‘ ‘ + values[3] + ‘:’ + values[4];

cols: [

// Months

{

values: (‘0 1 2 3 4 5 6 7 8 9 10 11’).split(‘ ‘),

displayValues: (‘January February March April May June July August September October November December’).split(‘ ‘),

textAlign: ‘left’

// Days

{

values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],

// Years

{

values: (function () {

var arr = [];

for (var i = 1950; i <= 2030; i++) { arr.push(i); }

return arr;

})(),

// Space divider

{

divider: true,

content: ‘ ‘

// Hours

{

values: (function () {

var arr = [];

for (var i = 0; i <= 23; i++) { arr.push(i); }

return arr;

})(),

// Divider

{

divider: true,

content: ‘:’

// Minutes

{

values: (function () {

var arr = [];

for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? ‘0’ + i : i); }

return arr;

})(),

}

]

});

</script>

效果是：

打算去参考：

朝夕日历网页地址创建活动选择日期和时间

结果：

网页打开需要微信登录：

－》在网页端，无法直接打开，只能通过微信授权登录后再去打开。。。

然后再去试试，能不能在子页面：

createActivity.html

中加入上述的选择日期和时间

结果把html和js都放到自页面createActivity.html后，还是无法正常显示。。

picker-date-container not show

看到：

中，picker-date-container的内部，其实是有：

picker-modal picker-columns picker-3d picker-modal-inline

而我这里是没有的。

javascript – jQuery Datepicker close datepicker after selected date – Stack Overflow

难道此处也要加上，类似于：

$(document).ready(function () {

然后对应的picker才能生效？

picker-date-container

picker-date-container framework7

结果调试了半天：

只能实现：

单独打开子页面：

createActivity.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!– We don’t need full layout here, because this page will be parsed with Ajax–>

<!– Top Navbar–>

</div>

<!– Page, data-page contains page name–>

<!– Scrollable page content–>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<!–<div class="content-block-title">起始时间</div>

<li>

</div>

</li>

</ul>

</div>

</div>

</div>–>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</label>

</div>

</li>

</div>

</li>

<li>

<option>事件发生时</option>

</select>

</div>

</li>

</ul>

</div>

</div>

var today = new Date();

var pickerInline = myApp.picker( {

input : ‘#picker-date’, //管理的input元素

container : ‘#picker-date-container’, //内联选取器的容器元素

toolbar : false,

rotateEffect : true,

//默认值设置为今天

value : [ today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), ( today.getMinutes() < 10 ? ‘0’ + today.getMinutes() : today.getMinutes() ) ],

onChange : function( picker, values, displayValues ) {

//第二列，日期，需要依据月份的不同设置值列表

//var daysInMonth = new Date( picker.value[2], picker.value[0] * 1 + 1, 0 ).getDate();

var yearValue = picker.value[0]

var monthValue = picker.value[1]

var daysInMonth = new Date( yearValue, monthValue * 1 + 1, 0 ).getDate();

// if ( values[1] > daysInMonth ) {

// picker.cols[1].setValue( daysInMonth );

// }

if ( values[2] > daysInMonth ) {

picker.cols[2].setValue( daysInMonth );

}

//格式化

formatValue : function( p, values, displayValues ) {

//return displayValues[0] + ‘ ‘ + values[1] + ‘, ‘ + values[2] + ‘ ‘ + values[3] + ‘:’ + values[4];

return displayValues[0] + ‘/’ + values[1] + ‘/’ + values[2] + ‘ ‘ + values[3] + ‘:’ + values[4];

cols : [

// 年度

{

values : ( function() {

var arr = [];

for ( var i = 1950; i <= 2030; i++ ) { arr.push( i ); }

return arr;

} )(),

// 月份

{

values : ( ‘0 1 2 3 4 5 6 7 8 9 10 11’ ).split( ‘ ‘ ),

//displayValues : ( ‘January February March April May June July August September October November December’ ).split( ‘ ‘ ),

//displayValues : ( ‘1月 2月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月’ ).split( ‘ ‘ ),

displayValues : ( ‘1 2 3 4 5 6 7 8 9 10 11 12’ ).split( ‘ ‘ ),

textAlign : ‘left’

// 日期

{ values : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31 ] },

// 日期时间的分隔符列，空格

{ divider : true, content : ‘ ‘ },

// 小时

{

values : ( function() {

var arr = [];

for ( var i = 0; i <= 23; i++ ) { arr.push( i ); }

return arr;

} )(),

// 小时:分钟的分隔符列，冒号

{ divider : true, content : ‘:’ },

// 分钟

{

values : ( function() {

var arr = [];

for ( var i = 0; i <= 59; i++ ) { arr.push( i < 10 ? ‘0’ + i : i ); }

return arr;

} )(),

} ]

} );

</script>

</body>

</html>

是可以看到对应的时间日期选择器的：

但是，从主页面导航过来，就看不到了：

暂时还是无法解决。

搜：

framework7 sub page not show date time picker

katemihalikova/ion-datetime-picker: Date and/or time picker for awesome Ionic framework

Ionic 2: Fixing Date Inputs for the Mobile Web | The Official Ionic Blog

js date time picker

DateTime Picker · Bootstrap

DateTime Picker · Bootstrap – Demo page

DateTimePicker：jQuery日期和时间插件

jQuery Date and Time picker | jQuery Plugin Registry

Datepicker | jQuery UI

xdan/datetimepicker: jQuery Plugin Date and Time Picker

然后对于页面：

creatEvent.html

<!– for datetimepicker –>

</head>

</div>

$(‘#datetimepicker’).datetimepicker();

$.datetimepicker.setLocale(‘ch’);//设置中文

</script>

</body>

</html>

结果只能显示框架，但是看不到内容：

转载请注明：在路上 » ［未解决］Framework7中实现同时选择日期和时间

Post Views: 1,251

［未解决］Framework7中实现同时选择日期和时间

与本文相关的文章

Hi，您需要填写昵称和邮箱！