Dynamically creating jQuery Datepicker using altFields

I dynamically generate a datupik by simply adding an HTML field to the div:

<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" tabindex="6" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="">

Due to the way we store dates, we have a separate altfield for the datepicker that stores our database formatting date selected by the user.

To handle the selection of multiple date sets, I assign a class and use livequery to detect onClicks after the page loads:

$(".publication_date").livequery(function() {
                $(this).datepicker({
                    dateFormat: "dd M yy",
                    changeYear: true,
                    changeMonth: true,
                    onSelect: function(dateText, inst) {
                        console.log(inst);
                    }
                });
            });

I have a problem in how the date picker knows which altfield to fill in? On one datepicker would usually include:

altField: '#start_date_datepicker_altfield', 
altFormat: 'yy-mm-dd',

for the population.

+3
source share
2 answers

, , , jQuery, $(this).next(), , :

$(".publication_date").livequery(function() {
   $(this).datepicker({
      altField: $(this).next(), 
      altFormat: 'yy-mm-dd',
      dateFormat: "dd M yy",
      changeYear: true,
      changeMonth: true,
      onSelect: function(dateText, inst) {
        console.log(inst);
      }
   });
});

$(input), jQuery DOM, :)

+5

livequery, id this.id. HTML, "publish_date_2", altfield "publication_date_db_2" ( , ).

, :

$(".publication_date").livequery(function() {
    $(this).datepicker({
        dateFormat: "dd M yy",
        changeYear: true,
        changeMonth: true,
        onSelect: function(dateText, inst) {
            console.log(inst);
        },
        altField: "#" + this.id.replace("_date_", "_date_db_"),
        altFormat: 'yy-mm-dd'
    });
});
0
source

Source: https://habr.com/ru/post/1763581/


All Articles