easyui datebox 开始/结束时间 动态互相限制
管理员 发布于 5年前 359
easyui这个就不多说了，两种方式；话不多说直接上代码；
前端代码：
开始： <input id="start" type="text" name="startdate" class="easyui-datebox"> 结束： <input id="end" type="text" name="enddate" class="easyui-datebox">
js代码：
1.动态限制结束时间
//##时间限制 start ##//
//开始日期选择时触发
$('#<?php echo NS;?>start').datebox({
onSelect : function(){
//启用结束日期控件
$('#<?php echo NS; ?>end').datebox('enable');
setTimeout(function () {
var start = $('#<?php echo NS; ?>start').datebox('getValue');
var end = $('#<?php echo NS; ?>end').datebox('getValue');
//开始日期大于结束日期 重置结束日期
if (start > end) {
$('#<?php echo NS; ?>end').datebox('reset');
}
},200);
}
});
$(function(){
//开始日期选今天之前
$('#<?php echo NS; ?>start').datebox().datebox('calendar').calendar({
validator: function(date){
var now = new Date();
var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return d1>=date;
}
});
//选择开始日期之后
$('#<?php echo NS; ?>end').datebox().datebox('calendar').calendar({
validator: function(date){
var now = new Date();
var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var d2 = $('#<?php echo NS; ?>start').datebox('getValue');
var d2 = new Date(Date.parse(d2.replace(/-/g,"/")));
return d1<=date || date>=d2;
}
});
});
//##时间限制 end ##//
2.动态互相限制
//##时间限制 start ##//
$(function() {
//开始日期选结束日期之前
$('#<?php echo NS; ?>start').datebox(
{
onShowPanel: function () {
$(this)
.datebox('calendar')
.calendar({
validator: function (date) {
var end = $('#<?php echo NS; ?>end').datebox('getValue');
if (end) {
end = new Date(Date.parse(end.replace(/-/g, "/")));
} else {
end = new Date();
}
return date <= end;
}
})
}
});
//结束日期选开始日期之后
$('#<?php echo NS; ?>end').datebox(
{
onShowPanel: function () {
$(this)
.datebox('calendar')
.calendar({
validator: function (date) {
var start = $('#<?php echo NS; ?>start').datebox('getValue');
if (start) {
start = new Date(Date.parse(start.replace(/-/g, "/")));
} else {
start = new Date();
}
return date >= start;
}
})
}
});
})
//##时间限制 end ##//效果就不截图了 有兴趣的自己测试哦
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
该博客于2020-12-7日，后端基于go语言的beego框架开发
前端页面使用Bootstrap可视化布局系统自动生成
是我仿的原来我的TP5框架写的博客，比较粗糙，底下是入口
侯体宗的博客
文章标签
- test 三种扣减库存方案 Hyperf2.1启动报错端口占用 上外网神器Ghelper 上外网神器集装箱 laravel中HMVC模式 Hyperf框架验证器 Hyperf自定义函数编写 Hyperf对象转成数组 PHP2021面试题集 centos7系统上挂载 Hyperf框架 秒杀系统的设计 Laravel Octane PHP数组底层实现原理 php7垃圾回收机制 Laravel中类型转换 mysql事务特征及隔离级别 Linux-awk命令 mysql编码 JWT源码实现 Laravel内核分析 Laravel中的用法 centos7+go环境+beego框架 go+beego框架开发博客 go+beego开发博客首页 go+beego自定义公共函数 beego注册_登录_查询 beego控制器创建 Beego框架安装 go语言环境安装 laravel+Elasticsearc laravel运行原理 windows7搭建Vuejs环境 Laravel分块 laravel去重(distinct() laravel集合 laravel+mysql读写分离 laravel5+复杂原生sql laravel+MissMyCat/al lnmp sessio laravel自定义数组分页 laravel中.env配置 laravel8队列发邮件 码云仓库常用操作 laravel8配置163SMTP laravel8配置全局函数 laravel/jetstream之认证 laravel/jetstream
友情链接
