jquery 时间动态变化组件 jquery 日期时间控件

转载

mob64ca140b466e 2023-08-14 14:14:47

文章标签 jquery 时间动态变化组件 jquery datepicker 日历控件 sed 文章分类 jQuery 前端开发

对于jquery datepicker时间控件，算是一个很好用的控件，能实现我们想要的效果，近期做了一个只能在指定日期选择，并且还能根据不同的值改变样式，需求是这样的，对于某个表来说来说，如果哪天有记录的，在控件中就可以选中，表中有状态字段，如果对于某一天来说，记录的状态都等于1，显示黑色，如果状态有等于0的，说明该数据还没有处理，需要标红，并且这两种状态对应的日期都是可选的。好吧，让我们来开始吧。

首先我们需要做的就是如何用这个控件。下载相应的js文件和css样式文件，如下：

准备来材料后，我们就可以开始了，先来看看示例效果吧

示例1：在指定日期（可以想象下某个特殊的日子，比如说是结婚纪念日什么的）标红，突出重点

jquery 时间动态变化组件 jquery 日期时间控件_日历控件

这里直接显示了日历，当然你也点击通过点击文本框来显示。这里的每月的3号，19号，25号是某个特殊的日子，我们需要突出来。

下面是代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!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=UTF-8">
 <title>Insert title here</title>
 <link href="<%=request.getContextPath()%>/css/jquery-ui.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
.used .ui-state-default { background-image:none; background-color:#ff0000; color:#00ff00;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
 </style>
 <script src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script src="<%=request.getContextPath()%>/js/jquery-ui.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){
var styleDays = [3,19,25];
function setOrdereDays(date) { 
   var isStyle = false;
   for (var j = 0; j < styleDays.length; j++) {  
     if(date.getDate() == styleDays[j]){
     isStyle = true;
     }
   }
   if(isStyle){
    return [true, 'used', ''];
   }else{  
       return [true, ''];  
   }
 
}  
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: false,
dateFormat : 'yy-mm-dd',
changeMonth : true,
changeYear : true,
prevText : '前一月',
nextText : '后一月',
monthNamesShort : [ '1月', '2月', '3月', '4月',
'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月' ],
dayNamesShort : [ '周日', '周一', '周二', '周三',
'周四', '周五', '周六' ],
dayNamesMin : [ '日', '一', '二', '三', '四',
'五', '六' ],
beforeShowDay:setOrdereDays,
onSelect: function(dateText, inst) {
alert(dateText);
}
});
});
 </script>
 </head>
 <body>
<div class="demo">
       <h4>直接显示日历：</h4>
       <div id="datepicker"></div> 
    </div>
 </body>
 </html>

示例2.跟示例1类似，只是做了小小的调整，改成了文本框及只有在特殊日子可以选中。

效果图：

jquery 时间动态变化组件 jquery 日期时间控件_datepicker_02

这里只有3,19,25可以选，其他的都是不可选的

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!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=UTF-8">
 <title>Insert title here</title>
 <link href="<%=request.getContextPath()%>/css/jquery-ui.css" rel="stylesheet" type="text/css" />
 <style type="text/css">
