dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件

转载自:http://blog.csdn.net/sp308036654/article/details/50638348

<input type="text" class="time hotelDepartrue" datefmt="yyyy-MM-dd" onchange="checkDate(‘endDate‘)"/>
1:找到dwz.datepicker.js文件

2:在下面的文件中,把红色的部分添加进去

/**

* reference dwz.util.date.js

* @author [email protected]

*

*/

(function($){

$.setRegional("datepicker", {

dayNames:[‘Sun‘, ‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘],

monthNames:[‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]

});

$.fn.datepicker = function(opts){

var setting = {

box$:"#calendar",

year$:"#calendar [name=year]", month$:"#calendar [name=month]",

tmInputs$:"#calendar .time :text", hour$:"#calendar .time .hh", minute$:"#calendar .time .mm", second$:"#calendar .time .ss",

tmBox$:"#calendar .tm", tmUp$:"#calendar .time .up", tmDown$:"#calendar .time .down",

close$:"#calendar .close", calIcon$:"a.inputDateButton",

main$:"#calendar .main", days$:"#calendar .days", dayNames$:"#calendar .dayNames",

clearBut$:"#calendar .clearBut", okBut$:"#calendar .okBut"

};

function changeTmMenu(sltClass){

var $tm = $(setting.tmBox$);

$tm.removeClass("hh").removeClass("mm").removeClass("ss");

if (sltClass) {

$tm.addClass(sltClass);

$(setting.tmInputs$).removeClass("slt").filter("." + sltClass).addClass("slt");

}

}

function clickTmMenu($input, type){

$(setting.tmBox$).find("."+type+" li").each(function(){

var $li = $(this);

$li.click(function(){

$input.val($li.text());

});

});

}

function keydownInt(e){

if (!((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode == DWZ.keyCode.DELETE || e.keyCode == DWZ.keyCode.BACKSPACE))) { return false; }

}

function changeTm($input, type){

var ivalue = parseInt($input.val()), istart = parseInt($input.attr("start")) || 0, iend = parseInt($input.attr("end"));

var istep = parseInt($input.attr(‘step‘) || 1);

if (type == 1) {

if (ivalue <= iend-istep){$input.val(ivalue + istep);}

} else if (type == -1){

if (ivalue >= istart+istep){$input.val(ivalue - istep);}

} else if (ivalue > iend) {

$input.val(iend);

} else if (ivalue < istart) {

$input.val(istart);

}

}

return this.each(function(){

var $this = $(this);

var dp = new Datepicker($this.val(), opts);

function generateCalendar(dp){

var dw = dp.getDateWrap();

var minDate = dp.getMinDate();

var maxDate = dp.getMaxDate();

var monthStart = new Date(dw.year,dw.month-1,1);

var startDay = monthStart.getDay();

var dayStr="";

if (startDay > 0){

monthStart.setMonth(monthStart.getMonth() - 1);

var prevDateWrap = dp.getDateWrap(monthStart);

for(var t=prevDateWrap.days-startDay+1;t<=prevDateWrap.days;t++) {

var _date = new Date(dw.year,dw.month-2,t);

var _ctrClass = (_date >= minDate && _date <= maxDate) ? ‘‘ : ‘disabled‘;

dayStr+=‘<dd class="other ‘+_ctrClass+‘" chMonth="-1" day="‘ + t + ‘">‘+t+‘</dd>‘;

}

}

for(var t=1;t<=dw.days;t++){

var _date = new Date(dw.year,dw.month-1,t);

var _ctrClass = (_date >= minDate && _date <= maxDate) ? ‘‘ : ‘disabled‘;

if(t==dw.day){

dayStr+=‘<dd class="slt ‘+_ctrClass+‘" day="‘ + t + ‘">‘+t+‘</dd>‘;

}else{

dayStr+=‘<dd class="‘+_ctrClass+‘" day="‘ + t + ‘">‘+t+‘</dd>‘;

}

}

for(var t=1;t<=42-startDay-dw.days;t++){

var _date = new Date(dw.year,dw.month,t);

var _ctrClass = (_date >= minDate && _date <= maxDate) ? ‘‘ : ‘disabled‘;

dayStr+=‘<dd class="other ‘+_ctrClass+‘" chMonth="1" day="‘ + t + ‘">‘+t+‘</dd>‘;

}

var $days = $(setting.days$).html(dayStr).find("dd");

$days.not(‘.disabled‘).click(function(){

var $day = $(this);

if (!dp.hasTime()) {

$this.val(dp.formatDate(dp.changeDay($day.attr("day"), $day.attr("chMonth"))));

// 添加监听日期改变(PineTree添加)

$this.change();

closeCalendar();

} else {

$days.removeClass("slt");

$day.addClass("slt");

}

});

if (!dp.hasDate()) $(setting.main$).addClass(‘nodate‘); // 仅时间,无日期

if (dp.hasTime()) {

$("#calendar .time").show();

var $hour = $(setting.hour$).val(dw.hour).focus(function(){

changeTmMenu("hh");

});

var iMinute = parseInt(dw.minute / dp.opts.mmStep) * dp.opts.mmStep;

var $minute = $(setting.minute$).val(iMinute).attr(‘step‘,dp.opts.mmStep).focus(function(){

changeTmMenu("mm");

});

var $second = $(setting.second$).val(dp.hasSecond() ? dw.second : 0).attr(‘step‘,dp.opts.ssStep).focus(function(){

changeTmMenu("ss");

});

$hour.add($minute).add($second).click(function(){return false});

clickTmMenu($hour,"hh");

clickTmMenu($minute,"mm");

clickTmMenu($second,"ss");

$(setting.box$).click(function(){

changeTmMenu();

});

var $inputs = $(setting.tmInputs$);

$inputs.keydown(keydownInt).each(function(){

var $input = $(this);

$input.keyup(function(){

changeTm($input, 0);

});

});

$(setting.tmUp$).click(function(){

$inputs.filter(".slt").each(function(){

changeTm($(this), 1);

});

});

$(setting.tmDown$).click(function(){

$inputs.filter(".slt").each(function(){

changeTm($(this), -1);

});

});

if (!dp.hasHour()) $hour.attr("disabled",true);

if (!dp.hasMinute()) $minute.attr("disabled",true);

if (!dp.hasSecond()) $second.attr("disabled",true);

}

}

function closeCalendar() {

$(setting.box$).remove();

$(document).unbind("click", closeCalendar);

}

$this.click(function(event){

closeCalendar();

var dp = new Datepicker($this.val(), opts);

var offset = $this.offset();

var iTop = offset.top+this.offsetHeight;

$(DWZ.frag[‘calendarFrag‘]).appendTo("body").css({

left:offset.left+‘px‘,

top:iTop+‘px‘

}).show().click(function(event){

event.stopPropagation();

});

($.fn.bgiframe && $(setting.box$).bgiframe());

var dayNames = "";

$.each($.regional.datepicker.dayNames, function(i,v){

dayNames += "<dt>" + v + "</dt>"

});

$(setting.dayNames$).html(dayNames);

var dw = dp.getDateWrap();

var $year = $(setting.year$);

var yearstart = dp.getMinDate().getFullYear();

var yearend = dp.getMaxDate().getFullYear();

for(y=yearstart; y<=yearend; y++){

$year.append(‘<option value="‘+ y +‘"‘+ (dw.year==y ? ‘selected="selected"‘ : ‘‘) +‘>‘+ y +‘</option>‘);

}

var $month = $(setting.month$);

$.each($.regional.datepicker.monthNames, function(i,v){

var m = i+1;

$month.append(‘<option value="‘+ m +‘"‘+ (dw.month==m ? ‘selected="selected"‘ : ‘‘) +‘>‘+ v +‘</option>‘);

});

// generate calendar

generateCalendar(dp);

$year.add($month).change(function(){

dp.changeDate($year.val(), $month.val());

generateCalendar(dp);

});

// fix top

var iBoxH = $(setting.box$).outerHeight(true);

if (iTop > iBoxH && iTop > $(window).height()-iBoxH) {

$(setting.box$).css("top", offset.top - iBoxH);

}

$(setting.close$).click(function(){

closeCalendar();

});

$(setting.clearBut$).click(function(){

$this.val("");

closeCalendar();

// 添加日期改变监听(PineTree添加)

$this.change();

});

$(setting.okBut$).click(function(){

var $dd = $(setting.days$).find("dd.slt");

if ($dd.hasClass("disabled")) return false;

var date = dp.changeDay($dd.attr("day"), $dd.attr("chMonth"));

if (dp.hasTime()) {

date.setHours(parseInt($(setting.hour$).val()));

date.setMinutes(parseInt($(setting.minute$).val()));

date.setSeconds(parseInt($(setting.second$).val()));

}

$this.val(dp.formatDate(date));

closeCalendar();

// 添加日期改变监听(PineTree添加)

$this.change();

});

$(document).bind("click", closeCalendar);

return false;

});

$this.parent().find(setting.calIcon$).click(function(){

$this.trigger("click");

return false;

});

});

}

var Datepicker = function(sDate, opts) {

this.opts = $.extend({

pattern:‘yyyy-MM-dd‘,

minDate:"1900-01-01",

maxDate:"2099-12-31",

mmStep:1,

ssStep:1

}, opts);

//动态minDate、maxDate

var now = new Date();

this.opts.minDate = now.formatDateTm(this.opts.minDate);

this.opts.maxDate = now.formatDateTm(this.opts.maxDate);

this.sDate = sDate.trim();

}

$.extend(Datepicker.prototype, {

get: function(name) {

return this.opts[name];

},

_getDays: function (y,m){//获取某年某月的天数

return m==2?(y%4||!(y%100)&&y%400?28:29):(/4|6|9|11/.test(m)?30:31);

},

_minMaxDate: function(sDate){

var _count = sDate.split(‘-‘).length -1;

var _format = ‘y-M-d‘;

if (_count == 1) _format = ‘y-M‘;

else if (_count == 0) _format = ‘y‘;

return sDate.parseDate(_format);

},

getMinDate: function(){

return this._minMaxDate(this.opts.minDate);

},

getMaxDate: function(){

var _sDate = this.opts.maxDate;

var _count = _sDate.split(‘-‘).length -1;

var _date = this._minMaxDate(_sDate);

if (_count < 2) { //format:y-M、y

var _day = this._getDays(_date.getFullYear(), _date.getMonth()+1);

_date.setDate(_day);

if (_count == 0) {//format:y

_date.setMonth(11);

}

}

return _date;

},

getDateWrap: function(date){ //得到年,月,日

if (!date) date = this.parseDate(this.sDate) || new Date();

var y = date.getFullYear();

var m = date.getMonth()+1;

var days = this._getDays(y,m);

return {

year:y, month:m, day:date.getDate(),

hour:date.getHours(),minute:date.getMinutes(),second:date.getSeconds(),

days: days, date:date

}

},

/**

* @param {year:2010, month:05, day:24}

*/

changeDate: function(y, m, d){

var date = new Date(y, m - 1, d || 1);

this.sDate = this.formatDate(date);

return date;

},

changeDay: function(day, chMonth){

if (!chMonth) chMonth = 0;

var dw = this.getDateWrap();

return this.changeDate(dw.year, dw.month+parseInt(chMonth), day);

},

parseDate: function(sDate){

if (!sDate) return null;

return sDate.parseDate(this.opts.pattern);

},

formatDate: function(date){

return date.formatDate(this.opts.pattern);

},

hasHour: function() {

return this.opts.pattern.indexOf("H") != -1;

},

hasMinute: function() {

return this.opts.pattern.indexOf("m") != -1;

},

hasSecond: function() {

return this.opts.pattern.indexOf("s") != -1;

},

hasTime: function() {

return this.hasHour() || this.hasMinute() || this.hasSecond();

},

hasDate: function() {

var _dateKeys = [‘y‘,‘M‘,‘d‘,‘E‘];

for (var i=0; i<_dateKeys.length; i++){

if (this.opts.pattern.indexOf(_dateKeys[i]) != -1) return true;

}

return false;

}

});

})(jQuery);

