jQuery EasyUI/TopJUI创建日期输入框
2024-08-25 07:50:34
jQuery EasyUI/TopJUI创建日期输入框
日期时间输入框组件
HTML
required:必填字段,默认为false;prompt:显示在输入框的提示性文字;pattern:日期格式 YYYY、YYYY-mm
<div class="topjui-container">
<fieldset>
<legend>yyyy-MM-dd格式</legend>
</fieldset>
<div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">出生日期</label>
<div class="topjui-input-block"><input type="text" name="birthday" data-toggle="topjui-datebox">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">入职日期</label>
<div class="topjui-input-block">
<input type="text" name="jobDate"
data-toggle="topjui-datebox"
data-options="required:true,prompt:'入职日期是必填字段'">
</td>
</div>
</div>
</div> <fieldset>
<legend>YYYY-mm格式</legend>
</fieldset>
<div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">出生年月</label>
<div class="topjui-input-block">
<input type="text" name="birthday"
data-toggle="topjui-datebox"
data-options="pattern:'YYYY-mm'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">入职年月</label>
<div class="topjui-input-block">
<input type="text" name="jobDate"
data-toggle="topjui-datebox"
data-options="required:true,pattern:'YYYY-mm',prompt:'入职年月是必填字段'">
</td>
</div>
</div>
</div> <fieldset>
<legend>YYYY格式</legend>
</fieldset>
<div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">出生年度</label>
<div class="topjui-input-block">
<input type="text" name="birthday"
data-toggle="topjui-datebox"
data-options="pattern:'YYYY'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">入职年度</label>
<div class="topjui-input-block">
<input type="text" name="jobDate"
data-toggle="topjui-datebox"
data-options="required:true,pattern:'YYYY',prompt:'入职年度是必填字段'">
</div>
</div>
</div>
</div>
js
<input id="dd" type="text"> $('#dd').iDatebox({
required:true
});
格式化日期
$.fn.iDatebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return m+'/'+d+'/'+y;
}
设置日期输入框的值
$('#dd').iDatebox('setValue', '6/1/2012'); // 设置日期输入框的值
var v = $('#dd').iDatebox('getValue'); // 获取日期输入框的值
日历下面的按钮
var buttons = $.extend([], $.fn.iDatebox.defaults.buttons);
buttons.splice(1, 0, {
text: 'MyBtn',
handler: function(target){
alert('click MyBtn');
}
});
$('#dd').iDatebox({
buttons: buttons
});
EasyUI中文网:http://www.jeasyui.cn
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com
最新文章
- linux下进程突然断掉后的日志查询
- 基于SURF特征的目标检测
- win7自动登录桌面
- Deep Copy cv::StereoBM 深度拷贝
- Linux下的ntpd和ntpdate
- Java之蛋疼的file Protocol
- Informatica9.6.1在Linux Red Hat 5.8上安装遇到的有关问题整理_2
- Tomcat部署Web应用方法总结
- windows 下使用 MinGW + msys 编译 ffmpeg
- 【Java】List的三种遍历方法
- 翻译【ElasticSearch Server】第一章:开始使用ElasticSearch集群(3)
- 李洪强iOS开发之使用 Reachability 检测网络
- 从Ubuntu12.04升级到Ubuntu 14.04之后,系统将无法启动
- WCF RIA Services异常
- css3滚动效果
- 面向对象(java菜鸟的课堂笔记)
- Android开发简易教程
- sessionStorage 、localStorage 和 cookie
- 关于Tomcat启动时,长时间停在Initializing Spring root webApplicationContext处的原因
- Bootstrap中的data-toggle,data-target
热门文章
- ES6 Fetch API HTTP请求实用指南
- [转]aliyun阿里云Maven仓库地址——加速你的maven构建
- ASP.NET MVC3中的路由系统
- js修改div标签中的内容
- 0-mybatis目录
- 一步完成MySQL向Redis迁移
- http://www.cnblogs.com/henw/archive/2012/01/06/2314870.html
- babel-runtime 和 babel-polyfill
- Java se 知识图解
- CodeForces - 660F:Bear and Bowling 4(DP+斜率优化)