Skip to content

Instantly share code, notes, and snippets.

@tyoshikawa1106
Created September 4, 2014 05:51
Show Gist options
  • Save tyoshikawa1106/9af97ab6c43905cd2ec5 to your computer and use it in GitHub Desktop.
Save tyoshikawa1106/9af97ab6c43905cd2ec5 to your computer and use it in GitHub Desktop.
datepickerのサンプル
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment