How to get dates from Jquery Mobile Datebox input fields looping a div

Question

I need to loop through a div and get the dates from all input fields inside the div. Input fields are Jquery Mobile DateBox input fields.

I am cloning a div containing Jquery Mobile DateBox input field and appending to another main div. The same may happen multiple times based on the need. After setting dates in the fields, I am searching for way to get the set date in the Jquery Mobile DateBox input field.

My input field is,

I cloned and enhanced in the following way,

var dayTimePicker = $("#time-picker-template").clone()

$("#time-picker-block").append(dayTimePicker).enhanceWithin();

I didn't gave ID to the input field since I will be cloning and reusing the same multiple times.

I want to get the time/date which is set in the field. I tried looping the div but failed to do. My trials are,

var dayDiv = $("#time-picker-block");

    $(dayDiv).find('input:text').each(function() {

    alert($(this).val());

});

$('#time-picker-block').children('input').each(function () {

    alert(this.value); // "this" is the current element in the loop

});

$('#time-picker-block').each(function (index, element) {

    $(element).datebox('getTheDate');

});

Can anyone help me out to resolve this issue for me.

Answer 1

In your template, assign a common class to all the DateBox inputs (e.g. time-input). Then, when you want to get all the dates, you can use the each() method on all inputs that have that glass and use the DateBox method getTheDate:

$('#time-picker-block .time-input').each(function (index, element) {
    alert($(element).datebox('getTheDate'));
});

DEMO