Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

[Jquery Ui][Datepickers] 2 Problems - Dont Refresh & They All Mess Each Other

jQuery jquery

  • Please log in to reply
No replies to this topic

#1 XicoXperto

XicoXperto

    CC Lurker

  • New Member
  • Pip
  • 6 posts

Posted 25 April 2012 - 04:47 AM

Hi everybody,
I think the title is a litle confusing, so i'll explain better :P
Ok, this is the deal

-- First Problem --
When i add new element lines (they have datepickers) the icon of the datepicker doesnt show up, I dont know if it needs to refresh or something like that.
You can see it working (i mean, not working) at http://ba.dotslashsource.com both the bottom divs got date pickers when we click on add button the new datepickers doesnt show up.

-- Second Problem --
This one cant be seen on the website, so I'll post some images about it.
The problem is that the datepickers need to be the start and the end, that is already working, the problem is that when i add new elements they will have the same data as the first.
Posted Image
has seen in the image above we have 4 input's with datepickers, the left one's are the start and the right ones are the end.
After pick a date all them get affected, as seen in the image bellow and i cant select the date on the lower datepickers, only on the top ones

Posted Image


lets get to code:

datepicker initialization
$(function() {
var dates = $( ".dateExpireStart , .dateExpireEnd " ).datepicker({
	 showOn: "button",
	 buttonImage: "images/style/inputs/icons/calendar.png",
	 buttonImageOnly: true,
	 dateFormat: 'dd-mm-yy',
	 altFormat: "yy-mm-dd",
	 constrainInput: true,
	 changeMonth: true,
	 changeYear: true,
	 yearRange: '-30Y:+30Y',
	 showAnim: "slideDown",
	 dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "**", "Sab"],
	 monthNamesShort: ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
	 onSelect: function( selectedDate ) {
		  var option = this.id == "dateExpireStart" ? "minDate" : "maxDate",
		  instance = $( this ).data( "datepicker" ),
		  date = $.datepicker.parseDate(
		  instance.settings.dateFormat ||
		  $.datepicker._defaults.dateFormat,
		  selectedDate, instance.settings );
		  dates.not( this ).datepicker( "option", option, date )
	 ;}
});
});
:

html
<span class="job">
	 <input type="text" />
	 <div id="inputWrapper">
			<input type="text" class="dateExpireStart" />
			<img class="ui-datepicker-trigger" src="calendar"/> <!-- this is added by the datepicker inicialization -->
	 </div>
	 <div id="inputWrapper">
			<input type="text" class="dateExpireEnd" />
			<img class="ui-datepicker-trigger" src="calendar"/> <!-- this is added by the datepicker inicialization -->
	 </div>
	 <input type="text" />
</span>
This code above, in the first problem is that the <img> doesnt dhow up on the other elements that are added after.

Thanks everybody
Any help is welcome!
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download