Two Calendars but only one works (and incorrectly)

Suite and Optimus Suite 5
#1

Hello Folks,

I am having a very strange problem with the calendar. Please bear with me because it is kind of hard to describe.

I have some code that builds a page dynamically by appending to the DOM. When I append one text input element and a calendar all works well. However if I append one input elements and a calendar and then append another input element and a calendar the second calendar does nothing and the first calendar is displayed under the second input element when the first calendar’s icon is clicked. Both input elements have unique id’s and the calendars are are created as follows:

[code]var calendar = new dhtmlXCalendarObject({
input: “docprop1”, button: “calendar-icon”
});

var calendar = new dhtmlXCalendarObject({
input: “docprop2”, button: “calendar-icon”
});
[/code]

I am not able to instantiate both calendar’s at the same time as they are on separate rows and the code is given the rows one at a time.

Here is the html that is generated by the DOM:

<div>
  <input id="docprop1" name="docprop1" type="text" size="20" class="smartform-calendar-input" placeholder="mm-dd-yy">
  <span><img id="calendar-icon" class="smartform-calendar-icon" src="arc?fl=32/vcalendar.png" alt="calendar icon"></span>
</div>

<div>
  <input id="docprop2" name="docprop2" type="text" size="20" class="smartform-calendar-input" placeholder="mm-dd-yy">
  <span><img id="calendar-icon" class="smartform-calendar-icon" src="arc?fl=32/vcalendar.png" alt="calendar icon"></span>
</div>

Any help in trying to figure this out would be greatly appreciated.

Thanks,

Daryl

#2

Hello
You need the next:

  1. you must have 2 different calendar objects (i.e. “calendar1” and “calendar2”)
  2. you must have different image IDs (there shouldn’t be identical IDs on the page)
    If you need double calendar - you can see this demo:
    dhtmlx.com/docs/products/dhtmlxC … endar.html
#3

Hi Darya,

Thanks for your help, your suggestions were right on spot and the problem went away once I changed to use an array to hold the calendar objects and made sure the image ids were unique.

Regards,

Daryl

#4

You are welcome! :slight_smile: