easyui源码翻译1.32--DateTimeBox(日期时间输入框)
前言
扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象。下载该插件翻译源码
和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示。相比日期输入框,它在下拉面板中添加了一个时间微调器。
源码
/**
* jQuery EasyUI 1.3.2
*
*翻译 qq 1364386878
*/
(function ($) {
//初始化方法
function init(jq) {
var datetimebox = $.data(jq, "datetimebox");
var options = datetimebox.options;
$(jq).datebox($.extend({}, options, {
onShowPanel: function () {
var value = $(jq).datetimebox("getValue");
_setValue(jq, value, true);
options.onShowPanel.call(jq);
},
formatter: $.fn.datebox.defaults.formatter,
parser: $.fn.datebox.defaults.parser
}));
$(jq).removeClass("datebox-f").addClass("datetimebox-f");
$(jq).datebox("calendar").calendar({
onSelect: function (value) {
options.onSelect.call(jq, value);
}
});
var panel = $(jq).datebox("panel");
if (!datetimebox.spinner) {
var p = $("<div style=\"padding:2px\"><input style=\"width:80px\"></div>").insertAfter(panel.children("div.datebox-calendar-inner"));
datetimebox.spinner = p.children("input");
var button = panel.children("div.datebox-button");
var ok = $("<a href=\"javascript:void(0)\" class=\"datebox-ok\"></a>").html(options.okText).appendTo(button);
//添加ok按钮事件
ok.hover(function () {
$(this).addClass("datebox-button-hover");
}, function () {
$(this).removeClass("datebox-button-hover");
}).click(function () {
_enter(jq);
});
}
datetimebox.spinner.timespinner({
showSeconds: options.showSeconds,
separator: options.timeSeparator
}).unbind(".datetimebox").bind("mousedown.datetimebox", function (e) {
e.stopPropagation();
});
_setValue(jq, options.value);
};
//获取当前年月日时分秒
function currentNewData(jq) {
var calendar = $(jq).datetimebox("calendar");
var spinner = $(jq).datetimebox("spinner");
var current = calendar.calendar("options").current;
return new Date(current.getFullYear(),
current.getMonth(),
current.getDate(),
spinner.timespinner("getHours"),
spinner.timespinner("getMinutes"),
spinner.timespinner("getSeconds"));
};
function _query(jq, q) {
_setValue(jq, q, true);
};
function _enter(jq) {
var options = $.data(jq, "datetimebox").options;
var data = currentNewData(jq);
_setValue(jq, options.formatter.call(jq, data));
$(jq).combo("hidePanel");
};
//赋值
function _setValue(jq, value, _15) {
var options = $.data(jq, "datetimebox").options;
$(jq).combo("setValue", value);
if (!_15) {
if (value) {
var value = options.parser.call(jq, value);
$(jq).combo("setValue", options.formatter.call(jq, value));
$(jq).combo("setText", options.formatter.call(jq, value));
} else {
$(jq).combo("setText", value);
}
}
var value = options.parser.call(jq, value);
$(jq).datetimebox("calendar").calendar("moveTo", value);
$(jq).datetimebox("spinner").timespinner("setValue", getdata(value));
function getdata(data) {
//获取小时
function gethour(hour) {
return (hour < 10 ? "0" : "") + hour;
};
var tt = [gethour(data.getHours()), gethour(data.getMinutes())];
if (options.showSeconds) {
tt.push(gethour(data.getSeconds()));
}
return tt.join($(jq).datetimebox("spinner").timespinner("options").separator);
};
};
//实例化
$.fn.datetimebox = function (target, parm) {
if (typeof target == "string") {
var method = $.fn.datetimebox.methods[target];
if (method) {
return method(this, parm);
} else {
return this.datebox(target, parm);
}
}
target = target || {};
return this.each(function () {
var datetimebox = $.data(this, "datetimebox");
if (datetimebox) {
$.extend(datetimebox.options, target);
} else {
$.data(this, "datetimebox", {
options: $.extend({},
$.fn.datetimebox.defaults,
$.fn.datetimebox.parseOptions(this),
target)
});
}
init(this);
});
};
//默认方法
$.fn.datetimebox.methods = {
//返回属性对象
options: function (jq) {
var options = $.data(jq[0], "datetimebox").options;
options.originalValue = jq.datebox("options").originalValue;
return options;
},
//返回时间微调器对象
spinner: function (jq) {
return $.data(jq[0], "datetimebox").spinner;
},
//赋值
setValue: function (jq, value) {
return jq.each(function () {
_setValue(this, value);
});
},
//重置
reset: function (jq) {
return jq.each(function () {
var options = $(this).datetimebox("options");
$(this).datetimebox("setValue", options.originalValue);
});
}
};
//解析器
$.fn.datetimebox.parseOptions = function (target) {
var spinner = $(target);
return $.extend({}, $.fn.datebox.parseOptions(target),
$.parser.parseOptions(target, ["timeSeparator", { showSeconds: "boolean" }]));
};
//日期时间输入框 默认属性和事件
$.fn.datetimebox.defaults = $.extend({}, $.fn.datebox.defaults, {
showSeconds: true,//定义是否显示秒钟信息
timeSeparator: ":",//定义在小时、分钟和秒之间的时间分割字符
//键盘事件
keyHandler: {
up: function () {
},
down: function () {
},
enter: function () {
_enter(this);
},
query: function (q) {
_query(this, q);
}
},
//格式化日期
formatter: function (data) {
var h = data.getHours();
var M = data.getMinutes();
var s = data.getSeconds();
function gethour(h) {
return (h < 10 ? "0" : "") + h;
};
var spinner = $(this).datetimebox("spinner").timespinner("options").separator;
var r = $.fn.datebox.defaults.formatter(data) + " " + gethour(h) + spinner + gethour(M);
if ($(this).datetimebox("options").showSeconds) {
r += spinner + gethour(s);
}
return r;
},
//解析器
parser: function (s) {
if ($.trim(s) == "") {
return new Date();
}
var dt = s.split(" ");
var d = $.fn.datebox.defaults.parser(dt[0]);
if (dt.length < 2) {
return d;
}
var spinner = $(this).datetimebox("spinner").timespinner("options").separator;
var tt = dt[1].split(spinner);
var hour = parseInt(tt[0], 10) || 0;
var minute = parseInt(tt[1], 10) || 0;
var second = parseInt(tt[2], 10) || 0;
return new Date(d.getFullYear(), d.getMonth(), d.getDate(), hour, minute, second);
}
});
})(jQuery);
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeBox - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
<script src="../../plugins2/jquery.panel.js"></script>
<script src="../../plugins2/jquery.combo.js"></script>
<script src="../../plugins2/jquery.calendar.js"></script>
<script src="../../plugins2/jquery.datebox.js"></script>
<script src="../../plugins2/jquery.validatebox.js"></script>
<script src="../../plugins2/jquery.spinner.js"></script>
<script src="../../plugins/jquery.timespinner.js"></script>
<script src="../../plugins2/jquery.datetimebox.js"></script>
</head>
<body>
<h2>Basic DateTimeBox</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the calendar image on the right side.</div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-datetimebox" required style="width:150px">
</body>
</html>
插件效果
easyui源码翻译1.32--DateTimeBox(日期时间输入框)的更多相关文章
- easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)
前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...
- easyui源码翻译1.32--DateBox(日期输入框)
前言 扩展自$.fn.combo.defaults.使用$.fn.datebox.defaults重写默认值对象.下载该插件翻译源码 日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历 ...
- 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件
jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...
- DateTimeBox( 日期时间输入框)
本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框)组件的使用方法,这个组件依赖于 DateBox(日期输入框)组件和 TimeSpinner(时间微调)组件. 一. 加载方式/ ...
- easyui源码翻译1.32--datagrid(数据表格)
前言 此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34 1.33开始支持css3 算是又一个转折 但是 ...
- easyui源码翻译1.32--EasyLoader(简单加载)
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...
- easyui源码翻译1.32--Form(表单)
前言 使用$.fn.form.defaults重写默认值对象下载该插件翻译源码 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用va ...
- easyui源码翻译1.32--Calendar(日历)
前言 前几天加班比较忙 未能及时更新翻译的 今天多发布几篇..下载该插件翻译源码 日历控件显示一个月的日历,允许用户选择日期和移动到下一个或上一个月.默认情况下,一周的第一天是周日.它可以通过设置'f ...
- easyui源码翻译1.32--TimeSpinner(时间微调)
前言 扩展自$.fn.spinner.defaults.使用$.fn.timespinner.defaults重写默认值对象.下载该插件翻译源码 时间微调组件的创建基于微调组件.它和数字微调类似,但是 ...
随机推荐
- C++的转换构造函数、拷贝构造函数、赋值运算符重载
1 转换构造函数 C++的转换构造函数是只有一个参数的构造函数.当程序试图将一个其他类型的对象或基本类型值赋给该类的一个待初始化对象时(如Person p="Dean";) ...
- 批量转换word文档到pdf文件
最近在整理每周的工作记录.因为每周的工作记录大都是单独的word文件,有时候忘记了也不容易找出来,一个个打开查找太费劲,因此想着把这些文件通过word2016的另存为功能转换为pdf,然后永Acrob ...
- NSdata 与 NSString,Byte数组,UIImage 的相互转换
1. NSData 与 NSString NSData-> NSString NSString *aString = [[NSString alloc] initWithData:adataen ...
- Error 1937.An error occurred during the installation of assembly...
工具:Installshield 2008 任务: 1. 创建一个 Merge Module 工程, 在 Merge Module 中包含若干 dll, 在安装过程中,dll 会被安装到指定路径. 2 ...
- 第10条:始终要覆盖toString
java.lang.Object的toString方法的实现: public String toString() { return getClass().getName() + "@&quo ...
- [翻译][MVC 5 + EF 6] 7:加载相关数据
原文:Reading Related Data with the Entity Framework in an ASP.NET MVC Application 1.延迟(Lazy)加载.预先(Eage ...
- AD,Group
DataTable dtUser = GetEmptyDT(); Dictionary<DirectoryEntry, string> test1 = GetUserAndGroup(cl ...
- li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见
点评:用了overflow:hidden 会影响 list-style,即当ul 中的li 的overflow 为hidden的时候,list-style不起作用,不显示前面的点.圈等样式,在ul或l ...
- python log 层次结构
文件结构 - run.py - b -- __init__.py run.py import logging import b log = logging.getLogger("" ...
- Python OptionParser学习
from optparse import OptionParser import sys def main(): p = OptionParser() p.add_option('-n','--nam ...