怎样为DEDECMS织梦系统页面添加日历控件

html-css018

怎样为DEDECMS织梦系统页面添加日历控件,第1张

下载日历控件所需的js文件和css文件

内容文件包括:jquery.datetimepicker.js,jquery.js,jquery.datetimepicker.css

其中的jquery.js可选用任何版本

DEDECMS织梦系统页面添加日历控件

打开dedecms的文件系统,找到decms\templets\default路径,下载的压缩包中的文件要放在对应的default文件夹目录下。

DEDECMS织梦系统页面添加日历控件

打开要插入日历控件的模板页面,例如index.html页面,引入要使用的js和css文件。

<link href="{dede:global.cfg_templets_skin/}/style/jquery.datetimepicker.css" rel="stylesheet" media="screen" type="text/css" />

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-1.11.1.min.js"></script>

<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.datetimepicker.js"></script>

DEDECMS织梦系统页面添加日历控件

在本页<body>结尾标签页添加如下代码:

<script>

$('#datetimepicker3').datetimepicker({

inline:true

})

</script>

一定要添加在页尾,因为先行加载input的标签,然后再渲染标签的效果,显出日历控件的模样。

DEDECMS织梦系统页面添加日历控件

打开页面,查看效果图。

DEDECMS织梦系统页面添加日历控件

自己创建一个日历控件岂不是麻烦?站在巨人的肩上岂不是更好?如果是用于学习倒也可以,如果是项目运用,可以用my97datepicker 或者 jquery ui 的datepicker,都很好用的 :)

dayClick: function(date, allDay, jsEvent, view) {

$(this).css('background-color', 'red')

var clickDate = view.calendar.formatDate(date,'yyyyMMdd')

window.location="${base}/admin/manager/holiday/save.action?holiday.date="+clickDate

},

保存可以考虑用异步