Jquery Steps stops datepicker working?

Question

I am using jquery steps for wizard. But inside if I use datepicker or qtip functionality not working. I switched .js references still the issue the same.

Why datepicker event not working inside steps? console not throwing any error.

   @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'
    }
});

yes I did. Steps showing and calendar icon showing. But click on datapicker not working. — James123, Jun 27 '17 at 20:52
if I comment ~/Scripts/jquery.steps.js datepicker works fine. so there is no issue with UI — James123, Jun 28 '17 at 19:59

score 4 · Answer 1 · answered Sep 30 '19 at 07:07

4

You need to initialize jquery steps first and then other plugin initialization

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

Hopefully, this resolves your issue

answered Sep 30 '19 at 07:07

Hussam Kurd

8,066
2
43
38

1

You save my time. didnt realize this. i spent more than 2hours trying to fix this issue. thanks you... – chamssoudine bacar May 30 '20 at 10:57
Hello, same problem here; this simple solution doesn't work for me – XavDeb Apr 05 '21 at 14:46
lastly you saved my time after near of hour stumbling upon web. Thank you – Ahmed Mar 30 '22 at 13:26

score 2 · Answer 2 · answered Sep 15 '21 at 08:18

Problem is that datepicker puts triggers on elements and the class 'hasDatepicker' saying that this element has been initialized. Jquery steps moves elements around, triggers are lost. But the datepicker elements still have the class after moving, thus won't be triggered again if you call datepicker once more. So if you want to reinitialize datepicker you should add this in jquery steps definition:

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

score 1 · Answer 3 · answered Apr 05 '21 at 17:36

Same problem here It works fine OUTSIDE the wizard, but once the input is set inside, the parent div of the datepicker does appear in the DOM, but it's empty... No datepicker will appear

tried to declare the

$(".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(); },
...
});

Jquery Steps stops datepicker working?

join.js

3 Answers3