jQuery EasyUI/TopJUI创建日期输入框
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
jQuery EasyUI/TopJUI创建日期输入框的更多相关文章
- jQuery EasyUI/TopJUI创建日期时间输入框
jQuery EasyUI/TopJUI创建日期时间输入框 日期时间输入框组件 HTML 和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示.相比日期输入框,它在下拉 ...
- jQuery EasyUI/TopJUI输入框事件监听
jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...
- jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...)
jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...) numberbox(数值输入框) HTML required:必填字段,默认为false:prompt:显示 ...
- jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)
jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作
jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- JQuery Easyui/TopJUI 多表头创建
JQuery Easyui/TopJUI 多表头创建 废话不多说,直接贴上代码. html <div data-toggle="topjui-layout" data-opt ...
随机推荐
- 请求时token过期自动刷新token
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的 ...
- PYTHON 爬虫笔记八:利用Requests+正则表达式爬取猫眼电影top100(实战项目一)
利用Requests+正则表达式爬取猫眼电影top100 目标站点分析 流程框架 爬虫实战 使用requests库获取top100首页: import requests def get_one_pag ...
- HDU 4652 Dice:期望dp(成环)【错位相减】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4652 题意: 给你一个有m个面的骰子. 两种询问: (1)"0 m n": “最后 ...
- 在你的网站中使用 AdSense广告
下面介绍了如何使用Google的AdSense来为你的网站设置广告.基本内容包括: 创建一个AdSense账号,你必须18岁以上,有一个Google账号以及地址 你的网站必须已经被激活,并且你的网站内 ...
- python基础-正则1
什么是正则表达式? 正则表达式是一种小型的\高度专业化的变成语言,主要用于字符串处理 正则表达式是一种通用语言,在python中通过re模块实现,import re 工具:在线正则表达式测试 http ...
- 机器学习:Colorization using Optimization
今天介绍 Siggraph 2004 年的一篇文章: Colorization using Optimization,利用优化的方法对灰度图像进行着色,这里用到了非常经典的泊松方程以及稀疏矩阵的线性优 ...
- 集训Day1
雅礼集训2017Day1的题 感觉上不可做实际上还挺简单的吧 T1 区间加 区间除法向下取整 查询区间和 区间最小值 大力上线段树,把除法标记推到底,加法标记就是按照线段树的来 先拿30 然后60的数 ...
- AndyQsmart ACM学习历程——ZOJ3872 Beauty of Array(递推)
Description Edward has an array A with N integers. He defines the beauty of an array as the summatio ...
- BZOJ 1567: [JSOI2008]Blue Mary的战役地图
1567: [JSOI2008]Blue Mary的战役地图 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1011 Solved: 578[Sub ...
- BZOJ2006:[NOI2010]超级钢琴
浅谈\(RMQ\):https://www.cnblogs.com/AKMer/p/10128219.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...