日期插件的包为:mydate.js.
①.:首先将日期插件的包引入到页面中
script?language="JavaScript"?src="../Inc/Js/mydate.js"/script
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;?"
php
date_default_timezone_set("PRC");
$nowtime?=?time();
$rq?=?date("Y-m-d",$nowtime);
html
head
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"?/
/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
日历插件:
在页面开发中,经常遇到需要用户输入日期的操作.通常的做法是,提供一个文本框,让用户输入,然后,编写代码验证输入的数据,检测其是否是日期型.这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验.如果使用jQuery UI 中的datepicker日历插件,这些问题都可以迎刃而解.该插件调用的语法格式如下:
$(".selector").datepicker(options);
其中".selector" 表示DOM元素,一般指文本框,由于该插件的作用是提供日期选择,所以呢,常与一个文本框绑定,将选择后的日期显示在该文本框中.选项options是一个对象.
下面是一些参数:
changeMonth 设置一个布尔值,如果为true,则可以在标题处出现一个下拉选择框,可以选择月份,默认值为false
changeYear 设置一个布尔值,如果为true,则可以在标题处出现一个下拉选择框,可以选择年份,默认值为false
showButtonPanel 设置一个布尔值,如果为true, 则在日期的下面显示一个面板,其中有两个按钮;一个为"今天",另一个按键为"关闭",默认值为false,表示不显示.
closeText 设置关闭按钮上的文字信息,这项设置的前提是,showButtonPanel的值必须为true,否则显示不了效果.
showAnim 设置显示弹出或隐藏日期选择窗口的方式.可以设置的方式有,"show"、"slideDown"、"fadeIn",或者为"", 表示没有弹出日期选择窗口的方式.
showWeek 设置一个布尔值,如果为true,则可以显示每天对应的星期,默认值为false
HTML
首先第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表.如果您还想要拖动日历的功能,就还需要加入jQuery ui插件.
link rel="stylesheet" type="text/css" href="css/fullcalendar.css"
script src="js/fullcalendar.min.js"/script
jQuery
现在我们需要在页面加载完成后,调用FullCalendar插件初始化日历,使用jQuery代码:
$(document).ready(function() {
//页面加载完初始化日历
$('#calendar').fullCalendar({
//设置选项和回调
})
});
然后保存并浏览页面,你会发现页面中已经显示一个很大的日历表了.当然这还只是一个初步的日历,FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件,可以很方便的扩展,打造你想要的日历表,先来做一下简单了解.
Options
FullCalendar官方文档中提供了丰富的操作选项设置,比如是否在日历中显示周末等等,使用方法:
weekends: false //不显示周末,将会隐藏周六和周日
Callbacks
dayClick: function() {
alert('a day has been clicked!');
}
Methods
FullCalendar提供了很多方法可以调用,诸如进入下一个月视图等,代码可以这样写:
$('#calendar').fullCalendar('next');
以上代码调用了next方法后,日历视图切换到下一月(周、日)的视图.
建议你存的时候存用time()函数的到的秒,数据表字段类型弄成int(10)就可以,输出的时候可以直接用date('Y-m-d',db['time'])格式化输出了!