<img alt="Liferay" height="36" src="http://cdn.www.liferay.com/osb-www-theme/images/custom/heading.png" width="146" />

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Hi All....

could you please provide code to get selected date in input text box using aui-calender

Thanks in Advance..

Regards
Srikanth Davuluri.

RE: how to get aui-calender selected date value?

2 gennaio 2012 21.25

Risposta

Juhi Kumari

Punteggio: Expert

Messaggi: 346

Data di Iscrizione: 12 dicembre 2011

Hi

Use this code to get selected date in input text box using aui-calender.

1
2<aui:script>
3 var startCal;
4 var endCal;
5 AUI().ready('aui-calendar', function(A) {
6       startCal = new A.Calendar({
7          trigger : '#<portlet:namespace />startDate',
8          dateFormat : '%d/%m/%Y',
9
10          selectMultipleDates : false,
11          on : {
12             select : function(event) {
13                   endCal.set('minDate', startCal.getCurrentDate());
14                   endCal.syncUI();
15             }
16          }
17       }).render();
18
19       A.on('mousedown', function() {
20          A.CalendarManager.hideAll();
21       }, document);
22
23 });
24</aui:script>

startDate is the id of that text box where you want the selected date.

Regards
Juhi

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

2 gennaio 2012 21.40

Risposta

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Hi Juhi Kumari,

i tried with above code but it is displaying only text box could you please explain clearly with sample jsp page.

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

2 gennaio 2012 22.10

Risposta

Juhi Kumari

Punteggio: Expert

Messaggi: 346

Data di Iscrizione: 12 dicembre 2011

Hi srikanth
Use this aui taglib in your jsp and make a text box with name 'startDate'. When you click in that text box that time this calendar should trigger.

1<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

Remove these lines
var endCal;
endCal.set('minDate', startCal.getCurrentDate());
endCal.syncUI();
Please let me know if you have any problem.

Regards
Juhi

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

2 gennaio 2012 22.24

Risposta

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Hi

still facing same problem calender picker is displaying in header and text filed displaying in body.

please provide complete jsp page so that i will implement.

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

2 gennaio 2012 23.40

Risposta

Bavithra Rajendran

LIFERAY STAFF

Punteggio: Regular Member

Messaggi: 123

Data di Iscrizione: 7 ottobre 2009

Hi,

You can try this

1<input type="text" size="50" id="myDatepicker" />
2
3<script type="text/javascript" charset="utf-8">
4AUI().use('aui-datepicker', function(A) {
5 var simpleDatepicker1 = new A.DatePicker({
6       trigger: '#myDatepicker',
7       dateFormat: '%d/%m/%y %A',
8       setValue: true,
9       minDate: '01/01/2000',
10       maxDate: '09/05/2020',
11       selectMultipleDates: false
12 })
13 .render();
14});
15</script>

Thanks,
Bavithra Rajendran

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

2 gennaio 2012 23.13

Risposta

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Hi Bavithra Rajendran

thanks for your response it is working fine but i am unable to set minDate and maxDate in calender could you please provide solution.

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

3 gennaio 2012 1.02

Risposta

Bavithra Rajendran

LIFERAY STAFF

Punteggio: Regular Member

Messaggi: 123

Data di Iscrizione: 7 ottobre 2009

Add the attributes inside calendar: {}. It will work. The code should be like this

1
2<input type="text" size="50" id="myDatepicker" />
3
4<script type="text/javascript" charset="utf-8">
5AUI().use('aui-datepicker', function(A) {
6 var simpleDatepicker1 = new A.DatePicker({
7       trigger: '#myDatepicker',
8       calendar: {
9       dateFormat: '%d/%m/%y %A',
10       setValue: true,
11       minDate: '01/01/2011',
12       maxDate: '09/05/2012',
13       selectMultipleDates: false
14       }
15 })
16 .render();
17});
18</script>

Thanks,
Bavithra Rajendran

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

3 gennaio 2012 3.09

Risposta

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Thanks for your response

it is working fine...

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

26 marzo 2012 22.30

Risposta

RathnaDevi Chellaiah

Punteggio: Junior Member

Messaggi: 29

Data di Iscrizione: 26 marzo 2012

Hi Bavithra Rajendran,
The code which u posted was very useful for me .. emoticon

i was breaking my head for whole day to use calendar with a simple code.. thanks a lot emoticon

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

18 aprile 2012 7.52

Risposta

ruchi sharma

Punteggio: Junior Member

Messaggi: 95

Data di Iscrizione: 24 marzo 2011

Hello friends,
I also want to do the same stuff...
I have tried to use the same code given by Bavithra, but i am just getting the text field and when i click on it nothing happen.
Why i am not getting the calender??
Is their any wrong syntax??
Below is my jsp :
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<div>
<input type="text" size="50" id="myDatepicker" />
</div>
<script type="text/javascript" charset="utf-8">
AUI().use('aui-datepicker', function(A) {
var simpleDatepicker1 = new A.DatePicker({
trigger: '#myDatepicker',
calendar: {
dateFormat: '%d/%m/%y %A',
setValue: true,
minDate: '01/01/2011',
maxDate: '09/05/2012',
selectMultipleDates: false
}
}).render();
});
</script>

Any help would be appreciated.
Thanks
Ruchi

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

18 aprile 2012 21.15

Risposta

Punteggio: Junior Member

Messaggi: 25

Data di Iscrizione: 7 giugno 2011

Hi Ruchi,

nothing wrong in your code i executed. it is working fine in my system whats happening in your machine i don't know. Try to execute it in sample / test portlet then you can find mistake.

Thanks
Srikanth Davuluri

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

23 aprile 2012 8.28

Risposta

ruchi sharma

Punteggio: Junior Member

Messaggi: 95

Data di Iscrizione: 24 marzo 2011

Thanks Srikanth,
Still surprised its not working .
I have had tried with test portlet individuality, sill is not working.
Then I used jquery for datepicker
Script Code :
<script type="text/javascript">
jQuery(document).ready(function() {
console.log("hello1");
jQuery("#startdatepicker").datepicker();

});
</script>

Code :
This following single line of code is to be added
<p>Start Date: <input type="text" id="startdatepicker"></p>

its working in my test portlet but not working where i want to do (i want to call this in my configuration.jsp(which is a popup) of my portlet).

Is anybody think of anything else.
thanks
Ruchi

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

9 maggio 2012 8.59

Risposta

Sanket Gosavi

Punteggio: Junior Member

Messaggi: 35

Data di Iscrizione: 24 dicembre 2011

What if i want to show calendar on front for selecting date....i want user to click on calender directly and select date...not on textbox...Any help plz

Contrassegno come una risposta

RE: how to get aui-calender selected date value?

7 novembre 2012 2.08

Risposta

Mazhar Alam

Punteggio: Regular Member

Messaggi: 179

Data di Iscrizione: 25 novembre 2011

Helpful post Bavithra!!