【问题标题】：Jquery Steps stops datepicker working?Jquery Steps 停止日期选择器工作？
【发布时间】：2017-06-27 20:36:09
【问题描述】：

我正在为向导使用 jquery 步骤。但是如果我使用 datepicker 或 qtip 功能不起作用。我切换了 .js 引用仍然是同样的问题。

为什么 datepicker 事件在步骤中不起作用？控制台没有抛出任何错误。

   @Html.TextBoxFor(model => model.BirthDate, null, new {@class = "SPE-Formcontrol section_detail-font-14 calendar", @style = "display: inline", @readonly = "readonly", Name = "BirthDate", id = "BirthDate"})

 <script src="~/Scripts/join.js"></script>
    <script src="~/Scripts/jquery.steps.js"></script>

加入.js

 $("#BirthDate").datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: '-110:-17',
    showOn: "button",
    buttonImage:"image",
    buttonImageOnly: true,
    beforeShow: function () {
        $('#ui-datepicker-div').css('z-index', 9999);
    },
    dateFormat: 'mm/dd/yy',
    maxDate: '-17Y'
});

$('.tip').qtip({
    style: {
        classes: 'myTipClass tipShadow qtip-rounded'
    }
});

【问题讨论】：

你是否包含了这些插件的必要库
是的，我做到了。显示步骤和显示日历图标。但是点击数据选择器不起作用。
日期选择器确实需要 jQuery UI
如果我评论 ~/Scripts/jquery.steps.js 日期选择器工作正常。所以UI没有问题
@James123 有什么解决办法吗？

标签： javascript jquery datepicker jquery-steps

【解决方案1】：

需要先初始化jquery步骤，再初始化其他插件

$(function () {
//intilize steps first
 $("#wizard").steps({
    bodyTag: "fieldset",
    headerTag: "h4"
  });
//intilize other plugins later
 $("#BirthDate").datepicker();
});

希望这能解决您的问题

【讨论】：

你节省了我的时间。没有意识到这一点。我花了两个多小时试图解决这个问题。谢谢你...
你好，同样的问题；这个简单的解决方案对我不起作用

【解决方案2】：

同样的问题它在向导之外工作正常，但是一旦在里面设置输入，日期选择器的父 div 确实出现在 DOM 中，但它是空的...... 不会出现日期选择器

试图声明

$(".datepicker").datepicker();

steps() 函数之前或之后，没有任何变化。

我尝试使用steps()函数的onInit()功能，还是不行

form.steps({
...
onInit : function (event, currentIndex) { $(".datepicker").datepicker(); },
...
});

【讨论】：

【解决方案3】：

问题是 datepicker 将触发器放在元素上，并且类“hasDatepicker”表示该元素已被初始化。 Jquery 步骤移动元素，触发器丢失。但是 datepicker 元素在移动后仍然具有类，因此如果再次调用 datepicker 将不会再次触发。因此，如果您想重新初始化 datepicker，您应该在 jquery 步骤定义中添加它：

onInit: function (event, currentIndex, newIndex) {
    // Remove hasDatepicker class from initialized elements and remove the button next to datepicker input
    $('.hasDatepicker').removeClass('hasDatepicker').siblings('.ui-datepicker-trigger').remove();

     // reinitialize datepicker, offcourse replace .datepickerfields with your specific datepicker identifier
     $('.datepickerfields').datepicker();
},

【讨论】：