Jquery Steps stops datepicker working?

我使用jQuery步骤向导。但是在内部,如果我使用datepicker或qtip功能无效。我切换了.js引用仍然是相同的问题。

为什么要在内部工作的门诊事件?控制台未抛出任何错误。

   @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>

join.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'
    }
});
DID您包含那些插件的Neccessary库Adeneo
yes I did. Steps showing and calendar icon showing. But click on datapicker not working.James123
DatePicker确实需要jQuery UIAdeneo
如果我评论〜/ scripts / jQuery.steps.js datepicker工作正常。所以UI没有问题James123
@James123有任何解决方案?Melvin

回答 3

  1. 赞同 3

    您需要首先初始化jQuery步骤,然后是其他插件初始化

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

    当然,这会解决您的问题

    Hussam Kurd
    You save my time. didnt realize this. i spent more than 2hours trying to fix this issue. thanks you...Chamsoudine Bacar
    Hello,同样的问题在这里;这个简单的解决方案对我不起作用xavdeb
  2. 赞同 1

    姓名问题在这里,它在向导外工作正常,但一旦输入内部,DatePicker的父Div确实会出现在DOM中,但它是空的...没有将出现DatePicker

    TRIED宣布

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

    BEFORE or AFTER the steps() function, nothing change.

    I tried to use the onInit() feature of the steps() function, it still doesn't work

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

    xavdeb
  3. 赞同 0

    问题是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();
    },
    

    NOPPY