2

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.

Joseph
  • 1,060
  • 3
  • 22
  • 53
  • I sort of understand what you are trying to do but if you could make a JsFiddle with your code example preloaded, that would be helpful. Otherwise, provide more code so we can build a working example. – rockmandew Sep 29 '15 at 15:19

1 Answers1

0

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

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • That works like a charm. But my time picker returns " Mon Jan 01 1900 15:09:00 GMT+0530 (India Standard Time) ". How can I get the time alone if am using "mode":"timebox" . Is there anything like $(element).datebox('getTheTime') ? – Joseph Sep 30 '15 at 09:57
  • @Joseph, it returns a javascript date object. http://www.w3schools.com/jsref/jsref_obj_date.asp you can use the various built in functions to extract the time. You can also look at moment.js which makes working with dates and times easier. – ezanker Sep 30 '15 at 13:35
  • You are right. I got it. But there is an issue. If there were let say 5 input fields and two were filled, when retrieving using "$(element).datebox('getTheDate')" it is getting the last selected date in all input fields. Can you help me out how to get the exact date entered in the input fields ? Will it return empty object if no date was selected ? – Joseph Sep 30 '15 at 15:59
  • @Joseph, the ones that are set by user return Jan 1 1900 with the set time of day. The ones that are not set are returning the current time from the moment the databox was created. So you could ignore time that are not from 1900... – ezanker Sep 30 '15 at 16:17
  • @ ezanker, Thats great. I am wondering how I missed to notice this. Thanks a lot. Similarly in date picker, selected date will return time as 00:00:00. Good learning. Thanks. – Joseph Oct 01 '15 at 04:30