Fórumok

how to get aui-calender selected date value?

thumbnail
srikanth davuluri, módosítva 12 év-val korábban

how to get aui-calender selected date value?

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
Hi All....

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

Thanks in Advance..

Regards
Srikanth Davuluri.
thumbnail
Juhi Kumari, módosítva 12 év-val korábban

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

Expert Bejegyzések: 347 Csatlakozás dátuma: 2011.12.12. Legújabb bejegyzések
Hi

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

<aui:script>
	var startCal;
	var endCal;
	AUI().ready('aui-calendar', function(A) {
		startCal = new A.Calendar({
			trigger : '#<portlet:namespace />startDate',
			dateFormat : '%d/%m/%Y',
			
			selectMultipleDates : false,
			on : {
				select : function(event) {
					endCal.set('minDate', startCal.getCurrentDate());
					endCal.syncUI();
				}
			}
		}).render();

		A.on('mousedown', function() {
			A.CalendarManager.hideAll();
		}, document);

	});
</aui:script>


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


Regards
Juhi
thumbnail
srikanth davuluri, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
Hi Juhi Kumari,

i tried with above code but it is displaying only text box could you please explain clearly with sample jsp page.
thumbnail
Juhi Kumari, módosítva 12 év-val korábban

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

Expert Bejegyzések: 347 Csatlakozás dátuma: 2011.12.12. Legújabb bejegyzések
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.
&lt;%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %&gt;

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

Regards
Juhi
thumbnail
srikanth davuluri, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
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.
thumbnail
Bavithra Rajendran, módosítva 12 év-val korábban

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

Regular Member Bejegyzések: 123 Csatlakozás dátuma: 2009.10.08. Legújabb bejegyzések
Hi,

You can try this
<input type="text" size="50" id="myDatepicker">

<script type="text/javascript" charset="utf-8">
AUI().use('aui-datepicker', function(A) {
	var simpleDatepicker1 = new A.DatePicker({
		trigger: '#myDatepicker',
		dateFormat: '%d/%m/%y %A',
		setValue: true,
		minDate: '01/01/2000',
		maxDate: '09/05/2020',
		selectMultipleDates: false
	})
	.render();
});
</script>


Thanks,
Bavithra Rajendran
thumbnail
srikanth davuluri, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
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.
thumbnail
Bavithra Rajendran, módosítva 12 év-val korábban

RE: how to get aui-calender selected date value? (Válasz)

Regular Member Bejegyzések: 123 Csatlakozás dátuma: 2009.10.08. Legújabb bejegyzések
Add the attributes inside calendar: {}. It will work. The code should be like this

<input type="text" size="50" id="myDatepicker">

<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>


Thanks,
Bavithra Rajendran
thumbnail
Srikanth Davuluri, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
Thanks for your response

it is working fine...
thumbnail
RathnaDevi Chellaiah, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 29 Csatlakozás dátuma: 2012.03.27. Legújabb bejegyzések
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 lotemoticon
ruchi sharma, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 95 Csatlakozás dátuma: 2011.03.24. Legújabb bejegyzések
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
thumbnail
Srikanth Davuluri, módosítva 12 év-val korábban

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

Junior Member Bejegyzések: 25 Csatlakozás dátuma: 2011.06.07. Legújabb bejegyzések
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
ruchi sharma, módosítva 11 év-val korábban

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

Junior Member Bejegyzések: 95 Csatlakozás dátuma: 2011.03.24. Legújabb bejegyzések
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
Sanket Gosavi, módosítva 11 év-val korábban

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

Junior Member Bejegyzések: 35 Csatlakozás dátuma: 2011.12.24. Legújabb bejegyzések
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
thumbnail
mohammad azaruddin, módosítva 9 év-val korábban

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

Expert Bejegyzések: 492 Csatlakozás dátuma: 2012.09.17. Legújabb bejegyzések
Hi ruchi
did you resolve this issue
It seems the above code will not work for LR6.2
vinod kumar, módosítva 9 év-val korábban

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

Junior Member Bejegyzések: 64 Csatlakozás dátuma: 2012.10.04. Legújabb bejegyzések
Hi Mohammad,

i am facing the same problem have you resolved the date picker in LR6.2.
thumbnail
Kyle Joseph Stiemann, módosítva 9 év-val korábban

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

Liferay Master Bejegyzések: 760 Csatlakozás dátuma: 2013.01.14. Legújabb bejegyzések
Hi Guys,
In order to do this in Liferay Portal 6.2, you need to use the AlloyUI 2.0 Datepicker.

The code would look something like this:
<div>
    <input type="text" id="myDatepicker">
</div>
<script type="text/javascript">
AUI().use('aui-datepicker', function(A) {
    new A.DatePicker({
    trigger: '#myDatepicker',
    popover: { zIndex: 99999 },
    mask: '%d/%m/%y %A',
    calendar: {
        minimumDate: new Date(2011,00,01),
        maximumDate: new Date(2012,08,05),
        selectionMode: 'multiple'
    }
    }).render();
});
</script>

- Kyle
thumbnail
mohammad azaruddin, módosítva 9 év-val korábban

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

Expert Bejegyzések: 492 Csatlakozás dátuma: 2012.09.17. Legújabb bejegyzések
Thanks Kyle Joseph Stiemann

The above code will work fine But Do you have any solution for the same in portlet-model-hints.xml when we use <aui:model-context bean="" model="" />.

where as <hint name="year-range-past">false</hint> doesn't seems to work in UI level
thumbnail
Kyle Joseph Stiemann, módosítva 9 év-val korábban

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

Liferay Master Bejegyzések: 760 Csatlakozás dátuma: 2013.01.14. Legújabb bejegyzések
Hi Mohammad,
I'm glad the code is working for you. You should post this question in a new thread since it is a new topic.

- Kyle
thumbnail
mohammad azaruddin, módosítva 9 év-val korábban

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

Expert Bejegyzések: 492 Csatlakozás dátuma: 2012.09.17. Legújabb bejegyzések
Yeah you are right emoticon
thumbnail
Mazhar Alam, módosítva 11 év-val korábban

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

Regular Member Bejegyzések: 191 Csatlakozás dátuma: 2011.11.25. Legújabb bejegyzések
Helpful post Bavithra!!