1. 程式人生 > >easyui實現日曆

easyui實現日曆

 用easyui方式實現日曆,及日曆標誌

<script type="text/javascript">
$(function(){      //用jqery實現日曆
 $('#cc').calendar({   
    current:new Date()   
   
});  
	
</script>

  </head>
  
  <body>
  
  		<div style="margin:20px 0">    //可選擇每個星期的第一天
		<select onchange="$('#cc').calendar({firstDay:this.value})">
			<option value="0">Sunday</option>
			<option value="1">Monday</option>
			<option value="2">Tuesday</option>
			<option value="3">Wednesday</option>
			<option value="4">Thursday</option>
			<option value="5">Friday</option>
			<option value="6">Saturday</option>
		</select>
	</div>
  			<div id="cc" style="width:180px;height:180px;" data-options="formatter:formatDay"></div>  
  			<script>
		var d1 = Math.floor((Math.random()*30)+1);
		function formatDay(date){
			var m = date.getMonth()+1;
			var d = date.getDate();
			var opts = $(this).calendar('options');
			if (opts.month == m && d == d1)
				return '<div class="icon-ok md">' + d + '</div>';
			return d;
		}
	</script>
	<style scoped="scoped">
		.md{
			height:16px;
			line-height:16px;
			background-position:2px center;
			text-align:right;
			font-weight:bold;
			padding:0 2px;
			color:red;
		}
	</style>