安科网

怎么在你的网站应用中使用PHP和jQuery建立日历

linwenx

linwenx

2013-10-03

关注 关注

怎么在你的网站应用中使用PHP和jQuery建立日历

本教程将是一个有趣的。我要告诉你一个简单的方式来实现在应用程序中使用PHP和jQuery的日历。不像平时无聊的日历，这是可拖动，时尚，便于模具按要求。让我们检查出来。

这里是重要的演示或下载链接。

在本教程中，我使用 jQuery插件。为什么我使用这个的原因是因为它是挤满了功能的电源。

现在，我要告诉你，我们将如何实现这个插件。这里是jQuery代码。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<脚本类型= “文/ JavaScript的” >
$ （文件）。就绪（函数（） {
    VAR 日期 = 新的 日期（）;
    VAR ð = 日期。GETDATE （）;
    VAR 米 = 日期的getMonth （）;
    ÿ = 日期和getFullYear （）;
    VAR ħ = { } ;
 
    $ （“＃日历” ）。fullCalendar （{
        头： H ，
        可选： 真，
        编辑： 真，
        可拖动： 真，
        投掷的： 假
    } ）;
} ）;
</ SCRIPT>

在代码中，插件安装到DIV ID =“日历”]与一些额外的选项，例如可选择，可编辑，可拖动。在HTML中，我们只需要添加所需的div，如下图所示。

 
1
<格ID = “日历” > </ DIV>

上述jQuery和HTML代码是不够好，呈现一个美丽而实用的日历。现在，我要隆起的日历增加以下功能集。

  • 显示用户选定的日期或日期范围。
  • à 确认选项一个​​AJAX请求发送到服务器的细节。
  • 从服务器接收到响应，并把它显示给用户。

要实现这一点，我要作出一些补充jQuery和HTML代码。jQuery的，我已经添加了两件事情。首先，是选择FullCalendar插件格式自定义格式的日期选择功能。二是选定的日期发送到服务器的AJAX请求。看看下面的完整代码。

 
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<脚本类型= “文/ JavaScript的” SRC = “JS / jquery.min.js” > </ SCRIPT>
<脚本类型= “文/ JavaScript的” SRC = “JS / jquery.calendar.js” > </ SCRIPT>
<脚本类型= “文/ JavaScript的” >
$ （文件）。就绪（函数（） {
    VAR 日期 = 新的 日期（）;
    VAR ð = 日期。GETDATE （）;
    VAR 米 = 日期的getMonth （）;
    ÿ = 日期和getFullYear （）;
    VAR ħ = { } ;
 
    $ （“＃日历” ）。fullCalendar （{
        头： H ，
        可选： 真，
        选择 功能（ 开始日期， 结束日期， 全天， jsEvent ， 视图 ） {
            新起点 = $ fullCalendar formatDate （开始日期， “MMMM dd年数H：毫米TT” ）;
            ，VAR newend = $ 。fullCalendar 。formatDate （结束日期， “MMMM dd年数H：毫米TT” ）;
            $ （“＃开始” ），HTML （‘<strong>开始</ STRONG> <SPAN>’ + 新起点+ ‘</ SPAN>’ ）;
            $ （“＃结束” ）。HTML （‘<STRONG>结束</ STRONG> <SPAN>’ + newend + ‘</ SPAN>’ ）;
            $ （“确定” ）。淡入（）;
        }
        eventSources： [ {
            事件： [
                {
                    标题： “咖啡与GF' ，
                    描述： “不应该忘记或她会杀了我。”
                    启动： '2013-09-21 19:00:00' ，
                    结束  ： '2013-09-21 21:00:00' ，
                    全天： 假
                }
                {
                    标题： Web应用程序的演示，
                    描述： '会议Mashable的家伙'
                    启动： '2013-09-30 13:00:00' ，
                    结束  ： '2013-09-30 17:00:00' ，
                    全天： 假
                }
            ]
        } ]
        编辑： 真，
        可拖动： 真，
        投掷的： 假
    } ）;
 
    $ （文件）上（“咔嚓” ， “确认” ， 函数（） {
        开始 = $ （“＃开始跨度” ）HTML （）;
        VAR 月底 ;
 
        $ 阿贾克斯（{
            类型： “得到” ，
            网址： “PHP / ajax.php？R = confirm_booking＆启动=” + 启动+ “和结束=” + 结束，
            包括： “
            成功： 函数（响应） {
                $ （“确定” ）。淡出（）;
                $ （“响应” ）。的html （响应）;
            }
        } ）;
    } ）;
} ）;
</ SCRIPT>

下面是更新的HTML代码。

 
1
2
3
4
5
6
7
<格ID = “日历” > </ DIV>
 
<p ID = “开始” > <STRONG> 开始</ STRONG> </ P>
<p ID = “结束” > <STRONG> 结束</ STRONG> </ P> <BR/>
<输入类型= “按钮” 值= “确认” ID = “确认” 类= “BTN的BTN默认隐藏” >
 
<BR/> <DIV ID = “响应” > </ DIV>

