<lightning:datatable data="{!v.Equipments}"    columns="{!v.equipmentColumns}"    keyField="Id"    hideCheckboxColumn="true"/> 
In Controller:
component.set('v.equipmentColumns', [
          {label: 'Predicted Time', fieldName: 'Prediction_Time__c', type: 'Date', typeAttributes:{year:'numeric',month:'short',day:'2-digit'}},
          {label: 'Origin Station', fieldName: 'Origin_Station__c', type: 'text', sortable: true},
          {label: 'Destintion Station', fieldName: 'Destination_Station__c', type: 'text', sortable: true},
      ]);

Currently it is displaying the date as : 2018-03-15T17:37:00.000Z
but the expected format is : 2018-03-15

Please help
 

First time during the page only it is working after page rerender it is not working. please help..

VF page:
<apex:page controller="DatePickingClass" docType="html-5.0">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="2">
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Filter By"/>
                    </apex:pageblockSectionItem> 
                           
                    <apex:pageblockSectionItem > 
                        <apex:actionFunction name="setValue" action="{!FetchEventByRanges}" reRender="selectedValue">
                            <apex:param name="x" value="" assignTo="{!eventByDate}" />
                        </apex:actionFunction>
                        <select onchange="setValue(this.value)">
                            <option value="EBD">Events By Date</option>
                            <option value="EBDR">Events By Date Range</option>
                            <option value="EBM">Events By Month</option>
                        </select>                   
                    </apex:pageblockSectionItem>
                    
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Range"/>
                    </apex:pageblockSectionItem>
                    
                    <apex:outputPanel id="selectedValue">            
                        <apex:pageblockSectionItem rendered="{!!selectionflag}">
                            <apex:selectList size="1" value="{!eventByRange}" >
                                <apex:selectOptions value="{!EventByRangeOptions}"/>
                            </apex:selectList>
                        </apex:pageblockSectionItem>
                        <apex:outputpanel rendered="{!selectionflag}">
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="From Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!StartDate}" id="datepickerFrom"/>
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="To Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!EndDate}" id="datepickerTo"/>
                        </apex:outputpanel>
                    </apex:outputPanel>             
                </apex:pageBlockSection>        
            </apex:pageBlock>
        </apex:form>
<script>
    var j$ = jQuery.noConflict();
    
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10) {
       dd='0'+dd
    } 
    if(mm<10) {
       mm='0'+mm
    } 
    today = mm+'/'+dd+'/'+yyyy;
    
    var date = new Date(), y = date.getFullYear(), m = date.getMonth();
    var firstDay = new Date(y, m, 1);
    var lastDay = new Date(y, m + 1, 0);
    
    var ldd = lastDay.getDate();
    var lmm = lastDay.getMonth()+1;
    var lyyyy = lastDay.getFullYear();
    if(ldd<10) {
       ldd='0'+ldd
    } 
    if(lmm<10) {
       lmm='0'+lmm
    } 
    lastDay = lmm+'/'+ldd+'/'+lyyyy;
    
    j$(document).ready(function($) {
       j$('[id$=datepickerFrom]').val(today);
       j$('[id$=datepickerTo]').val(lastDay);
       j$('[id$=datepickerFrom]').datepicker()
       j$('[id$=datepickerTo]').datepicker()
    });
</script>
</apex:page>

Apex Class:
public class DatePickingClass
{
    public String eventByDate{get;set;}
    public String eventByRange{get;set;} 
    
    public List<SelectOption> EventByRangeOptions{get;set;}
    public string StartDate{get;set;}
    public string EndDate{get;set;}
    public Boolean selectionflag{get;set;}
    
    public DatePickingClass()
    {
//       StartDate = String.valueOf(system.today());
       selectionflag = true;
    }
    
    public void FetchEventByRanges(){
        EventByRangeOptions = new List<SelectOption>();    
        if(eventByDate == 'EBDR')
        {   
            selectionflag = false;    
            EventByRangeOptions.add(new SelectOption('U7Days','Upcoming 7 Days'));
            EventByRangeOptions.add(new SelectOption('U30Days','Upcoming 30 Days'));
        }
        else if(eventByDate == 'EBD')
        {       
            selectionflag = true;
        }
        else
        {
            EventByRangeOptions.add(new SelectOption('None','--- None ---'));
        }    
    }
}

Thanks 
Vishnu