.used .ui-state-default { background-image:none; background-color:#ff0000; color:#00ff00;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }

 </style>
 <script src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js" type="text/javascript"></script>
 <script src="<%=request.getContextPath()%>/js/jquery-ui.min.js" type="text/javascript"></script>
 <script type="text/javascript">
$(document).ready(function(){

var styleDays = [3,19,25];
function setOrdereDays(date) { 
   var isStyle = false;
   for (var j = 0; j < styleDays.length; j++) {  
     if(date.getDate() == styleDays[j]){
     isStyle = true;
     }
   }
   if(isStyle){
    return [true, 'used', ''];
   }else{  
       return [false, ''];  
   }
 
}  


$("#startDate").datepicker({
dateFormat : 'yy-mm-dd',
changeMonth : true,
changeYear : true,
prevText : '前一月',
nextText : '后一月',
monthNamesShort : [ '1月', '2月', '3月', '4月',
'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月' ],
dayNamesShort : [ '周日', '周一', '周二', '周三',
'周四', '周五', '周六' ],
dayNamesMin : [ '日', '一', '二', '三', '四',
'五', '六' ],
beforeShowDay:setOrdereDays,
onSelect: function(dateText, inst) {
alert(dateText);
}
});
});
 </script>
 </head>
 <body>
<div>
<input id="startDate" name="startDate" value="${startDate}" type="text" />
</div>
 </body>
 </html>下面来看看项目中的吧：
样式：
<style type="text/css">
.used .ui-state-default { background-image:none;/*  background-color:#ff0000; */ color:#ff0000;}
.used .ui-state-default a,.used .ui-state-default a:link,.used .ui-state-default a:visited { color: #555555; text-decoration: none; }
.used .ui-state-hover,.used .ui-widget-content .ui-state-hover,.used .ui-widget-header .ui-state-hover,
.used .ui-state-focus,.used .ui-widget-content .ui-state-focus,.used .ui-widget-header .ui-state-focus 
{ border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #ff0000; }
.used .ui-state-hover a,.used .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.used .ui-state-active,.used .ui-widget-content .ui-state-active,.used .ui-widget-header .ui-state-active 
{ border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ff0000; }

.done .ui-state-default { background-image:none; /* background-color:green; */ color:#000000;font-weight: bold;}

.done .ui-state-default a,.done  .ui-state-default a:link,.done .ui-state-default a:visited { color: #555555; text-decoration: none; }
.done .ui-state-hover,.done  .ui-widget-content .ui-state-hover,
.done .ui-widget-header .ui-state-hover, .done .ui-state-focus,.done  .ui-widget-content .ui-state-focus,.done  .ui-widget-header .ui-state-focus 
{ border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #000000; }
.done .ui-state-hover a,.done  .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.done .ui-state-active,.done  .ui-widget-content .ui-state-active,
.done .ui-widget-header .ui-state-active 
{ border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #000000; }

 </style>js代码：
<script type="text/javascript">
$(document).ready(function(){
//这里先从数据库中取出日期数组
var styleDays = [];
$.ajax({
url:'<%=request.getContextPath()%>/backfill_getDates.action',
type: 'POST',
async:false,
data:{

},
dataType:'json',
success:function(data){
for (var i=0; i<data.length; i++) {
styleDays.push(data[i]);
}
},
error:  function(){
alert("出错了,请联系管理员！");
},
});               //这里用来判断取出的那些日期数组中是否有状态已经完成的
var isDone = [];
for(var i=0; i < styleDays.length;i++){
$.ajax({
url:'<%=request.getContextPath()%>/backfill_isDone.action',
type: 'POST',
async:false,
data:{
doneDaily:styleDays[i]
},
//dataType:'json',
success:function(data){
isDone.push(data);
},
error:  function(){
alert("出错了,请联系管理员！");
},
});
}                //这里设定初始值，如何值为空就以取出的最后一天来赋值
if($("#datepicker").val() == null || $("#datepicker").val() == ""){
$("#datepicker").val(styleDays[styleDays.length-1]);
}

$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: false,
dateFormat : 'yy-mm-dd',
changeMonth : true,
changeYear : true,
prevText : '前一月',
nextText : '后一月',
defaultDate:styleDays[styleDays.length-1],
monthNamesShort : [ '1月', '2月', '3月', '4月',
'5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月' ],
dayNamesShort : [ '周日', '周一', '周二', '周三',
'周四', '周五', '周六' ],
dayNamesMin : [ '日', '一', '二', '三', '四',
'五', '六' ],
beforeShowDay:function (date) {
var isStyle = 0;
   for (var j = 0; j < styleDays.length; j++) {
    if(date.getFullYear() == styleDays[j].split('-')[0] && date.getMonth()+1 == styleDays[j].split('-')[1] && date.getDate() == styleDays[j].split('-')[2] && isDone[j] == 'true'){
    isStyle = 2;
    }else if(date.getFullYear() == styleDays[j].split('-')[0] && date.getMonth()+1 == styleDays[j].split('-')[1] && date.getDate() == styleDays[j].split('-')[2] && isDone[j] == 'false'){
    isStyle = 1;
    }
   }
   if(isStyle == 0){
    return [false, 'CLOSED']; 
   }else if(isStyle == 1){
    return [true, 'used', ''];
   }else if(isStyle == 2){
    return [true, 'done', ''];
   }
}
});
});

html代码:

时间：
<input type="text" name="daily" id="datepicker" value="${daily }" readonly="readonly" />

效果：

jquery 时间动态变化组件 jquery 日期时间控件_日历控件_03