p与id的开始和结束的标记已被添加到用户显示所选择的日期或日期范围。，DIV [ID =“响应”]将显示从Ajax请求返回的响应。

这里是ajax.php文件，它是处理Ajax请求的代码。在本教程中，这个文件是简单地返回结果页面。在Web应用程序中，我们将数据保存在数据库中，并根据需要做其他的东西。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
（‘的functions.php“ ）;
 
（使用isset （$ _GET [ 'R' ] ）） {
    ＃＃执行每个请求的功能
    $ R = clean_input （$ _GET [ 'R' ] ）;
    ＃＃用于处理要求发送confirm_booking的。
        （$ R == ‘confirm_booking’ ） {
            （使用isset （$ _GET [ '开始' ] ） && 使用isset （$ _GET [ '端' ] ）） {
                开始 = clean_input （$ _GET [ '开始' ] ）;
                将$ end = clean_input （$ _GET [ '端' ] ）;
                    如果（空（开始） && ！空（结束）） {
                        / *
                        *我们没有做任何事情在这里。只要发送接收的值返回到页面。
                        *在web应用中，我们应该处理的值，并将其存储在数据库中。
                        * /
                        回声 “<BR/>您的预订已被证实为<BR/> <STRONG>’ 。开始。</ STRONG>’ ;
                    }
            }
        }
}

至此，教程结束。李新试图保持尽可能简单实现。我希望你觉得本教程非常有用。保持回来这样更多有用的东西。至此，快乐编码。

本文来自李新的博客，转载请注明出处！http://www.ilixin.net/401.html

jquery 日历

linwenx

linwenx

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

EdwardSiCong 2020-11-23

详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。比如你想修改div#app里的内容:. 在代码层面上的最大区别就是，JQuery直接对DOM进行了操作，而Vue则对数据进行

85477104 2020-11-17

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj 2020-11-17

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 2020-11-11

jQuery实现带进度条的轮播图

margin: 0;padding: 0;list-style: none;width: 100%;height: 600px;position: relative;width: 100%;height: 600px;position: absolute;

seoppt 2020-09-13

jQuery实现鼠标拖拽登录框移动效果

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>. $(&

honeyth 2020-09-13

jquery实现简易验证插件封装

<input type="text" id="username" name="username" tabindex="1" class="format-inpu

WRITEFORSHARE 2020-09-13

jQuery实现朋友圈查看图片

<a href="images/img1-large.png" style="background-image:url" title="图片一"></a>

84483065 2020-09-11

jQuery实现日历效果

jquery是用的是2.0版本。--基于W3C标准 不用做任何修改-->. --设置初始化文档信息和文档管理标注-->. --整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->. .signincalenda

momode 2020-09-11

jQuery中event.target和this的区别详解

　　1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；　　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$和$.比如,

85477104 2020-08-15

9.jQuery初识—选择器、效果

书写繁琐，代码量大。动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。浏览器的兼容性。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。插件扩展开发，jQuery有着丰富的第三方插件，

83510998 2020-08-08

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQue

82550495 2020-08-03

JQuery 06 属性

区别在于，对于自定义属性和选中属性的处理。选中属性指的是 checked,selected 这2种属性1. 对于自定义属性 attr能够获取，prop不能获取2. 对于选中属性attr只能获取初始值， 无论是否变化prop 能够访问变化后的值，并且以tru

tthappyer 2020-08-03

取代Jquery，用Vue 构建Bootstrap 4 应用

尽管前端程序现在发展迅速，各种框架层出不穷，但是对广大非前端码农来说构建Web界面的最好的选择仍然还是Bootstrap 4。但是Bootstrap依赖于已经严重过时，被抛弃的jQuery组件，那么如何解决这个问题就迫在眉睫了。Vue项目以其轻巧、高性能，

84901334 2020-07-28

隐式迭代---ES5的数组方法以及jQuery的方法调用

对于选择器筛选的dom元素，比如$是一个伪数组jq对象，存放的dom元素，当执行addClass方法，对于每个dom元素都执行此方法，在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用如果获取的

tthappyer 2020-07-25

jQuery Ajax 操作函数汇总

jQuery 库拥有完整的 Ajax 兼容套件。执行异步 HTTP 请求。当 Ajax 请求完成时注册要调用的处理程序。在 Ajax 请求发送之前显示一条消息。使用 HTTP POST 请求从服务器加载数据。

TONIYH 2020-07-22

jQuery validate验证表单隐藏域

function validInfoForm(){ return $.validate({ ignore : "",//验证隐藏域,解决切换标签后隐藏域无法验证问题 rules: { oldPassword: { requi

tztzyzyz 2020-07-20

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

public static string GetValueAjax//这个方法需要是静态的方法要用到关键字static. json=" + username,//ajaxtest.ashx为目标文件

83510998 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 2020-07-17

56-58-前端-jQuery

python导入模块发生了哪些事？"""我不想下载jQuery文件 能不能使用呢？w.fn.init [p.c1, prevObject: w.fn.init]0: p.c1length: 1prevObject: w.fn.

tztzyzyz 2020-07-05
linwenx

linwenx

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号