<aura:component implements="force:appHostable" >
    <aura:attribute name="today" type="DateTime" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputDateTime aura:id="expdate" label="Today's Date" class="field uiDatePicker--default" value="{!v.today}" displayDatePicker="true" />
    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/>

    <div aura:id="msg" class="hide">
        You entered: <ui:outputDate aura:id="oDate" value="" />
    </div>

</aura:component>

<apex:page standardStylesheets="false">
    <apex:includeLightning/>
    <apex:stylesheet value="{!URLFOR($Resource.SLDSv2,'/assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
    <div class = "SLDS">
        <div id="lightning" />
    </div>
    <apex:includeScript value="/lightning/lightning.out.js"/>
    <script>
    $Lightning.use(
            "c:App",
            function() {
                $Lightning.createComponent(
                    "c:TestComponent",
                    {},
                    "lightning",
                    function(cmp) {
                    }
                );
            }
        );
    </script>
</apex:page>