xiaoben-as2-php/protected/views/semester/add.php

<link rel="stylesheet" type="text/css" href="/css/jquery.datetimepicker.css">
<style>
	.addborder{border:1px solid #ccc}
	.addheight{height:30px;border-radius:2px;}
	.addheight:focus{border-color: #66afe9;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);outline: 0 none;}
	.ace{position:relative;top:0px !important;left:0px !important;}
	label{font-weight:100 !important;}
	#end_time-error ,#start_time-error{/* margin-left: 75px; */float: left;}
	.input-group{float:left}
</style>
<script type="text/javascript">
function refreshSelect(){
	if(getRefreshState())
		return false;
	
	setRefreshState(true);
	
	jQuery("#semester").val("");
	
	var year = jQuery("#school_year").val();
	if(year.length != 4 ){
		jQuery("#school_year").val(year);
		
		setRefreshState(false);
		return false;
	}
	
	jQuery.get(
		"<?php echo $this->createUrl("semester/getthisyearsemesterdictionary?year=");?>"+year,
		function(data){
			data = JSON.parse(data);
			var select = "";
			
			for(var i in data){
				select += '<li val="'+data[i].code+'">'+data[i].name+'</li>'
			}
			
			jQuery("#semesterName").html("--请选择学期--");
			jQuery("#semester").siblings("ul[class='diy_select_list']").html(select);
			
			setRefreshState(false);
		}
	);
}

document.refreshing = false;

function setRefreshState(state){
	document.refreshing = state;
}

function getRefreshState(){
	return document.refreshing;
}

jQuery(document).ready(function(){
	refreshSelect();
	
	jQuery("#school_year").keyup(function(){
		refreshSelect();
	});
});
</script>

<div class="main-content-inner">
    <!--    导航栏开始-->
    <?php include(Yii::app()->basePath.'/views/layouts/class_navigation.php');?>
    <!--    导航栏结束-->
	<div class="page-content" style="margin-top:15px;">
		<div class="row" style="margin:0px">
			<div class="col-xs-12  fontSize1">
				<!-- PAGE CONTENT BEGINS -->
				<form class="form-horizontal" action="<?php echo $this->createUrl('semester/add');?>" method="post" id="semesAdd">

					<!--<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">学期名称<span class="errorMessage">*</span>:</label>
						<div class="col-sm-9">
							<input type="text" id="name" name="name" class="col-xs-10 col-sm-3 addborder addheight marginLeftNo" />
						</div>
					</div>-->
					
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">学年<span class="errorMessage">*</span>:</label>
						<div class="col-sm-9">
							<input type="text" id="school_year" name="school_year" class="col-xs-10 col-sm-3 addborder addheight marginLeftNo" placeholder="例如：<?php echo date("Y", time());?>" />
						</div>
					</div>
					
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">学期<span class="errorMessage">*</span>:</label>
						<div class="col-sm-9">
							<div class='diy_select' style="position:relative;width:180px;">
								<input type='text' style="width:10px;position:absolute;z-index:-1;" name="semester" id="semester" class='diy_select_input'/>
								<div class='diy_select_txt' style="position:absolute;width:200px;" id="semesterName">--请选择学期--</div>
								<div class='diy_select_btn' style="float:right;"></div>
								<ul class='diy_select_list'>
								</ul>
							</div>
						</div>
					</div>

					<!-- <div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">届<span class="errorMessage">*</span>:</label>
						<div class="col-sm-9">
							<input type="text" id="period" name="period" class="col-xs-10 col-sm-3" placeholder="所属于届例如：2014" />
						</div>
					</div> -->

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">开始日期<span class="errorMessage">*</span>:</label>
						<div class="col-xs-12 col-sm-2">
							<div class="input-group input-group-sm">
								<input type="text" id="start_time" class="form-control hasDatepicker marginLeftNo" name="start_time" style="width:100%;">
								<span class="input-group-addon">
									<i class="ace-icon fa fa-calendar"></i>
								</span>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">结束日期<span class="errorMessage">*</span>:</label>
						<div class="col-xs-12 col-sm-2">
							<div class="input-group input-group-sm">
								<input type="text" id="end_time" class="form-control hasDatepicker marginLeftNo" name="end_time" style="width:100%;">
								<span class="input-group-addon">
									<i class="ace-icon fa fa-calendar"></i>
								</span>
							</div>
						</div>
					</div>
                    <!--
					<div class="form-group">
						<label class="control-label col-xs-12 col-sm-3 no-padding-right">当前学期:<span class="errorMessage">*</span>:</label>
						<div class="col-sm-9 mt6">
							<span class="inline blue">
								<input type="radio" class="ace" name="status" value="0" checked="checked">
								<span class="lbl middle"> 否</span>
							</span>
							&nbsp; &nbsp; &nbsp;
							<span class="inline blue">
								<input type="radio" class="ace" name="status" value="1">
								<span class="lbl middle"> 是</span>
							</span>
						</div>
					</div>
                    -->
                    <input type="hidden" name="status" value="0">
					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn btn-success btn-sm" type="submit" id="schoolSubmit">
								<i class="ace-icon fa fa-check bigger-110"></i>
								提交
							</button>
							<!--&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="ace-icon fa fa-undo bigger-110"></i>
								重填
							</button>-->
						</div>
					</div>
				</form>

				<!-- PAGE CONTENT ENDS -->
			</div>
		</div>
	</div>
</div>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/jquery.datetimepicker.js"></script>
<script src="/js/xsgl.js"></script>
<script type="text/javascript">
	jQuery(function($) {

		$('#start_time').datetimepicker({format:"Y-m-d",timepicker:false,lang:"ch"});
		$('#end_time').datetimepicker({format:"Y-m-d",timepicker:false,lang:"ch"});

		//检测开始日期是否大于结束日期
		$.validator.addMethod("checkTime", function(value, element) {
			var startDate = $('#start_time').val();
			return new Date(Date.parse(startDate.replace(/-/g,"/"))) <= new Date(Date.parse(value.replace(/-/g,"/")));
		}, "结束日期必须大于开始日期");

		$('#semesAdd').validate({
			//debug:true,// 表单不会提交
			//errorElement: 'font', // 错误信息div
			errorClass: 'errorMessage', //错误样式
			rules: {
				school_year: {
					required: true,
					maxlength:4,
					digits:true
				},
				semester: {
					required: true,
				},
				//period: {
				//	required: true,
				//	digits:true
				//},
				start_time: {
					required: true,
				},
				end_time: {
					required: true,
					checkTime:true
				},
				status: {
					required: true
				}
			},
			messages: {
				school_year: {
					required: "请填写学年!",
					maxlength: "学年不能超过4个字符!",
					digits:"请填写合法学年！"
				},
				semester: {
					required: "请选择学期",
				},
				//period: {
				//	required: "请填写届!",
				//	digits:"请填写合法届！"
				//},
				start_time: {
					required: "请填写开始时间!",
				},
				end_time: {
					required: "请填写结束时间!",
				},
				status: {
					required: "请选择学期状态!",
				}
			},
			errorPlacement: function (error, element) { // 指定错误信息显示位置
				if(element.is('input[name=start_time]') || element.is('input[name=end_time]')) {
					error.insertAfter(element.parent());
				}else{
					error.insertAfter(element.after());
				}	
			},
		})
	});
</script>