layui,jquery，angularjs结合使用日期限制 （爬坑一）
html------------
<div class="year_date">
<div class="years" ng-repeat="items in ChecthiskList track by $index">
<div class="parameter_year clear">
<span class="parameter_icon">*</span>
<span class="filterDIV_sp">年份：</span>
<input type="text" class="demo-input1 validityYear" readonly="readonly" placeholder="请选择日期" value={{items.year}}>
<div class='year_date_del' ng-click="delOption($index)" ng-if="$index!=0">
<i class='date_del' ></i>
</div>
</div>
<div class="parameter_date">
<div class="date_scope clear">
<div class="date_left">时间范围</div>
<div class="date_show">
折叠
</div>
</div>
<div class="show_content">
<div class="quarter clear">
<div class="quarter_left">
<span>*</span> 第一
<input type="text" readonly="readonly" class="demo-input firstQuarter" placeholder="请选择日期" value={{items.ontQuarter}}>
</div>
<div class="quarter_right mt">
<span>*</span> 第二
<input type="text" readonly="readonly" class="demo-input secondQuarter" placeholder="请选择日期" value={{items.twoQuarter}}>
</div>
</div>
<div class="quarter quarter_top clear">
<div class="quarter_left">
<span>*</span> 第三
<input type="text" readonly="readonly" class="demo-input thirdQuarter" placeholder="请选择日期" value={{items.threeQuarter}}>
</div>
<div class="quarter_right">
<span>*</span> 第四
<input type="text" readonly="readonly" class="demo-input fourQuarter" placeholder="请选择日期" value={{items.fourthQuarter}}>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="add_btn" ng-click="addClick($index);">+ 添加</div>
<div class="save_btn">保存</div>
js---------------------------------
$scope.queryChecthiskList=function(){//页面初始化数据
HikGlobalHTTPService.requestByPost("/api/ParameterConfig/find", null, function (data, status) {
if (status) {
if(data.result.listsynParameter.length>0){
$scope.queryList=data.result.synParameterconfig.videotime;
$scope.ChecthiskList=data.result.listsynParameter;
for(var i=0;i<data.result.listsynParameter.length;i++){
$scope.afterDatasu.push(data.result.listsynParameter[i].year)
}
setTimeout(function(){
dataClick();
layEach();
layDate();
datePic();
},100);
}
}
});
}
$scope.queryChecthiskList();
var beforData;
// $scope.dataArr = [{y:"",m:["","","",""]}];
// $scope.dataArr.push({y:"",m:["","","",""]});
$scope.afterData=[];//选择的时候值
function layDate(){
$('.demo-input1').each(function(index,item){
laydate.render({
elem: item,
type: 'year',
btns: ['clear', 'confirm'],
done: function(value, date, endDate){
var className = $(this.elem)[0].className.split(" ")[0];
var $this =$(this.elem);
var $index = 0;
$("."+className).each(function(index,ele){
if($(ele)[0] == $this[0]){
$index = index;
}
})
var checkDataResult=false;
for(var i=0;i<$scope.ChecthiskList.length;i++){
if(i != $index){
if(value==$scope.ChecthiskList[i].year){
checkDataResult=true;
var abarbeitungPopups = layer.open({
content: '年份不可重复选择',
title: "",
closeBtn: false,
btn: ["确定"],
yes: function () {
layer.close(abarbeitungPopups);
$(item).val("");
}
})
break;
}
}
}
if(checkDataResult){
$(item).val("");
$scope.ChecthiskList[$index].year = "";
}else{
$scope.ChecthiskList[$index].year = value;
}
}
});
});
};
function layEach(){
$('.demo-input').each(function(index,item){
laydate.render({
elem: item,
range: true,
theme: '#f00',
trigger: 'click',
format:'yyyy-MM-dd',//年月日,
btns: ['clear', 'confirm']
});
});
}
// setTimeout(function(){
// dataClick();
// layEach();
// layDate();
// datePic();
// },100);
// 日历获取焦点变红色没有事灰色
function datePic(){
// 获取焦
$('.demo-input').focus(function(){
$(this).addClass('addActivePic');
});
$('.demo-input').blur(function(){
$(this).removeClass('addActivePic');
});
}
// 删除元素
$scope.delOption=function(myIndex){
$scope.ChecthiskList.splice(myIndex,1);
}
$scope.addClick=function($index){//添加
$scope.ChecthiskList.push({
year:"",
ontQuarter:"",
twoQuarter:"",
threeQuarter:"",
fourthQuarter:""
})
setTimeout(function(){
dataClick();
layEach();
layDate();
datePic();
},100);
}
$('.save_btn').click(function(){
var year;//年
var ontQuarter;//第一季度
var twoQuarter;//第二季度
var threeQuarter ;
var fourthQuarter;
var quarterData={};
var dataList =[];
var synParameterconfig={};
synParameterconfig.videotime = parseInt($('.videoDay').val());/
$('.years').each(function(ele,i){
quarterData={};
year = $(this).find('.validityYear').val();//年
ontQuarter = $(this).find('.firstQuarter').val();//第一
twoQuarter = $(this).find('.secondQuarter').val();//第二
threeQuarter = $(this).find('.thirdQuarter').val();//第三
fourthQuarter = $(this).find('.fourQuarter').val();//第四
quarterData.year = year;
quarterData.ontQuarter = ontQuarter;
quarterData.twoQuarter = twoQuarter;
quarterData.threeQuarter = threeQuarter;
quarterData.fourthQuarter = fourthQuarter;
dataList.push(quarterData);
})
if(synParameterconfig!=''&& year!=''&&ontQuarter!=''&&twoQuarter!=''&&threeQuarter!=''&&fourthQuarter!=''){
var requestBody = {};
requestBody.synParameterconfig=synParameterconfig,
requestBody.listsynParameter=dataList//年、季度
var postData = requestBody;
HikGlobalHTTPService.requestByPost("/add", postData, function (data, status) {
if (status) {
if(data.status=="SUCCESS"){
var abarbeitungPopups = layer.open({
content:data.message,
title: "",
closeBtn: false,
btn: ["确定"],
yes: function () {
layer.close(abarbeitungPopups);
location.reload();
}
})
}else{
var abarbeitungPopups = layer.open({
content: data.message,
title: "",
closeBtn: false,
btn: ["确定"],
yes: function () {
layer.close(abarbeitungPopups);
}
})
}
}
});
}else{
var abarbeitungPopups = layer.open({
content: "*为必填项",
title: "",
closeBtn: false,
btn: ["确定","关闭"],
yes: function(){
layer.close(abarbeitungPopups);
HikGlobalHTTPService.requestByPost("00",{id:dataIntArr}, function (data, status){
if(status){
$rootScope.queryData();//刷新
}
})
}
})
}
});
主要是遍历与循环结合anglarjs、layui日期插件使用
