javascript: changing date format but not to string

Question

Is there a way to change the format of a date object, but keep it as a date and not a string? I have a function that converts a new Date() object into the following format:

function formatDate(date) {

    var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October",
        "November", "December"
    ];

    var day = date.getDate(), 
            monthIndex = date.getMonth(),
            year = date.getFullYear();


    return monthNames[monthIndex].substr(0,3) + ' ' + day + ', ' + year;
}

However, this converts the date into a string. I want to change the formatting so that my date appears as Feb 15, 2019, but want to keep it as a date object so it sorts in chronological order instead of alphabetical. Is this possible?

EDIT:

In our table, we're able to sort the table's contents chronologically creating a date object for start_date in our object array:

start_date: new Date(onbCase.getDisplayValue('hr_profile.employment_start_date'))

then formatting the date object to MMM d, YYYY by using the pipe filter in the HTML:

<td ng-show="c.options.start_date" title="{{item.start_date}}">{{item.start_date | date:'mediumDate':'Z'}}</td>

Our issue arises when we're trying to get our column filters to also show up in chronological order with the same format. Here is how we're creating our column filters in the controller:

c.filter = function() {
        for (var i=0; i<c.onbCase.length; i++) {
            c.onbCase[i].case_visible = true;
            for (var z=0; z<c.filters.length; z++) {
                if(c[c.filters[z].model] && c[c.filters[z].model].length > 0) {
                    var model = c[c.filters[z].model];  
                    if (model.indexOf(c.onbCase[i][c.filters[z].attribute]) == -1) {
                        c.onbCase[i].case_visible = false;
                    }
                }
            }
        }
        //Store unique values for filters
        generateFilterOptions();
        return; 
    }

    $scope.searchTable   = '';     // set the default 

    /*/////////////////////////////////////////////////////////////////////////////
    // Support Function: Define filters                                          //
    *//////////////////////////////////////////////////////////////////////////////

    function defineFilters() {
        //Declare filter variables
        c.filters = []

        c.start_date_list = [];
        if(c.options.start_date){
            c.filters.push({
                id: 'start_date',
                label: 'Start Date',
                model: 'start_date_select',
                unique_list: 'start_date_list',
                attribute: 'start_date'
            });
        }           
    }

    /*/////////////////////////////////////////////////////////////////////////////
    // Support Function: Generate filter options                                 //
    *//////////////////////////////////////////////////////////////////////////////
    function generateFilterOptions() {
        c.numResults = 0;
        //Initialize filter options
        for (var z=0; z<c.filters.length; z++) {
            c[c.filters[z].unique_list] = [];
        }
        //Store unique values for filters
        for (var i=0; i<c.onbCase.length; i++) {
        if (c.onbCase[i].case_visible) {
                c.numResults++;
                for (var x=0; x<c.filters.length; x++) {
                    if (c[c.filters[x].unique_list].indexOf(c.onbCase[i][c.filters[x].attribute])===-1) {
                        c[c.filters[x].unique_list].push(c.onbCase[i][c.filters[x].attribute]);     
                    }
                }   
            }
        }
        //Sort unique values for filters            
        for (var y=0; y<c.filters.length; y++) {
            c[c.filters[y].unique_list].sort();
        }
    }

This will return the filter in chronological order, but the format looks like this:

We would like the date format to be "Feb 18, 2019", but show up in the filter in chronological order. Thanks!

Answer 1

Rendering the date in the required format and sorting based on the date object is perfectly possible by using $filter.

More information is available here: https://docs.angularjs.org/api/ng/filter/date

If you want to get the formatted date in Javascript,

function getFormattedDate(dateObj) {
    return $filter('date')(dateObj, 'mediumDate');
}

In other case, if we want to use this in HTML directly:

<span>{{ dateObj | date:'mediumDate'}}</span>

Here is the Plnkr example.