Kyle Joseph Stiemann:
Thanks a lot Kyle, it worked ! Just one thing, i just want the icon to trigger the calendar but using this solution the input will also trigger the calendar, is there any way to make just the icon to trigger the calendar and make the input just get all the data from the calendar ?
If you want to use it that way, you'll have to use the first example that I posted from StackOverflow. It's a little more complex, but it should work. Just make sure you also correct the issues that I mentioned.
- Kyle
Ok Got it ! it's aaaallmost done, now it works the way i want BUT when i type the date and press enter the calendar wont reflect that date on the actual widget. When i open the calendar and click the date it will show that date on the input but when i type the date on the input it wont mark that date on the calendar, hope you can undestand this
.<div class="input_alta input_datepicker">
<label><liferay-ui:message key="dataAlta" /></label>
<i id="id_alta" class="icon-calendar icon-1x"></i>
<input id="startDate" placeholder="dd/mm/aaaa" value="" type="text">
</div>
<div class="input_fins input_datepicker">
<label><liferay-ui:message key="fins" /></label>
<i id="id_fins" class="icon-calendar icon-1x"></i>
<input id="endDate" placeholder="dd/mm/aaaa" value="" type="text">
</div><aui:script>
YUI( { lang: 'ca-ES' } ).use(
'aui-datepicker',
function(Y) {
var input= Y.one('#startDate');
var datepickerAlta = new Y.DatePicker(
{
trigger: '#id_alta',
mask: '%d/%m/%Y',
calendar: {
on: {
dateClick: function(event) {
input.set('value', Y.Date.format(event.date,{format:datepickerAlta.get('mask')}));
}
}
},
popover: {
zIndex: 1
},
after: {
selectionChange: function(event) {
fillTable('<%=sessionBean.getEns().getIdEns() %>');
}
}
}
);
var input2= Y.one('#endDate');
var datepickerFins = new Y.DatePicker(
{
trigger: '#id_fins',
mask: '%d/%m/%Y',
calendar: {
on: {
dateClick: function(event) {
input2.set('value', Y.Date.format(event.date,{format:datepickerFins.get('mask')}));
}
}
},
popover: {
zIndex: 1
},
after: {
selectionChange: function(event) {
fillTable('<%=sessionBean.getEns().getIdEns() %>');
}
}
}
);
/*To get date when pressing enter*/
Y.one('#startDate').on('change', function(event) {
fillTable('<%=sessionBean.getEns().getIdEns() %>');
});
Y.one('#id_fins').on('click', function(event) {
// Cannot do datePicker.show(); because of AUI-1795
var date = document.getElementById('endDate');
date.focus();
date.click();
});
}
);
</aui:script>