论坛首页 Web前端技术论坛

Jquey UI dialog中使用日期插件datepicker

浏览 4359 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-08   最后修改:2010-01-08
之前在dialog总是避免使用datepicker,因为dialog的zindex总是盖住其他的容器

目前gogole了下,体会了一些解决方法,记录一下,大家共享:

参考链接:
http://stackoverflow.com/questions/715677/trouble-with-jquery-dialog-and-datepicker-plugins

解决方法一:通过css定义与jquery设定dialog的default属性:
CSS定义,放入自己的css中,当然要在jqueryui的css之后引入。
/* dialog and datepicker fix*/
#ui-datepicker-div{z-index:1001;}


js定义:
//set the dialog's default configuration
$.extend($.ui.dialog.defaults,{
    zIndex: 950,
    /*other configurations*/
});


解决方法二:通过jquery设定datepicker的default属性:
$.datepicker.setDefaults({
     beforeShow: function (i, e) {
	  var z = jQuery(i).closest(".ui-dialog").css("z-index") + 1;
	  e.dpDiv.css('z-index', z);
      },
      /*other configurations*/
});


两种方法都可以直接在页面中使用,还算较为方便
$('#eleid').datepicker({});

并且dialog盖住datepicker的问题也可解决
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics