layer时间插件
引入:
<link rel="stylesheet" href="<{$cdnsite}>/default/common/layui/css/layui.css?<{$version}>" />
<script type="text/javascript" src="<{$cdnsite}>/default/js/jquery-1.9.1.min.js?<{$version}>1"></script>
<script type="text/javascript" src="/default/common/layui/layui.js"></script> PHP代码:
$searchdata = array(
'name' => '',
'mobile' => '',
'timeset' => '',
'stime' => date("Y-m-d",time()),
'etime' => date("Y-m-d",time()),
'status' => '',
'city' => '',
); HTML代码:
<input type="hidden" class="layui-input" id="p_stime" value="<{$searchdata.stime}>" name="stime" >
<input type="hidden" class="layui-input" id="p_etime" value="<{$searchdata.etime}>" name="etime" > <div class="layui-inline">
<label class="layui-form-label">时间选择:</label>
<div class="layui-input-inline" id="timeset">
<select name="timeset" lay-filter="text1">
<option value="">-不限-</option>
<option value="today" <{if $searchdata.timeset eq 'today'}>selected
<{/if}>>今日</option>
<option value="yesterday" <{if $searchdata.timeset eq 'yesterday'}>selected
<{/if}>>昨天</option>
<option value="lastweek" <{if $searchdata.timeset eq 'lastweek'}>selected
<{/if}>>最近7天</option>
<option value="thismonth" <{if $searchdata.timeset eq 'thismonth'}>selected
<{/if}>>本月</option>
<option value="lastmonth" <{if $searchdata.timeset eq 'lastmonth'}>selected
<{/if}>>上月</option>
<option value="customize" <{if $searchdata.timeset eq 'customize'}>selected
<{/if}>>自定义</option>
</select>
</div>
</div>
<div <{if $searchdata.timeset eq 'customize'}> style="display:''";<{else}>style="display:none;"<{/if}>
class="layui-inline" id="customtime" style="display: none;">
<label class="layui-form-label">日期选择:</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" class="layui-input" id="stime" >
</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" class="layui-input" id="etime" >
</div>
</div> JS代码:
var stime = '<{$searchdata.stime}>';
var etime = '<{$searchdata.etime}>';
layui.use(['form', 'laydate'], function() {
var form = layui.form; var laydate = layui.laydate;
//日历格式 var stime_box = laydate.render({
elem: '#stime', //需显示日期的元素选择器
value: stime,
done:function(value,date){
$('#p_stime').val(value);
}
});
//日历格式
var etime_box = laydate.render({
elem: '#etime', //需显示日期的元素选择器
value: etime,
done:function(value,date){
$('#p_etime').val(value);
}
}); //select下拉
form.on('select(text1)', function(data) {
if(data.value == 'customize') {
$('#customtime').show();
} else {
$('#stime').val('');
$('#etime').val('');
$('#customtime').hide();
}
});
});
layer时间插件的更多相关文章
- Yii笔记:打印sql、Form表单、时间插件、Mysql的 FIND_IN_SET函数使用、是否是post/ajax请求
语句部分: yii1版本打印最后一条执行的SQL: $this->getDbConnection()->createCommand()->select()->from()-&g ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- bootstrap时间插件 火狐不显示 完美解决方法
原文链接:http://www.phpbiji.cn/article/index/id/141/cid/4.html bootstrap时间插件火狐 bootstrap-datetimepicker火 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件
<!DOCTYPE html><head> <title>时间插件测试</title><style type="text/css&quo ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- 项目中遇到angular时间插件datetinepicker汉化问题
问题描述: 测试需要中文的时间插件: 参考资料: angularjs封装bootstrap官网的时间插件datetimepicker https://www.cnblogs.com/cynthia-w ...
- 时间插件--daterangepicker使用和配置详解
1.序言: daterangepicker是Bootstrap的一个时间组件,使用很方便 用于选择日期范围的JavaScript组件. 设计用于Bootstrap CSS框架. 它最初是为了改善报表而 ...
- bootstrap-datetimepicker时间插件
bootstrap-datetimepicker时间插件 依赖的jar包 bootstrap的js和css jquery.js datetimepicker的js文件: bootstrap-datet ...
随机推荐
- day13 python-001 简介及循环、判断、复制等
Python之路,Day1 = Python基础1 本节内容 1.Python历史简介以及安装.环境变量的配置: 2.Pycharm的简单设置: 3.变量的使用及定义: 4.获取键盘输入及打印: 5. ...
- thingkphp 路由实例
我们已经了解了如何定义路由规则,下面我们来举个例子加深印象. 假设我们定义了News控制器如下(代码实现仅供参考): namespace Home\Controller; use Think\Cont ...
- 带撤销贪心——cf1148F好题
自己不会做,看了题解懂得 从最高位依次往低位遍历,因为偶数个1是不改变符号的,所以带个贪心即可(可以看成是带撤销的..) 每轮循环用sum记录该位选择1可以减少的值 如果是负数,就不要改成1 如果是正 ...
- Xcode 5 SVN配置
from:http://stackoverflow.com/questions/19180718/import-a-project-in-svn-from-xcode-5/19410994#19410 ...
- 牛客多校第五场 A digits 2 签到
题意: 给定一个n,输出一个数,要求这个数所有位之和整除n,并且这个数也整除n,并且位数不许多于1e4 题解: 把这个数n输出n遍. #include<iostream> using na ...
- iOS开发之SceneKit框架--SCNCamera.h
1.SCNCamera简介 被称为照相机或者摄像机,可以附加到节点以提供显示场景的角度.其实就是用户视角和人的眼睛一样. 2.相关API简介 初始化 //懒加载 + (instancetype)cam ...
- Vue-组件详解
转载:https://segmentfault.com/a/1190000015199363 查看原文站点,更多扩展内容及更佳阅读体验! 组件详解 组件与复用 Vue组件需要注册后才可以使用.注册有全 ...
- dashboard服务
1.上传镜像,并导入,打标签 2.创建dashboard的deployment和service apiVersion: extensions/v1beta1 kind: Deployment meta ...
- <scrapy爬虫>爬取360妹子图存入mysql(mongoDB还没学会,学会后加上去)
1.创建scrapy项目 dos窗口输入: scrapy startproject images360 cd images360 2.编写item.py文件(相当于编写模板,需要爬取的数据在这里定义) ...
- Caffe系列1——网络文件和求解分析
1. 首先,我们先看一个完整的文件:lenet_train_test.prototxt name: "LeNet" #整个网络的名称 layer { #数据层——训练数据 name ...