PHP怎样添加JS日历控件

JavaScript0120

PHP怎样添加JS日历控件,第1张

日期插件的包为:mydate.js。

1：首先将日期插件的包引入到页面中

<script language="JavaScript" src="../Inc/Js/mydate.js"></script>

2：设置鼠标点击事件，当鼠标点击获得焦点的时候，触发事件，调用方法

<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

<input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

3：完整页面代码

<?php

  date_default_timezone_set("PRC")

  $nowtime = time()

  $rq = date("Y-m-d",$nowtime)

?>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<meta name="generator" content="FFKJ.Net" />

<link rev="MADE" href="mailto:FFKJ@FFKJ.Net">

<title>在线--后台</title>

<link rel="stylesheet" type="text/css" href="../Skins/Admin_Style.Css" />

<script language="JavaScript" src="../Inc/Js/mydate.js"></script>

</head>

<body>

开始时间:<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

结束时间:<input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">

</body>

</html>

以下都是从你给的参考的网站剥离出

<div class="calendar">

<div class="outer clearfix" id="calendarcontainer">//日历控件容器

</div>

</div>

涉及到的js文件：

1.Calendar.js 地址 ：http://bj.tourex.net.cn/js/Calendar.js

2.jquery.js（这个要打开看看，里面的内容并不是jQuery） 地址：http://bj.tourex.net.cn/sys/js/jquery.js

3.jquery.validate.check.js 地址：http://bj.tourex.net.cn/sys/js/jquery.validate.check.js

4.line.js（日历月显示调用函数就在这个里面）地址：http://bj.tourex.net.cn/js/line.js

5.myfocus-2.0.4.min.js 地址：http://bj.tourex.net.cn/js/plugin/myfocus-2.0.4.min.js

核心的调用代码如下（该函数可能还需要和另外的js配合使用。）：

CreateCalendar(c, y, m, a, b,d, f,fu)

参数说明： c:容器,

y:年,

m:月,

a:出发时间XML,

b:参团人群,

d:是否天天发团,

f:是否显示双日历,

fu:回调

使用例子：

1. CalendarPage('calendarcontainer',2014,4)//显示4、5月份日历

2.CalendarPage('calendarcontainer',2014,2)//显示2、3月份日历

