jQuery glDatePicker插件无法在IE上正确呈现

Question

I'm using the glDatePicker plugin . 我正在使用glDatePicker插件。

Page loads, calendar is hidden (along w/ the box on it's right). 页面加载后，日历被隐藏（带有右侧的框）。 switch-view is clicked, calendar is re-rendered and displayed. 单击switch-view ，重新渲染和显示日历。 Chrome, FF, Safari , all is OK. Chrome, FF, Safari都可以。 IE , not so much. IE ，不是很多。 It looks as though when the calendar is rendered, the width is not being applied as it should. 看起来好像在渲染日历时， width并未得到应有的应用。

Chrome 铬

element.style {
  z-index: 1000;
  width: 382px;
  top: 259px;
  left: 766.5px;
  display: block;

IE IE

在此处输入图片说明

If I change the width to 382px on IE , it displays as it should. 如果我在IE 382px宽度更改为382px ，它将按382px显示。

<article id="events" class="clearfix hidden-xs">
    <header class="clearfix header-title">
        <h2 class="row col-sm-8">Upcoming Events</h2>
        <a href="/resource-center/calendar-of-events" class="arrow-link gray-medium col-sm-4">All Events <span class="glyphicon glyphicon-arrow-right"></span></a>
    </header>
    <div class="row">
        <section class="col-md-6 col-sm-6">
            <div id="calendar"></div>
        </section>
        <aside id="event-description" class="col-md-6  col-sm-6 gray-light">
            <img src="/content/images/events-backsplash.jpg" class="img-responsive" />
            <div id="event-data">
                ....HTML here - not relevant
            </div>
        </aside>
    </div>
</article>

$('#switch-view').click(function (e) {
    var $this = $(this);
    if ($this.hasClass('list-view')) {
        $('#event-description').hide();

        var $cal = $('#calendar').glDatePicker(true);
        $.extend($cal.options, {
            showAlways: false
        });

        $cal.render();
        $cal.hide();

        $('#calendar-list').fadeIn();
        $this.removeClass('list-view').find('span').text('Calendar View');
    }
    else {
        $this.addClass('list-view').find('span').text('List View');
        $('#calendar-list').hide();
        $('#event-description').fadeIn(function () {
            var $cal = $('#calendar').glDatePicker(true);
            $.extend($cal.options, {
                showAlways: true
            });

            $cal.render();
            $cal.show();
        });
    }

    e.preventDefault();
});

I found that I had to extend the options and change the showAlways property to correctly hide/show on IE . 我发现我必须extend选项并更改showAlways属性才能在IE上正确隐藏/显示。 If I remove those, then the calendar never hides when calling the $cal.hide() function. 如果删除这些内容，则调用$cal.hide()函数时日历永远不会隐藏。

You would think that I could just hide the #calendar , or it's container, but the way this plugin operates is it created a whole new <div> right before the ending <body> tag and does its "position magic". 您可能以为我可以hide #calendar或它的容器，但是此插件的运行方式是在结尾的<body>标记之前创建了一个全新的<div>并进行了“定位魔术”。

在此处输入图片说明

Answer 1

Probably not THE answer to the question on as to WHY it was doing it, but somehow IE 11 only was not gathering the outerWidth() and offSet() methods properly on page load . 可能不是为什么这样做的问题的答案，但是IE 11仅以某种方式没有在page load正确地收集outerWidth()和offSet()方法。

What I ended up doing is determining if the browser was in fact IE 11 and then setting a timeout of 1000ms before the initial setup for the calendar. 我最后要做的是确定浏览器是否实际上是IE 11 ，然后在日历的初始设置之前将timeout设置为1000ms 。

If anyone has a better answer I'd love to hear it. 如果有人有更好的答案，我很想听听。

Apprec! Apprec！

jQuery glDatePicker插件无法在IE上正确呈现

问题描述

1 个解决方案

解决方案1
0 2015-03-24 17:40:38

jQuery glDatePicker插件无法在IE上正确呈现

问题描述

1 个解决方案

解决方案1 0 2015-03-24 17:40:38

解决方案1
0 2015-03-24 17:40:38