如果是knockout監(jiān)聽對(duì)象那么可封裝

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;
});

頁(yè)面直接? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="text" style="width: 10rem;" data-format="date" data-bind="om-date:dPurDate" />即可

而如果是頁(yè)面加載完了要?jiǎng)討B(tài)構(gòu)建html，那么這樣寫就不生效了，那么就要重新定義一個(gè)方法才行，如下：

? ? ? ? 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);
? ? ? ? },

然后頁(yè)面<input type="text" name="dArriveDate"/>

?

調(diào)用如下：? helper.date.getDateControl($("[name='dArriveDate']"));這樣就給每個(gè)動(dòng)態(tài)構(gòu)建的指定名稱的文本框綁定相應(yīng)的日期控件事件了

? ? ? ? date: require('oa!app/helper/date'),
?

總結(jié)

以上是生活随笔為你收集整理的app中jeDate日期控件的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。