使用 JQuery 和 MySQL 调用日历功能

Posted

技术标签:

【中文标题】使用 JQuery 和 MySQL 调用日历功能【英文标题】:Call calendar function with JQuery and MySQL 【发布时间】:2014-04-06 10:17:55 【问题描述】:

我正在做一个项目,我想从 mysql 数据库中返回列 "All_hours"。我的问题是关于日历系统的。

我正在尝试实现一个日历系统,我可以在其中选择“从”日期“到”日期。它看起来像 this

到我的数据库的连接是通过一个名为 dataExchange.java 的 servlet。日历是用 JQuery 编程的。所以重点是我从日历中选择的时间段 fx: 2014-01-012014-03-03 应该从 MySQL 数据库中返回该时间段内的 All_hours。

我已经开始编写一些代码,但不知道我是否走在正确的轨道上?

<%@ page language="java" contentType="text/html; charset=US-ASCII"
    pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Working Hours</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <!-- <script type="text/javascript" src="../js/checkUser.js"> </script> -->
  <script type="text/javascript">

  $(document).ready(function() 
    $("#datepicker").datepicker();
    );
    $(document).ready(function() 
        $("#datepicker2").datepicker();
    );

     $.get( "dataExchange.java", startDate: $("#datepicker").val(),
             function( data ) 
                    $( ".result" ).html( data );
                        alert( "Load was performed." );

        );

  </script>
</head>
<body>

    <form>
    <input id="datepicker"/>
    <input id="datepicker2" />
</form>

</body>
</html>

希望有人可以帮助我吗?

最好的问候

【问题讨论】:

【参考方案1】:

您可以传入一堆不同的数据以根据需要对其进行自定义的日期选择器。

http://jqueryui.com/datepicker/ 有一些信息。

我通过执行以下操作来限制 datpicker 的日期:

var custom_days_off = ["2-10-2012","3-10-2012","28-9-2012"];
$("input#datepicker").datepicker(
  beforeShowDay: function(date) 
      var noweekends = $.datepicker.noWeekends(date);
      if(noweekends[0])
          var dmy = date.getDate()+"-"+(date.getMonth()+1)+"-"+date.getFullYear();
          if ($.inArray(dmy, custom_days_off )<0) 
             return [true,"","Book Now!"]; 
          else
             return [false,"","No Slots"];
          
      else return noweekends;
  
);

在此示例中:您可以使用您的 mySql 构建custom_days_off

【讨论】:

以上是关于使用 JQuery 和 MySQL 调用日历功能的主要内容,如果未能解决你的问题,请参考以下文章

使用 Javascript/JQuery/Rails 3 动态添加新行

jquery 日历控件在php中怎么使用

通过ajax调用的Jquery完整日历事件

基于jquery的带事件显示功能的日历板插件calendar.js

在 Firefox 中添加 JQuery datepicker 后如何隐藏 HTML 日历?

为 jQuery 日历编码 JSON