How to use jquery date picker with aui input tag in liferay 6.1

[Kiran Kumar Boyini, modifié il y a 11 années.]

Hi All,

I want to use jquery date picker with aui input tag .

I tried using this link

in view.jsp

<aui:form action="<%=testURL.toString() %>" name="testForm">
     <aui:input name="date" id="date" value="" label="Date :"></aui:input>
</aui:form>
  <script type="text/javascript">
jQuery(function(){
		jQuery("#date").datepicker({dateFormat:'dd-mm-yy'});
	 	}		
		);

</script>

In liferay-portlet.xml :

<header-portlet-javascript>http://code.jquery.com/jquery-1.4.2.min.js</header-portlet-javascript>

Help me.

Thanks,

Kiran.

[Prakash Khanchandani, modifié il y a 11 années.]

It is just the same as you would use a normal html <input /> tag. But there might be just one difference it might not be working for you.

Here is how we use it in case of a normal html <input /> tag:

<input type="text" name="myDate" id="myDate">

<script type="text/javascript">
    jQuery(document).ready(function () {
	jQuery("#myDate" ).datepicker({ dateFormat: 'd-M-yy', changeMonth: true, changeYear: true });
    });
</script>

Here is how we do it with <aui:input />:

<aui:input name="myDate" />

<script type="text/javascript">
    jQuery(document).ready(function () {
	jQuery("#<portlet:namespace />myDate" ).datepicker({ dateFormat: 'd-M-yy', changeMonth: true, changeYear: true });
    });
</script>

Notice the #<portlet:namespace />myDate, in the second jQuery script.

Also I would suggest accessing the jQuery library through the theme, doing it through the <header-portlet-javascript> may include different versions of jQuery on the same page if care is not taken.

Hope this helps.