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 ...
随机推荐
- <ReversingEngineering>关于windows32位系统下的dll注入技术经验汇
上个学期把自己闷在图书馆一直在看关于逆向工程技术方面的书,从入门到初级,现在也敢说自己一条腿已经迈进了这片知识的大门里,因为该博客刚开通先将一些经验记录下来,也是留给自己一方面做个参照. <逆向 ...
- POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
题目链接:https://vjudge.net/problem/POJ-2774 Long Long Message Time Limit: 4000MS Memory Limit: 131072 ...
- C++配置Opencv
https://blog.csdn.net/qq_17550379/article/details/78201442
- Redis常用数据结构和操作
1.String 存入字符类型 Set name luowen 设置name = luowen 存储 Get name 获取设置好的name的值 Setnx name luowen 设置name键值为 ...
- 前端多媒体(4)—— video标签全面分析
测试地址:https://young-cowboy.github.io/gallery/html5_video/index.html 属性 一些属性是只读的,一些属性是可以修改从而影响视频播放的. a ...
- ECMAScript Obejct 属性操作API
Object 创建对象 我们有很多种方法创建一个对象,Object.create, Object.assign Object.create //字面量 var o = {}; // 等同于 var o ...
- swift的泛型貌似还差点意思
protocol Container { typealias ItemType mutating func append(item: ItemType) mutating func removelas ...
- linux 进程学习笔记-进程状态
task_struct的state字段记录的进程的状态,可分为如下几种: #define TASK_RUNNING 0 可运行状态.这是 “进程正在被CPU运行” 和 “进程正在可运行队列中等待被CP ...
- linux 下文件恢复工具extundelete介绍
下载 http://extundelete.sourceforge.net/ bunzip2 extundelete-0.2.0.tar.bz2 tar xvf extundelete-0.2 ...
- liunx让命令窗口显示段路径的方法
平时我们使用linux终端命令行的时候,常常会被一个问题困扰,那就是文件路径过长,有时候甚至超过了一行,这样看起来非常别扭,其实只要两步就可以解决这个问题: 1,修改.bashrc文件(用户根目录下) ...