Layui对input、select、date日历添加onchang时间
示例：输入身份证号获取出生年月日html代码js代码二、select添加onchang示例：实现市级二级联动html代码js代码二、date日历添加onchang示例：根据参加工作时间计算至今的年限html代码js代码
·
一、input添加onchang
示例：输入身份证号获取出生年月日
html代码
<div class="layui-inline">
<label class="layui-form-label required">身份证号<font
color="red">*</font></label>
<div class="layui-input-inline">
<input type="text" name="idCard" placeholder="请输入身份证号" id="idCard"
lay-verify="required|identity" lay-reqtext="身份证号不能为空" value=""
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">出生日期<font color="red">*</font></label>
<div class="layui-input-inline">
<input type="text" name="birthday" placeholder="请选择出生日期"
lay-verify="required" lay-reqtext="出生日期不能为空" value=""
class="layui-input" id="birthday" autocomplete="off">
</div>
</div>
js代码
<script>
$('#idCard').on("input",function(e){
//输入框的值改变时触发
//获取input输入的值
console.log(e.delegateTarget.name);//idCard
console.log(e.delegateTarget.value);//62233
//获取输入身份证号码
var UUserCard = e.delegateTarget.value;
//获取出生日期
var time = UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14);
$("#birthday").val(time);
});
</script>
二、select添加onchang
示例：实现市级二级联动
html代码
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label required">地区<font
color="red">*</font></label>
<div class="layui-input-block" style="width: 300px;">
<select name="regin" id="regin" lay-verify="required"
lay-filter="brickTypeRegin" lay-reqtext="地区不能为空">
<option value="" selected="selected">选择地区(市级)</option>
<option>昆明市</option>
<option>临沧市</option>
<option>丽江市</option>
<option>德宏傣族景颇族自治州</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">区域<font color="red">*</font></label>
<div class="layui-input-block" style="width: 300px;">
<select name="reach" id="reach" lay-verify="required"
lay-reqtext="区域不能为空">
<option value="" selected="selected">请先选择地区(市级)</option>
</select>
</div>
</div>
</div>
js代码
<script>
layui.use(['form','layselect','formSelects'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
form.on('select(brickTypeRegin)', function(data){
selectreach(data.value);
});
function selectreach(value){
$.ajax({
url:'/core/getreach',
method:'get',
data:{data:value},
async: false,
success: function (data) {
$('#reach').empty();
$('#reach').append(new Option("请选择区域(区县)",""))
$.each(data.data,function(index,item){
$('#reach').append(new Option(item,item))
});
//渲染select
form.render("select");
},
error:function (data) {
alert("selectreach"+data.msg);
}
});
}
});
</script>
三、date日历添加onchang
示例：根据参加工作时间计算至今的年限
html代码
<div class="layui-inline">
<label class="layui-form-label" style="width: 150px">参 加 工 作 时 间<font
color="red">*</font></label>
<div class="layui-input-inline">
<input type="text" name="workingHours" placeholder="请选择参加工作时间"
lay-verify="required" lay-reqtext="参加工作时间不能为空" value=""
class="layui-input" id="workingHours" autocomplete="off">
</div>
</div>
<!-- <div class="layui-inline">
<label class="layui-form-label" style="width: 150px">结束时间<font
color="red">*</font></label>
<div class="layui-input-inline">
<input type="text" name="workingHours" placeholder="请选择结束时间"
lay-verify="required" lay-reqtext="结束时间不能为空" value=""
class="layui-input" id="workingHours" autocomplete="off">
</div>
</div> -->
<div class="layui-inline">
<label class="layui-form-label" style="width: 150px">从事工作年限</label>
<div class="layui-input-inline">
<input type="text" name="secretWorkingHours" value="" id="secretWorkingHours"
class="layui-input" placeholder="0.00" autocomplete="off" lay-verify="required|number">
<span
style="position: absolute; top: 0; right: 0; display: table-cell; white-space: nowrap; padding: 7px 10px;">年</span>
</div>
</div>
js代码
<script>
layui.use('laydate', function(){
var laydate = layui.laydate;
//执行一个laydate实例
laydate.render({
elem: '#workingHours' //指定元素
,type: 'date'
,done: function(value, date, endDate){
console.log("开始=============");
console.log("value:"+value);
console.log("date:"+date);
console.log("endDate:"+endDate);//如果要计算两个时间之间的年限，使用改时间
var nowdate=new Date();//现在的时间
var nowyear=nowdate.getFullYear();
var nowmonth=nowdate.getMonth()+1;//实际月份
var nowdate=nowdate.getDate();//实际月份
//参加工作时间
var csyear=date.year;
var csmonth=date.month;
var csdate=date.date;
var nl=parseInt(nowyear)-parseInt(csyear);
var mon=parseInt(nowmonth)-parseInt(csmonth);
var dat=parseInt(nowdate)-parseInt(csdate);
var year;
if(nl<0){//如果参加工作时间大于当前时间的年数话
year=0.00;
}else if(nl==0){//如果参加工作时间等于当前时间的年数话
if(mon<0){//月数参加工作大于当前
year=0.00;
}else if(mon==0){//月数参加工作=当前
if(dat<0){//天数参加工作大于当前
year=0.00;
}else if(dat==0){//天数参加工作等于当前
year=0.00;
}else{//天数参加工作小于当前dat>0
year=dat/365;
}
}else{//月数参加工作小于当前
/* console.log(mon/12);
console.log(dat/365);
console.log(mon/12+dat/365); */
year=mon/12+dat/365;
}
}else{//如果参加工作时间小于当前时间的年数话
/* console.log(nl);
console.log(mon/12);
console.log(dat/365);
console.log(nl+mon/12+dat/365); */
year=nl+mon/12+dat/365;
}
//设置工作年限
/* console.log(year.toFixed(3)); */
$("#secretWorkingHours").val(year.toFixed(2));//截取小数点后两位
}
});
//上面是参加工作时间
//下面是出生日期，可以实现日期选择
laydate.render({
elem: '#birthday' //指定元素
,type: 'date'
});
});
</script>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)