0

Hi I am trying to show date picker on my VF page using jquery date picker, date picker showing properly on my page, the problem is that when I click on submit button I'm getting null on my controller. Below is my code

public class TestDateExampleController {

    public String x_date {get;set;}
    public TestDateExampleController() {
        System.debug('x_date-in constructor--'+x_date);
    }
    public void dosubmit() {
        System.debug('x_date-in method--'+x_date);
    }
}

vf page

<apex:page controller="TestDateExampleController" docType="html-5.0" sidebar="false">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript"> 

    $(function(){
        var date = new Date();
        var currentMonth = date.getMonth();
        var currentDate = date.getDate();
        var currentYear = date.getFullYear();
        $('#datepicker').datepicker({
            minDate: new Date(currentYear, currentMonth, currentDate),
            dateFormat: 'dd-mm-yy'
        });
    });
    </script>
    <apex:form >
        <apex:pageBlock id="pgblk">
            <apex:pageBlockSection id="abc">
                <input value="{!x_date}" type="text" id="datepicker"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons>
                <apex:commandButton action="{!doSubmit}"  value="Save" id="theButton"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

2 Answers 2

0

The component that you are using is input(html), which is not a apex component. Hence doesn't get binded to apex class. Use <apex:input> instead.

The id attribute needs to be replaced by class to apply datepicker as salesforce would generate a dynamic id. Refer below code for reference, which should work fine for you.

<apex:page controller="TestDateExampleController" docType="html-5.0" sidebar="false">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript"> 

    $(function(){
        var date = new Date();
        var currentMonth = date.getMonth();
        var currentDate = date.getDate();
        var currentYear = date.getFullYear();
        $('.datepicker').datepicker({
            minDate: new Date(currentYear, currentMonth, currentDate),
            dateFormat: 'dd-mm-yy'
        });
    });
    </script>
    <apex:form >
        <apex:pageBlock id="pgblk">
            <apex:pageBlockSection id="abc">
                <apex:input value="{!x_date}" type="text" styleClass="datepicker"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!doSubmit}"  value="Save" id="theButton"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

See if this helps!

2
  • thanks, Hemant Jain its work for me. there is one more issue when I select datepicker it shows datepicker and also shows drop-down date value which i previous used how to remove this drop-down
    – Harish
    Jun 6, 2018 at 9:47
  • Put html-autocomplete="off" in <apex:input> Jun 6, 2018 at 10:34
0

You have to bind the value selected on the page to the variable in the class. Make the following changes to your code:

Replace <input value="{!x_date}" type="text" id="datepicker"/> with <apex:inputText value="{!x_date}" id="datepicker"/> and in the javascript code for the datepicker, replace $('#datepicker').datepicker({.....}; with $('[id*="datepicker"]').datepicker({....});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .