jQuery全年日历工作考勤表特效代码下载



8 28 10



特效描述:全年日历 工作考勤表,jQuery全年日历工作考勤表特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/calendar.css">
<link rel="stylesheet" href="css/amazeui.min.css">
<link rel="stylesheet" href="css/timedropper.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js" charset="utf-8"></script>
<script src="js/timedropper.js" charset="utf-8"></script>
<script src="js/calendar.js" charset="utf-8"></script>

3. HTML代码

<div id="div1"></div>
<!--录入信息口-->
<div class="am-modal am-modal-no-btn  hd_info_modal" tabindex="-1" id="calendar-modal-1">
  <div class="am-modal-dialog radius">
	<div class="am-modal-hd">新增例外
	  <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	</div>
	<div class="am-modal-bd">
	  <div class="am-margin-sm">
		<form action="" class="am-form am-form-inline">
		  <div class="hd-work-type">
			<div class="hd-work-block">
				<label class="hd-type-label" >类型:</label>
				<div class="hd-type-select">
					<select data-am-selected class="am-u-sm-10" id="hd-type-option">
					  <option value="workday" selected>工作时间</option>
					  <option value="freeday" >非工作日</option>
					  <option value="lawday" >法定假日</option>
					  <option value="tradeday" >调休日</option>
					</select>
				</div>
			</div>
			<div class="stone"></div>
		  </div>
		 <div class="hd-work-date">
			  <div class="hd-work-block">
					<label for="hd-start-date" class="am-form-label">时间:</label>
					<div class="am-form-group am-form-icon">
						<i class="am-icon-calendar"></i>
						<input id="hd-start-date" type="text" class="am-form-field" placeholder="开始日期" data-am-datepicker readonly required>
					</div>
			  </div>
			  <div class="hd-work-block">
				  <label for="hd-end-date" class="am-form-label">至</label>
				  <div class="am-form-group am-form-icon">
					<i class="am-icon-calendar"></i>
					<input id="hd-end-date" type="text" class="am-form-field" placeholder="结束日期" data-am-datepicker readonly required>
				  </div>
			  </div>
		  </div>
		  <div class="hd-work-btns">
			<button type="button" class="am-btn am-btn-secondary" id="calendar_confirm_btn">添加</button>
			<button type="button" class="am-btn am-btn-default" onClick="close_modal();">取消</button>
		  </div>
		  <div class="stone"></div>
		</form>
	  </div>
	</div>
  </div>
</div>
<script type="text/javascript">
	/*日历*/
	loading_calendar("div1","cn");
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 时间轴 文字提示框 日历选择器 提示框/弹出层 时间日期插件 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框 日历日期时间

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到