Search code examples
jquery-ui-datepickertextinput

datepicker not inserted into input field


I have 4 inputfields on my webpage. (2 of those 4 just appear after pressing a button edit). So for all those 4 I get the datepicker, but only for 2 of them the value of the input field is changed when clicking a date.

I don't know what's wrong, and I tried already different possibility's, but none worked so far. datum_in & datum_uit worked, but not datum_in_edit or datum_uit_edit (but the datepicker does appear)

Here's my code

<script type="text/javascript">
    $(function() {
                var dates = $( "#datum_in, #datum_uit" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    minDate: 0,
                    changeMonth: true,
                    defaultDate: "+1d",
                    maxDate: '+2Y +6M',
                    numberOfMonths: 1,
                    showOtherMonths: true,
                    selectOtherMonths: true,
                    onSelect: function( selectedDate ) {
                    var option = this.id == "datum_in" ? "minDate" : "maxDate",
                            instance = $( this ).data( "datepicker" ),
                            date = $.datepicker.parseDate(
                                instance.settings.dateFormat ||
                                $.datepicker._defaults.dateFormat,
                                selectedDate, instance.settings );

                        dates.not( this ).datepicker( "option", option, date );
                    }
                });
                $('#datum_in,#datum_uit').datepicker('option', $.extend({showMonthAfterYear: false},$.datepicker.regional['nl']));
                $('#datum_in,#datum_uit').datepicker( "option", "dateFormat", "yymmdd" );

                $( "#datum_in_edit, #datum_uit_edit" ).datepicker({
                    changeMonth: true,
                    changeYear: true,
                    minDate: 0,
                    changeMonth: true,
                    defaultDate: "+1d",
                    maxDate: '+2Y +6M',
                    numberOfMonths: 1,
                    showOtherMonths: true,
                    selectOtherMonths: true,
                });
                $('#datum_in_edit,#datum_uit_edit').datepicker('option', $.extend({showMonthAfterYear: false},$.datepicker.regional['nl']));
                $('#datum_in_edit,#datum_uit_edit').datepicker( "option", "dateFormat", "yymmdd" );
            });
</script>
<form action='/fruits/index.php?item=bad' name='form' method='post' enctype='multipart/form-data'>
    <tr>
        <td class="tleft"><input type='text' name='datum_in' id='datum_in' readonly="readonly"/></td>
        <td class="tleft"><input type='text' name='datum_uit' id='datum_uit' readonly="readonly"/></td>
        <td class="vTop"><input type="submit" value="Bewaar"/></td>
    </tr>
    </form>

    <form action='/fruits/index.php?item=bad' name='form_edit' method='post' enctype='multipart/form-data'>
        <td class="tleft"><input type='text' name='datum_in_edit' id='datum_in_edit'/></td>
        <td class="tleft"><input type='text' name='datum_uit_edit' id='datum_uit_edit' /></td>
        <td class="vTop"><input type="submit" value="Bewaar"/></td>
    </tr>
</form>

Does someone know where I could have made a mistake?

Thanks so much in advance!


Solution

  • I found the answer. some input fields where added (with the same id) but where hidden. So the answer was using $('.classname').