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

最新文章

  1. linux下进程突然断掉后的日志查询
  2. 基于SURF特征的目标检测
  3. win7自动登录桌面
  4. Deep Copy cv::StereoBM 深度拷贝
  5. Linux下的ntpd和ntpdate
  6. Java之蛋疼的file Protocol
  7. Informatica9.6.1在Linux Red Hat 5.8上安装遇到的有关问题整理_2
  8. Tomcat部署Web应用方法总结
  9. windows 下使用 MinGW + msys 编译 ffmpeg
  10. 【Java】List的三种遍历方法
  11. 翻译【ElasticSearch Server】第一章:开始使用ElasticSearch集群(3)
  12. 李洪强iOS开发之使用 Reachability 检测网络
  13. 从Ubuntu12.04升级到Ubuntu 14.04之后,系统将无法启动
  14. WCF RIA Services异常
  15. css3滚动效果
  16. 面向对象(java菜鸟的课堂笔记)
  17. Android开发简易教程
  18. sessionStorage 、localStorage 和 cookie
  19. 关于Tomcat启动时,长时间停在Initializing Spring root webApplicationContext处的原因
  20. Bootstrap中的data-toggle,data-target

热门文章

  1. ES6 Fetch API HTTP请求实用指南
  2. [转]aliyun阿里云Maven仓库地址——加速你的maven构建
  3. ASP.NET MVC3中的路由系统
  4. js修改div标签中的内容
  5. 0-mybatis目录
  6. 一步完成MySQL向Redis迁移
  7. http://www.cnblogs.com/henw/archive/2012/01/06/2314870.html
  8. babel-runtime 和 babel-polyfill
  9. Java se 知识图解
  10. CodeForces - 660F:Bear and Bowling 4(DP+斜率优化)