Cacher is the code snippet organizer for pro developers

<apex:page standardController="Contact" extensions="ContactMassSendSurveyController" recordSetVar="contacts" showHeader="false" standardStylesheets="false">

    <apex:slds />  
    
    <!-- styles and js libraries for date picker -->
    <apex:stylesheet value="{!URLFOR($Resource.DateTimePicker, 'src/css/bootstrap.css')}"/>     
    <apex:stylesheet value="{!URLFOR($Resource.DateTimePicker, 'src/css/bootstrap-datetimepicker.css')}"/>
    
    <apex:includeScript value="{!URLFOR($Resource.DateTimePicker, 'src/js/jquery-3.2.1.min.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.DateTimePicker, 'src/js/bootstrap.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.DateTimePicker, 'src/js/moment.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.DateTimePicker, 'src/js/moment-with-locales.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.DateTimePicker, 'src/js/bootstrap-datetimepicker.js')}"/> 
    <!-- end -->
    <apex:form styleClass="slds-p-around--medium"> 
    <script type="text/javascript">
    function submitForm() {
        sendSurvey(
            document.getElementById("selectedSurvey").options[document.getElementById("selectedSurvey").selectedIndex].value,            
            document.getElementById("sendDateTime").value

        );
        console.log(document.getElementById("selectedSurvey").options[document.getElementById("selectedSurvey").selectedIndex].value);
        console.log(document.getElementById("sendDateTime").value);
    }
    $(function () {
        $('#datetimepicker').datetimepicker({ignoreReadonly : true});
    });                    
    </script>   
    
    <apex:actionFunction name="sendSurvey" action="{!sendSurveys}">
        <apex:param name="firstParam" assignTo="{!selectedSurvey}" value=""/>
        <apex:param name="secondParam" assignTo="{!sendDateTime}" value=""/>
    </apex:actionFunction>   

    <div class="slds-scope">
        <div class="slds-grid slds-wrap slds-size_3-of-7">
            <main class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--8-of-12 slds-large-size--4-of-5">        
    
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="select-01">Select A Survey</label>
                        <div class="slds-form-element__control">
                            <div class="slds-select_container">        
                                <select id="selectedSurvey" class="slds-select">
                                    <apex:repeat value="{!surveys}" var="survey">
                                        <option value="{!survey.value}">{!survey.label}</option>
                                    </apex:repeat>
                                </select>   
                            </div>
                        </div>
                    </div>   
                	<br />
                    <div class='slds-form-element'>
                        <label class="slds-form-element__label" for="select-01">Select Date/Time</label> 
                        <div class='input-group date' id='datetimepicker'>
                            <input id="sendDateTime" 
                                   type='text' 
                                   class="form-control" 
                                   readonly="true"

                            />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                
                <button onclick="submitForm(); return false;">Send Survey</button>

            </main>
        </div>
    </div>
    
</apex:form>    
</apex:page>

public with sharing class ContactMassSendSurveyController 
{    
    private ApexPages.StandardSetController standardController;
    
    // constructor.
    public ContactMassSendSurveyController(ApexPages.StandardSetController standardController)
    {
        this.standardController = standardController;
    }
    
    // get a list of surveys for the form picklist
    public List<SelectOption> getSurveys() {
        List<SelectOption> surveys = new List<SelectOption>();
        for (SEO__CSEO_Survey__c s : [SELECT Id, Name FROM SEO__CSEO_Survey__c])
        {
            surveys.add(new SelectOption(s.Id , s.Name));
        }
        
        return surveys;
    } 
    
    public PageReference sendSurveys()
    {       
             
        String selectedSurvey = Apexpages.currentPage().getParameters().get('selectedSurvey');
        String sendDateTime = Apexpages.currentPage().getParameters().get('sendDateTime');
        
        System.debug(selectedSurvey);
        System.debug(sendDateTime);
        
        return standardController.cancel();   
    }
}