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日期插件使用