jQuery UI Datepicker doesn't work

Question

My datepicker in one file works fine, but in another file it doesn't work at all. Can somebody point out what the problem is?

Here is the code of working datepicker:

<script type="text/javascript">
$(document).ready(function(){
    $('.date').datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "dd.mm.yy",
        minDate: new Date(1950, 1 - 1, 1),
        maxDate: new Date(),
        yearRange: "1900:2015",
        closeText: "Zamknij",
        dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
        monthNames: [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień" ],
        monthNamesShort: [ "Sty", "Lut", "Mar", "Kwie", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru" ]
    });
});

And I use it here:

        <div class="form-group ">
        <label class="col-sm-2" for="Client_birth_date">
            <?php echo $registerForm->labelEx($registerModel, 'birth_date'); ?>
        </label>
        <div class="col-sm-10">
          <?php echo $registerForm->textField($registerModel, 'birth_date', array('class' => 'input_form input_grup date form-control')); ?>
          <?php echo $registerForm->error($registerModel, 'birth_date'); ?>
        </div>
    </div>

And it works just fine.

But in another file I have same code, but it doesn't work at all.

Scripts:

<script type="text/javascript">
$(document).ready(function(){
    $('#display-files').click(function(){
        $('#files-modal').modal({show:true});
    });
});

<script type="text/javascript">
$(document).ready(function(){
    $('.date').datepicker({
        changeYear: true,
        changeMonth: true,
        dateFormat: "dd.mm.yy",
        minDate: new Date(1950, 1 - 1, 1),
        maxDate: new Date(),
        yearRange: "1900:2015",
        closeText: "Zamknij",
        dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
        monthNames: [ "Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień" ],
        monthNamesShort: [ "Sty", "Lut", "Mar", "Kwie", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru" ]
    });
});

<script type="text/javascript">
$(document).ready(function(){
    $('#display-tags').click(function(){
        $('#tags-modal').modal({show:true});
    });
});

And place where I use it:

<?= $aditionalCostForm->labelEx($aditionalCostModel, 'date'); ?>
<?= $aditionalCostForm->textField($aditionalCostModel, 'date', array(
    'class' => 'form-control btn-rect',
)); ?>

Any solutions? I would be thankful.

Check the console for errors. Are you including jQuery and the datepicker library correctly? — Rory McCrossan
– Rory McCrossan, Commented Feb 13, 2017 at 13:43
"Doesn't work" doesn't tell us much. Any errors in the console? — M. Eriksson
– M. Eriksson, Commented Feb 13, 2017 at 13:44
If you need the datepicker to work for the contents of a modal I'd suggest you ensure the code runs after the modal is shown (depending on the framework this is either via an event or callback parameter). The date field may not be in the page on document ready. — apokryfos
– apokryfos, Commented Feb 13, 2017 at 13:45
In the first example when i click on textfield the window is popping off and i can chose date. In second example when i click the textfield nothing happens. — Speedvees
– Speedvees, Commented Feb 13, 2017 at 13:46

Timur · Accepted Answer · 2017-02-14 16:38:17Z

1

In the first example your "birth_date" text field has class "date":

<?php echo $registerForm->textField($registerModel, 'birth_date', array(
   'class' => 'input_form input_grup date form-control'
)); ?>

In the second example there is no "date" class in the field definition:

<?= $aditionalCostForm->textField($aditionalCostModel, 'date', array(
    'class' => 'form-control btn-rect',
)); ?>

So jquery is unable to find the required dom element.

edited Feb 14, 2017 at 16:38

answered Feb 14, 2017 at 16:23

Timur

536 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Datepicker doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related