Sorting date format mm/dd/yyyy in asp gridview, while row in edit mode

fluffchops

I'm using datatables 1.10.7, and I have added the moment.min.js and datetime-moment.js to correct the date sorting for mm/dd/yyyy formatting. I'm using this with an asp.net gridview control, and it works perfectly. If I go into edit mode for one of the rows or multiple rows, everything sorts correctly except the dates. The row is displayed as textboxes for the values that can be modified, and the ready only fields are just labels. I've noticed it will sort the month and the days correctly, but the year values will not sort correctly. Anyone experience this before, or have an idea how to fix this?

function pageLoad() {
        
           $.fn.dataTable.moment("MM/DD/YYYY");                  
          
            var table = $('#gvScheduler').dataTable({
               
                "bPaginate": false,
                "info": true,
                "searching": true,
                "ordering": true,
                "order": [1, "asc"],
                "sScrollX": true,
                "stateSave": true,
                "scrollCollapse": true,
                "deferRender": true,
                "bAutoWidth": false,                
                "columnDefs": [
                       { "bSortable": false, "class": 'col-0', targets: 0 }, //edit
                       { "class": 'col-1', targets: 1 }, //Id  
                       { "class": 'col-2', targets: 2 }, //status 
                       { "class": 'col-3', targets: 3 }, // designer
                       { "class": 'col-4', targets: 4 }, // need
                       { "class": 'col-5', targets: 5 }, // start   
                       { "class": 'col-6', targets: 6 }, // duration   , "sSortDataType": 'dom-text-numeric'
                       { "class": 'col-7', targets: 7 }, // ob
                       { "class": 'col-8', targets: 8 }, // rel
                       { "class": 'col-9', targets: 9 }, // rel date
                       { "class": 'col-10', targets: 10 }, // disc
                       { "class": 'col-11', targets: 11 }, // action
                       { "class": 'col-12', targets: 12 }, // deliverable
                       { "class": 'col-13', targets: 13 }, // asset group
                       { "class": 'col-14', targets: 14 }, // notes ,"mRender: ": function ( data, type, full ) {return '<span>'+data+'</span>'; }
                       { "class": 'col-15', targets: 15 } // docs
                       
                ]
                
            });
         

        };

fluffchops

If all rows are in edit mode, the data looks like this. How can I get the data grid to sort this information correctly?

<td class="col-4 sorting_1">  
            <span id="lblNeedDate" style="display: none;" type="date">12/22/2014</span>
                                             
                         <div id="pnlNeed">                     
                                    <div class="input-group date" id="datetimepickerNeed">
                                       
                                   <input name="ctl00$MainContent$gvScheduler$ctl07$txtNeedDate" class="form-control myclass" id="txtNeedDate" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$gvScheduler$ctl07$txtNeedDate\',\'\')', 0)" type="date" value="12/22/2014"> 
                                    </div>
                              
            </div>
</td>