function CreateCalendar(c, y, m, a, b,d, f,fu) {//c:容器,y:年,m:月,a:出发时间XML,b:参团人群,d:是否天天发团,f:是否显示双日历,fu:回调LC[c] = [c, y, m, a, b, d,f, fu] var today = new Date(Date.parse(webconfig('date').replace(/-/g, '/'))) today = new Date(today.getFullYear(),today.getMonth(),today.getDate()) if (y == 0 || m == 0) { y = today.getFullYear()m = today.getMonth() + 1}var dmin=Date.parse(a.first().attr('d').replace(/-/g, '/')),dmax =Date.parse(a.last().attr('d').replace(/-/g, '/')) var i1 = 0, i2 = 0, i3 = 0, d1 = new Date(dmin), d2 today = today.DateToParse() if (Date.parse(d1.getFullYear() + '/' + (d1.getMonth() + 1) + '/1') >Date.parse(new Date(y,m-1,1))) {y = d1.getFullYear()m = d1.getMonth() + 1 }$('#' + c).html('')//农历//var ca=new Calendar()tmp=''for(var i=0i<=fi++){d1=new Date(y,m-1+i)y=d1.getFullYear()m=d1.getMonth() + 1tmp += '<table cellpadding="0">'tmp += '<tr class="month"><th colspan="7"><div class="clearfix"><div class="prevMonth">'if(i==0){i1=Date.parse(y + '/' + m + '/1')d1 = new Date(dmin)if(Date.parse(d1.getFullYear() + '/' + (d1.getMonth() + 1) + '/1')<i1){d1 = new Date(y,m-2-f,1)tmp += '<a class="prev" href="javascript:" onclick="CalendarPage(\'' + c + '\',' + d1.getFullYear() + ',' + (d1.getMonth() + 1) + ')" title="上个月"> </a>'}else{tmp += '<a class="prev0" href="javascript:" title="上个月"> </a>'}}tmp+='</div>'tmp += '<div class="dates"><em>' + y + '</em>年<em>' + m + '</em>月</div>'tmp+='<div class="nextMonth">'if(i==f){i1=Date.parse(y + '/' + m + '/1')d1 = new Date(dmax)i2=Date.parse(d1.getFullYear() + '/' + (d1.getMonth() + 1) + '/1')if(i2>i1){d1 = new Date(y,Date.parse(new Date(y,m+1,1))>i2?m-f:m,1)tmp += '<a class="next" href="javascript:" onclick="CalendarPage(\'' + c + '\',' + d1.getFullYear() + ',' + (d1.getMonth() + 1) + ')" title="下个月"> </a>'}else{tmp += '<a class="next0" href="javascript:" title="下个月"> </a>'}}tmp += '</div></div></th></tr>'tmp += ' <tr class="week">'tmp += '<th class="weekEnd">星期日</th>'tmp += '<th>星期一</th>'tmp += '<th>星期二</th>'tmp += '<th>星期三</th>'tmp += '<th>星期四</th>'tmp += '<th>星期五</th>'tmp += '<th class="weekEnd">星期六</th>'tmp += ' </tr>'var maxdays = (new Date(Date.parse(new Date(y,m,1)) - 86400000)).getDate() //当前月的天数d1 = new Date(y,m-1)//要显示的日期i1 = d1.getDay()//这个月的第一天是星期几for (var j = 1j <= 6j++) {tmp += '<tr>'for (var k = 1k <= 7k++) {i2 = (j - 1) * 7 + k - i1if (i2 <1 || i2 >maxdays) {tmp += '<td></td>'} else {i3 = Date.parse(new Date(y,m-1,i2))d1=new Date(i3)//农历(ll的值为农历)/*var ll=ca.getlf(d1)if(ll==''){ll=ca.getsf(d1)if(ll==''){ll=ca.getst(d1)if(ll=='')ll=ca.getls(d1)[3]}}*/tmp+='<td'if (today == i3){tmp+=' class="cur"'}if (i3 <dmin || i3 >dmax) {tmp += '><p><em>' + i2 + '</em></td>'} else {tmp += ' week="' + (k - 1) + '" id="' + y + '-' + m + '-' + i2 + '"><p><em>' + i2 + '</em></p></td>'}}}tmp += '</tr>'}tmp += '</table>'}$('#' + c).append(tmp) var obj,crowdid=0for(var i in currentLP.crowd){if(crowdid==0)crowdid=currentLP.crowd[i].id}a.each(function(){obj=$('#'+$(this).attr('d'))var j={d:$(this).attr('d'),n:$(this).attr('n'),c:[]},k=0$(this).children('c').each(function(i){if(crowdid==$(this).attr('i'))k=ij.c.push({i:$(this).attr('i'),n:$(this).attr('n'),p:$(this).attr('p')})})obj.data('i',j).attr('v',1).append('<p><em class="money">'+(j.c[k].p==-1?'电询':'¥'+j.c[k].p)+'</em></p><p>余位'+(j.n==-1||j.n>9?'><em class="money">9</em>':'<em class="money">'+j.n+'</em>')+'</p>')}) if ($.isFunction(fu)){$('#' + c +' td[v]').click(function (){ fu(this)}).hover( function () {$(this).addClass("hover")}, function () {$(this).removeClass("hover")})}}

这样可以么？

bootstrap里面有一个组件usmanhalalit里面有一个备忘录控件，可以新建事项拖进日历里面，还支持同一天多条备忘录，应该也可以直接在日历里面加入备忘录，既然你可以重写datepicker ，那用起来应该没啥问题