失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jQuery EasyUI/TopJUI创建日期输入框

jQuery EasyUI/TopJUI创建日期输入框

时间:2023-08-21 03:29:21

相关推荐

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/'); // 设置日期输入框的值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中文网:

TopJUI前端框架:

TopJUI交流社区:

如果觉得《jQuery EasyUI/TopJUI创建日期输入框》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。