原文地址:https://www.cnblogs.com/rainydayfmb/p/8283509.html

时间: 2024-10-13 08:06:54

dwz监听日期变化,dwz日期控件onchange不起作用,dwz框架时间控件不支持onchange事件的相关文章

Angular.JS中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

$scope.$watch()——监听数据变化

$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 --watchAction:是一个函数或者表达式,当watchFn 发生变化时会被调用.如果是函数的形式,它将会接收到watchFn 的新旧两个值,以及作用域对象的引用.其函数签名为function(newValue, oldValue, scope) --deepWatch:是否深度监听,可选.

vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show"> 自定义键盘信息: Vue.directi

赵雅智_ProviderContent监听数据变化

当程序A在执行insert.update.delete时,通过getContext().getContentResolver().notifyChange(uri, observer)方法来告诉所有注册在该Uri的监听者数据发生改变 参数1uri:注册的uri 参数2observer:注册的监听者 /** * 插入操作 */ @Override public Uri insert(Uri uri, ContentValues values) { if (uriMatcher.match(uri)

如何使用NodeJs来监听文件变化

1.前言 在我们调试修改代码的时候,每修改一次代码,哪怕只是很小的修改,我们都需要手动重新build文件,然后再运行代码,看修改的效果,这样的效率特别低,对于开发者来说简直不能忍. 2.构建自动编译工具 如何使用nodeJs来监听文件变化,一旦源文件修改保存时,自动运行build过程.比如当你写CoffeeScript文件或SASS文件时,保存之后可即时生成对应的JS或CSS. 基于Node.JS的侦听文件夹改变的模块有很多. a .  fs.watch.Node.JS的文件系统也可侦听某个目录

android动态注册监听网络变化异常

在使用广播接收器监听网络变化的时候,在AndroidManifest.xml中加入<user-permission android:name="android.permission.ACCESS_NETWOEK_STATE"/>还是无法启动应用程序,显示如下异常 07-06 00:03:22.568 22393-22393/? E/AndroidRuntime﹕ FATAL EXCEPTION: main Process: com.lvkui.helloworld3, PI

[email&#160;protected]$scope.watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

Android使用ContentObserver监听数据库变化(转自:http://www.blogjava.net/zhaojianhua/archive/2011/10/27/362204.html)

android 使用contentobserver监听数据库内容变化 android 使用contentobserver监听数据库内容变化 在 android中经常会用到改变数据库内容后再去使用数据库更新的内容,很多人会重新去query一遍,但是这样的问题就是程序会特别占内存,而且有可能 会搂关cursor而导致程序内存未释放等等.其实android内部提供了一种ContentObserver的东西来监听数据库内容的变化.ContentObserver 的构造函数需要一个参数Hanlder,因为

vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 2.实例用法 2.1-1浅度监听:当点击页面,弹出发生变化了,a的值变为1,b的值变为101 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co