app中jeDate日期控件的使用
如果是knockout监听对象那么可封装
define(function (require) {
'use strict';
var lib = {
ko: require('ko'),
$: require('jquery'),
_: require('lodash'),
jedate: require('jedate'),
};
var model = {
user: require('oa!app/model/IBP/User'),
};
var helper = {
settings: require('app/helper/settings'),
func: require('oa!app/helper/func'),
date: require('oa!app/helper/date'),
};
var registerOAChecked = function () {
lib.ko.bindingHandlers['oa-checked'] = {
init: function (element, valueAccessor) {
if (element.type == 'radio' && typeof valueAccessor()() == "boolean" && typeof valueAccessor()() ) {
element.checked = true;
}
lib.$(element).on('change', function () {
var type = element.type;
var checked = element.checked;
var value = element.value;
var rawValue = valueAccessor();
if (type == 'checkbox') {
if (rawValue() instanceof Array) {
checked ? rawValue.push(value) : rawValue.remove(value);
} else {
rawValue(checked);
}
} else if (type == 'radio') {
rawValue(value);
}
});
},
update: function (element, valueAccessor) {
}
};
}
var registerOADate = function () {
var getjeDateFormat = function (type) {
switch (type) {
case 'year':
return "YYYY年";
case 'month':
return "YYYY-MM";
case 'date':
return "YYYY-MM-DD";
case 'time':
return "hh:mm:ss";
case 'datetime':
return "YYYY-MM-DD hh:mm:ss";
case 'shortdatetime':
return "YYYY-MM-DD hh:mm";
default:
return "YYYY-MM-DD hh:mm:ss";
}
}
var getDateFormat = function (type) {
switch (type) {
case 'year':
return "yyyy";
case 'month':
return "yyyy-MM";
case 'date':
return "yyyy-MM-dd";
case 'time':
return "hh:mm:ss";
case 'datetime':
return "yyyy-MM-dd hh:mm:ss";
case 'shortdatetime':
return "yyyy-MM-dd hh:mm";
default:
return "yyyy-MM-dd hh:mm:ss";
}
}
lib.ko.bindingHandlers['om-date'] = {
init: function (element, valueAccessor) {
var rawValue = valueAccessor();
var $el = lib.$(element);
var type = $el.attr('data-format');
var enable = $el.attr('data-enable')||'true';
$el.attr('readonly', 'readonly');
var options = {
zIndex: 100000,
festival: false,
isShow: false,
choosefun: function (elem, val, date) {
rawValue(date?date:val.replace('-','/').replace('年',''))
},
clearfun: function (elem, val, date) {
rawValue('')
},
okfun: function (elem, val, date) {
rawValue(date ? date : val.replace('-', '/').replace('年', ''))
},
format: getjeDateFormat(type),
};
$el.click(function () {
var setTimeoutEvent = setTimeout(function () {
var inputEl = lib.$('.jedatehms input');
if (inputEl.length > 0) {
inputEl.attr('readonly', 'readonly');
} else {
setTimeoutEvent();
}
}, 50);
})
if (enable=='true')$el.jeDate(options);
var value = rawValue();
if (value) {
if (typeof (value) == 'string') value = value.replace(/-/g, '/');
$el.val(helper.date.format(new Date(value), getDateFormat(type)));
}
},
update: function (element, valueAccessor) {
var rawValue = valueAccessor();
var $el = lib.$(element);
var type = $el.attr('data-format');
var value = rawValue();
if (value) {
var formatType = getDateFormat(type);
if (formatType == "yyyy-MM") {
value = value + "-01";
}
if (typeof (value) == 'string') value = value.replace(/-/g, '/');
$el.val(helper.date.format(new Date(value), formatType));
} else {
$el.val('');
}
},
};
}
var registerOAPower = function () {
lib.ko.bindingHandlers['oa-power'] = {
update: function (element, valueAccessor) {
var rawValue = valueAccessor();
var showOrHide = function (check) {
check ? lib.$(element).show() : lib.$(element).hide();
}
if (typeof rawValue == 'boolean') {
showOrHide(rawValue);
} else if (typeof rawValue == 'string') {
model.user.checkOperationPower(rawValue).done(showOrHide);
} else if (lib.ko.isObservable(rawValue)) {
showOrHide(rawValue());
}
},
}
}
var registerOASrc = function () {
lib.ko.bindingHandlers['oa-src'] = {
update: function (element, valueAccessor) {
var src = '', rawValue = valueAccessor(), settings = helper.settings.get();
if (typeof (rawValue) == 'string') {
src = rawValue;
} else if (lib.ko.isObservable(rawValue)) {
src = rawValue() + '';
}
if (settings.isAbsUrl) {
if (src && src.indexOf('http://') != -1) {
src = src;
} else {
if (src && src.indexOf('@') != -1 && src.indexOf('@') == 0) {
src = settings.siteUrl + src.replace('@','');
} else {
src = settings.siteUrl + '/..' + src;
}
}
} else {
if (src && src.indexOf('@') != -1 && src.indexOf('@') == 0) {
src ='..'+ src.replace('@', '');
} else {
if (src.indexOf('//') == 0) {
src = src.replace('//', '/');
} else {
src = src;
}
}
}
if (lib.$(element).attr('class')&&lib.$(element).attr('class').indexOf('lazy')!=-1) {
lib.$(element).attr('src', 'data:image/gif;base64,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');
lib.$(element).attr('data-src', src);
} else {
lib.$(element).attr('src', src);
}
}
}
}
var registerOAClick = function () {
lib.ko.bindingHandlers['oa-click'] = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var thinClick = helper.func.thinCall(valueAccessor());
lib.$(element).on('click', function () {
thinClick(viewModel, element);
});
},
};
}
var registerOAFormat = function () {
var isValidDate = function (date) {
return date.getTime() === date.getTime();
}
var updateDate = function ($el, oldValue, rawValue) {
var value = new Date(oldValue);
if (isValidDate(value)) {
$el.val(helper.date.format(value, rawValue));
} else {
$el.val('');
}
}
var updateNumber = function ($el, oldValue, rawValue) {
var value = parseFloat(oldValue);
if (lib._.isNumber(value)) {
$el.val(value.toFixed(fixed.replace('#.', '').length));
} else {
$el.val(0);
}
}
lib.ko.bindingHandlers['oa-format'] = {
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var $el = lib.$(element);
var oldValue = $el.val();
var rawValue = valueAccessor();
switch (rawValue) {
case 'yyyy-MM-dd hh:mm:ss':
case 'yyyy-MM-dd':
case 'hh:mm:ss':
updateDate($el, oldValue, rawValue);
break;
case '#':
case '#.#':
case '#.##':
case '#.###':
case '#.####':
updateNumber($el, oldValue, rawValue);
break;
}
}
};
}
var obj = {
start: function (cb) {
registerOAChecked();
registerOADate();
registerOAPower();
registerOASrc();
registerOAClick();
registerOAFormat();
if (cb) cb();
},
};
return obj;
});
页面直接 <input type="text" style="width: 10rem;" data-format="date" data-bind="om-date:dPurDate" />即可
而如果是页面加载完了要动态构建html,那么这样写就不生效了,那么就要重新定义一个方法才行,如下:
getDateControl: function (el, choosefun, clearfun, okfun) {
var options = {
zIndex: 100000,
festival: false,
isShow: false,
choosefun: function (elem, val, date) {
if (choosefun) choosefun(elem, val, date);
console.log(date);
},
clearfun: function (elem, val, date) {
if (clearfun) clearfun(elem, val, date);
console.log(date);
},
okfun: function (elem, val, date) {
if (okfun) okfun(elem, val, date);
console.log(date);
},
format: 'YYYY-MM-DD',
};
var selEl =el;
selEl.click(function () {
var setTimeoutEvent = setTimeout(function () {
var inputEl = helper.$('.jedatehms input');
if (inputEl.length > 0) {
inputEl.attr('readonly', 'readonly');
} else {
setTimeoutEvent();
}
}, 50);
})
selEl.jeDate(options);
},
然后页面<input type="text" name="dArriveDate"/>
调用如下: helper.date.getDateControl($("[name='dArriveDate']"));这样就给每个动态构建的指定名称的文本框绑定相应的日期控件事件了
date: require('oa!app/helper/date'),
app中jeDate日期控件的使用相关推荐
- input绑定的jedate日期控件的值改变时触发事件问题
一.input绑定的jedate日期控件的值改变时触发事件问题 一般input中值发生改变,用onchange 就可以触发事件,但我现用jedate日期控,选中日期后,发现onchange无效. 后经 ...
- ASP.NET中 Calendar(日期控件)的使用
ylbtech-ASP.NET-Control-Basic:Calendar(日期控件)的使用 ASP.NET中 Calendar(日期控件)的使用. 1.A,运行效果返回顶部 Calendar(日期 ...
- Bootstrap中datetimepicker日期控件1899年问题解决
@加粗样式TOC Bootstrap中datetimepicker日期控件1899年问题解决 Bootstrap中datetimepicker日期控件1899年问题解决 最近在开发项目的过程中,遇到一 ...
- jeDate日期控件的验证
前面用到了jeDate日期控件的使用,https://www.jianshu.com/p/393d9e992144,在这个控件的基础上,做出一些完善:关于jeDate日期控件的验证的问题: 一般会有三 ...
- jedate日期控件的图标乱码
jedate日期控件的图标乱码变成小方块 解决方法: 因为bootstrap样式影响了font-family,所以在页面重写以下样式:http://www.yayihouse.com/yayishuw ...
- 日期时间选择器-jeDate日期控件
官方文档地址:http://www.jemui.com/uidoc/jedate.html 控件展示如图 各种各样的时间控件都有. 我用在后台的是年月日时分秒的那个,如下图 独立jeDate下载:ht ...
- Android中的日期控件DatePicker和DatePickerDialog
今天早上我写一个程序,需要用到在一个对话框中去显示一个日期匹配器. 当时,我就想,这个还不简单,不就是写一个DatePicker的布局文件,然后再把它部署到AlertDialog中不就好了吗? 当我真 ...
- js中的日期控件My97 DatePicker
使用WdatePicker插件来渲染日期类型的页面. 以下代码用到的属性有: isShowClear是否显示清空按钮 skin皮肤的样式 readOnly是否只读 maxDate:最大的选择时间 &l ...
- WinForm中日期控件开窗
当我们在使用WinForm开发项目或者小工具的时候,很多时候需要做开窗事件,这个时候你会如何处理呢? 当然微软给我们提供了强大的日期控件,我们可以通过下拉选择来选择相应的日期,但是你会发现日期的格式不 ...
最新文章
- 计算机32位操作系统最大识别到内存,win7 32位系统可以支持多大的内存_win7 的32位系统最大支持多少g的内存...
- 数字图像处理3:取样和量化
- Spring-JDBC表情符号不能存入数据库
- PHP用支付宝沙箱账号测试支付功能
- ansible+heartbeatV2构建高可用群集
- 「CEOI2019」魔法树(DP+差分启发式合并)
- linux 权限管理 lvm,Linux LVM 设置和管理
- Javascript--cookie创建与查看
- JavaScript的闭包与应用
- BZOJ 1833 数位DP
- Linux 下MongoDb的安装
- 用python完成《商务与经济统计(第13版)》课后练习——第九章
- 判断一个时间点是否在一个时间段的方法
- 如何使用Access创建一个简单MIS管理系统_Access
- 三分钟教会你用Python爬取心仪小姐姐图片
- linux版本kettle 中文乱码,kettle工具同步数据乱码-Linux下乱码问题二
- 华为云AI随笔(8)
- VC/PE乐见:简化基金注册程序,鼓励险资流向股权投资...
- Java 实现数据库读写分离竟如此简单?
- Linux 域名解析实验