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