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

转载于:https://www.cnblogs.com/loveAline/p/9285636.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
初始化之后,假如开始时间最大时间限制在2019-10-24 11 改变月份或日期后,最大时间限制正常 如果改变年份的话,最大时间小时选择只能选到11点,不能选择12-23,截图如下: ![图片说明](https://img-ask.csdn.net/upload/201910/24/1571884779_946670.png) 改变月份或日期 与改变年份之后,html元素属性一致,截图: ![图片说明](https://img-ask.csdn.net/upload/201910/24/1571884812_641121.png) laydate在angularjs中的封装: ``` .directive('myLayDate', function ($timeout) { return { require: '?ngModel', restrict: 'AE', scope: { ngModel: '=', choose: '&', min: '@', max: '@', istime: '@', format: '@', isclear: '@', istoday: '@', issure: '@', festival: '@', start: '@', fixed: '@' }, link: function (scope, element, attr, ngModel) { $timeout(function(){ ngModel.$render = function () { element.val(ngModel.$viewValue || ''); }; element.on('blur keyup change', function () { scope.$apply(read); }); function read() { var val = element.val(); ngModel.$setViewValue(val); } if (attr.skin) { laydate.skin(attr.skin); } else { laydate.skin('yahui'); } scope.option = { elem: '#' + attr.id, format: scope.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD', istime: scope.istime,//是否开启时间选择 timerange: scope.timerange || 'hms', isclear: scope.isclear, //是否显示清空 istoday: scope.istoday, //是否显示今天 issure: scope.issure || true, //是否显示确认 festival: scope.festival, //是否显示节日 min: scope.min || '1900-01-01 00:00:00', //最小日期 max: scope.max || '2099-12-31 23:59:59', //最大日期 start: scope.start || '2014-6-15 23:00:00', //开始日期 fixed: scope.fixed, //是否固定在可视区域 zIndex: 99999999, //css z-index choose: function (data) { scope.$apply(read); scope.$apply(scope.choose); } }; function init() { laydate(scope.option); } init(); if(scope.start){ element.val(scope.start); } scope.$watch('min', function (newValue, oldValue) { if (newValue == oldValue) return; scope.option.min = newValue; }); scope.$watch('max', function (newValue, oldValue) { if (newValue == oldValue) return; scope.option.max = newValue; }); scope.$watch('format', function (newValue, oldValue) { if (newValue == oldValue) return; scope.option.format = newValue; read(); }); read(); },0); } } }); ``` html代码: ``` //开始时间 <input type="text" my-lay-date="" class="laydate-icon" autocomplete="off" id="startDate" ng-model="startDate.value" start={{startDate.value}} istime="{{istime}}" max="{{startDate.max}}" min="{{startDate.min}}" format="{{datetimeformat}}" timerange="{{timerange}}" choose="startselect()"/> //结束时间 <input type="text" my-lay-date="" class="laydate-icon" autocomplete="off" id="endDate" ng-model="endDate.value" start="{{endDate.value}}" istime="{{istime}}" format="{{datetimeformat}}" min="{{endDate.min}}" max="{{endDate.max}}" timerange="{{timerange}}"/> ``` js代码: ``` $scope.startDate = { 'value': moment().format('YYYY-MM-DD HH'), 'max': moment().format('YYYY-MM-DD HH'), 'min': '1951-01-01 00' }; //开始时间设置 $scope.endDate = { 'value': moment().format('YYYY-MM-DD HH'), 'min': $scope.startDate.value, 'max': moment().add(1, 'hours').format('YYYY-MM-DD HH') }; //结束时间设置 ``` 请问这是什么原因?
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页