<apex:component controller="mycontroller" allowDML="true">
   
   
  <style type="text/css">
      .custPopup{
            background-color: white;
            border-width: 0px;
            border-radius:15px;
            border-style: solid;
            border-color:#39759D;
            box-shadow: 5px 5px 10px black;
            z-index: 2;
            left: 50%;
            padding:20px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can add 
            the height property for a fixed size pop up if you want.*/
            width: 80%;
            margin-left:-40%;
            top:105px;
            }
      .popupBackground{
            background-color:39759D;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }     
   </style>    

<apex:actionRegion>  

    <apex:outputPanel id="custPopUp" > 
        <apex:outputPanel styleClass="popupBackground" rendered="{!displayPopup}"/>
            <apex:outputPanel styleClass="custPopup" layout="inline" rendered="{!displayPopup}">              
                <div align="right">
                    <apex:commandButton value="X" action="{!closePopup}" rerender="custPopUp"/>                            
                </div>                    
        <apex:pageBlockSection title="Information" columns="2"> 
            <apex:inputField showDatePicker="false" label="From" value="{!showData.From__c}" styleclase="styledate"/>
            <apex:inputField id ="To" label="To" value="{!showData.To__c}" showDatePicker="false" styleclase="styledate"/>               
        </apex:pageBlockSection>
        </apex:outputPanel>
    </apex:outputPanel>
    </apex:outputPanel>
</apex:actionRegion>

....

    <apex:commandLink style="width:125px;text-decoration: none;" styleClass="btn" action="{!showPopup}"  rerender="custPopUp">   
      
    </apex:commandLink>
</apex:component>

styleclass=showDate -- opens a calendar. The style and scripts are in a static resource files.
This styleclass works on the page, but style is lost when Popup is opened.