<lightning:datatable data="{!v.Equipments}"    columns="{!v.equipmentColumns}"    keyField="Id"    hideCheckboxColumn="true"/> 
In Controller:
component.set('v.equipmentColumns', [
          {label: 'Predicted Time', fieldName: 'Prediction_Time__c', type: 'Date', typeAttributes:{year:'numeric',month:'short',day:'2-digit'}},
          {label: 'Origin Station', fieldName: 'Origin_Station__c', type: 'text', sortable: true},
          {label: 'Destintion Station', fieldName: 'Destination_Station__c', type: 'text', sortable: true},
      ]);

Currently it is displaying the date as : 2018-03-15T17:37:00.000Z
but the expected format is : 2018-03-15

Please help
 

First time during the page only it is working after page rerender it is not working. please help..

VF page:
<apex:page controller="DatePickingClass" docType="html-5.0">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
        <apex:form >
            <apex:pageBlock >
                <apex:pageBlockSection columns="2">
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Filter By"/>
                    </apex:pageblockSectionItem> 
                           
                    <apex:pageblockSectionItem > 
                        <apex:actionFunction name="setValue" action="{!FetchEventByRanges}" reRender="selectedValue">
                            <apex:param name="x" value="" assignTo="{!eventByDate}" />
                        </apex:actionFunction>
                        <select onchange="setValue(this.value)">
                            <option value="EBD">Events By Date</option>
                            <option value="EBDR">Events By Date Range</option>
                            <option value="EBM">Events By Month</option>
                        </select>                   
                    </apex:pageblockSectionItem>
                    
                    <apex:pageblockSectionItem >
                        <apex:outputLabel value="Range"/>
                    </apex:pageblockSectionItem>
                    
                    <apex:outputPanel id="selectedValue">            
                        <apex:pageblockSectionItem rendered="{!!selectionflag}">
                            <apex:selectList size="1" value="{!eventByRange}" >
                                <apex:selectOptions value="{!EventByRangeOptions}"/>
                            </apex:selectList>
                        </apex:pageblockSectionItem>
                        <apex:outputpanel rendered="{!selectionflag}">
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="From Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!StartDate}" id="datepickerFrom"/>
                            <apex:outputText style="color:#f8f8ff;font-weight:bold" value="To Date (YYYY-MM-DD) " />
                            <apex:inputText value="{!EndDate}" id="datepickerTo"/>
                        </apex:outputpanel>
                    </apex:outputPanel>             
                </apex:pageBlockSection>        
            </apex:pageBlock>
        </apex:form>
<script>
    var j$ = jQuery.noConflict();
    
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10) {
       dd='0'+dd
    } 
    if(mm<10) {
       mm='0'+mm
    } 
    today = mm+'/'+dd+'/'+yyyy;
    
    var date = new Date(), y = date.getFullYear(), m = date.getMonth();
    var firstDay = new Date(y, m, 1);
    var lastDay = new Date(y, m + 1, 0);
    
    var ldd = lastDay.getDate();
    var lmm = lastDay.getMonth()+1;
    var lyyyy = lastDay.getFullYear();
    if(ldd<10) {
       ldd='0'+ldd
    } 
    if(lmm<10) {
       lmm='0'+lmm
    } 
    lastDay = lmm+'/'+ldd+'/'+lyyyy;
    
    j$(document).ready(function($) {
       j$('[id$=datepickerFrom]').val(today);
       j$('[id$=datepickerTo]').val(lastDay);
       j$('[id$=datepickerFrom]').datepicker()
       j$('[id$=datepickerTo]').datepicker()
    });
</script>
</apex:page>

Apex Class:
public class DatePickingClass
{
    public String eventByDate{get;set;}
    public String eventByRange{get;set;} 
    
    public List<SelectOption> EventByRangeOptions{get;set;}
    public string StartDate{get;set;}
    public string EndDate{get;set;}
    public Boolean selectionflag{get;set;}
    
    public DatePickingClass()
    {
//       StartDate = String.valueOf(system.today());
       selectionflag = true;
    }
    
    public void FetchEventByRanges(){
        EventByRangeOptions = new List<SelectOption>();    
        if(eventByDate == 'EBDR')
        {   
            selectionflag = false;    
            EventByRangeOptions.add(new SelectOption('U7Days','Upcoming 7 Days'));
            EventByRangeOptions.add(new SelectOption('U30Days','Upcoming 30 Days'));
        }
        else if(eventByDate == 'EBD')
        {       
            selectionflag = true;
        }
        else
        {
            EventByRangeOptions.add(new SelectOption('None','--- None ---'));
        }    
    }
}

Thanks 
Vishnu