datepickerのサンプル

OpportunityDateSearch.page

<apex:page controller="OpportunityDateSearchController" showHeader="true" sidebar="false" docType="html-5.0" tabStyle="Opportunity" id="page">

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js" />
    <apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
    
    <apex:include pageName="OpportunityDateSearchCss" />
    <div id="vf-page">
        <apex:sectionHeader title="{!$Label.Forcedotcom}" subTitle="{!$Label.Opportunity_Search}" />
        <apex:form id="form">
            <apex:actionFunction name="fcSearch" action="{!doSearch}" reRender="resultTable"/>
            <apex:pageBlock id="block">
                <apex:pageBlockButtons location="bottom">
                    <apex:commandButton value=" {!$Label.Search} " onclick="return doSearch();"/>
                </apex:pageBlockButtons>
                <apex:pageBlockSection columns="1" id="section">
                    <apex:pageBlockSectionItem id="sectionItem">
                        <apex:outputLabel value="{!$ObjectType.Opportunity.Fields.CloseDate.Label}" />
                        
                        <!-- datepicker -->
                        <apex:outputPanel id="panel">
                            <apex:input value="{!fromDate}" type="text" styleClass="datepicker" id="fromDate" />
                            <apex:outputText value=" {!$Label.Wave_Dash} " />
                            <apex:input value="{!fromDate}" type="text" styleClass="datepicker" id="toDate" />
                        </apex:outputPanel>
                        
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection>
            </apex:pageBlock>
        </apex:form>
    </div>
    <apex:include pageName="OpportunityDateSearchScript" />
</apex:page>

OpportunityDateSearchScript.page

<apex:page >
    <script type="text/javascript">
    
        jQuery( function() {
            jQuery('.datepicker').datepicker( {
                showOn: "button",
                buttonImage: "/resource/FreeIcons/img/Calendar.png",
                buttonImageOnly: true,
                dateFormat:  'yy/mm/dd',
                firstDay: 0,
                numberOfMonths: 3,
                defaultDate : "-1m",
                showOtherMonths: true,
                selectOtherMonths: true
            } );
            jQuery(".datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
            jQuery('.ui-datepicker-trigger').css({'margin-left': '5px', 'margin-bottom': '-2px', 'width': '15px'});  
            jQuery('.ui-datepicker-week-end').css({'color': '#00f'});  
        });
    </script>
</apex:page>