You need to sign in to do that
Don't have an account?
Sain
Custom Input Date Picker not working
Hi,
I am developing a VF page, where i have implemented custom date input field but it is not working.
Please help to know where i am going wrong.
VF page:
<apex:page controller="CustomCalendarClass">
<apex:includeScript value="{!URLFOR($Resource.JSCalander,'calendar/calendar.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JSCalander,'calendar/calendar_blue.css')}" />
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
Start Date<apex:inputText value="{!startdate}" size="10" id="startdate" onmouseover="initialiseCalendar(this, '{!$Component.startdate}')" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
function fnSetDateFormat(oDateFormat)
{
oDateFormat['FullYear']; //Example = 2007
oDateFormat['Year']; //Example = 07
oDateFormat['FullMonthName']; //Example = January
oDateFormat['MonthName']; //Example = Jan
oDateFormat['Month']; //Example = 01
oDateFormat['Date']; //Example = 01
oDateFormat['FullDay']; //Example = Sunday
oDateFormat['Day']; //Example = Sun
oDateFormat['Hours']; //Example = 01
oDateFormat['Minutes']; //Example = 01
oDateFormat['Seconds']; //Example = 01
var sDateString;
// Use dd/mm/yyyy format
sDateString = oDateFormat['Date'] +"/"+ oDateFormat['Month'] +"/"+ oDateFormat['FullYear'];
return sDateString;
}
function initialiseCalendar(obj, eleId)
{
var element=document.getElementById(eleId);
var params='close=true';
if (null!=element)
{
if (element.value.length>0)
{
// date is formatted dd/mm/yyyy - pull out the month and year
var month=element.value.substr(3,2);
var year=element.value.substr(6,4);
params+=',month='+month;
params+=',year='+year;
}
}
fnInitCalendar(obj, eleId, params);
}
</script>
<script>
$(function() {
$( "#expdate" ).datepicker();
$( "#anim" ).change(function() {
$( "#expdate" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</apex:page>
Class:
public with sharing class CustomCalendarClass {
public string startdate {get;set;}
}
Regards,
Sain
I am developing a VF page, where i have implemented custom date input field but it is not working.
Please help to know where i am going wrong.
VF page:
<apex:page controller="CustomCalendarClass">
<apex:includeScript value="{!URLFOR($Resource.JSCalander,'calendar/calendar.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.JSCalander,'calendar/calendar_blue.css')}" />
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
Start Date<apex:inputText value="{!startdate}" size="10" id="startdate" onmouseover="initialiseCalendar(this, '{!$Component.startdate}')" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<script>
function fnSetDateFormat(oDateFormat)
{
oDateFormat['FullYear']; //Example = 2007
oDateFormat['Year']; //Example = 07
oDateFormat['FullMonthName']; //Example = January
oDateFormat['MonthName']; //Example = Jan
oDateFormat['Month']; //Example = 01
oDateFormat['Date']; //Example = 01
oDateFormat['FullDay']; //Example = Sunday
oDateFormat['Day']; //Example = Sun
oDateFormat['Hours']; //Example = 01
oDateFormat['Minutes']; //Example = 01
oDateFormat['Seconds']; //Example = 01
var sDateString;
// Use dd/mm/yyyy format
sDateString = oDateFormat['Date'] +"/"+ oDateFormat['Month'] +"/"+ oDateFormat['FullYear'];
return sDateString;
}
function initialiseCalendar(obj, eleId)
{
var element=document.getElementById(eleId);
var params='close=true';
if (null!=element)
{
if (element.value.length>0)
{
// date is formatted dd/mm/yyyy - pull out the month and year
var month=element.value.substr(3,2);
var year=element.value.substr(6,4);
params+=',month='+month;
params+=',year='+year;
}
}
fnInitCalendar(obj, eleId, params);
}
</script>
<script>
$(function() {
$( "#expdate" ).datepicker();
$( "#anim" ).change(function() {
$( "#expdate" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</apex:page>
Class:
public with sharing class CustomCalendarClass {
public string startdate {get;set;}
}
Regards,
Sain
Try with below it will help
Incase you need and restriction in date picker please check below link it will help !!
http://manojjena20.blogspot.in/2015/05/custom-date-picker-to-restrict-user-to.html