JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Original List (for quick comparison)</h1>
<select id="originalOrder">
    <option value="2010-07-01">July 2010</option>
    <option value="1901-08-22">1901</option>
    <option value="2010-06-21">June 2010</option>
    <option value="2009-08-22">2009</option>
    <option value="1972-08-22">1972</option>
</select>

<hr />

<h1>Actual list that is sorted</h1>
<select id="myList">
    <option value="2010-07-01">July 2010</option>
    <option value="1901-08-22">1901</option>
    <option value="2010-06-21">June 2010</option>
    <option value="2009-08-22">2009</option>
    <option value="1972-08-22">1972</option>
</select>

JavaScript

/**
 * Sorts option elements by value attribute which holds a date
 *
 * @param {HTMLOptionElement} a first option
 * @param {HTMLOptionElement} b second option
 *
 * @returns {Integer}
 */
var sortByDate = function(a, b) {
    return new Date(a.value) - new Date(b.value);
}

var list = document.getElementById("myList");
var options = list.getElementsByTagName("option");
// NodeList that we get in previous step is an array-like
// object but not actually an array. Some call it a fuck-up,
// but regardless we need to convert it to an array.
var optionsArray = Array.prototype.slice.call(options);

// sort using the custom comparator
optionsArray.sort(sortByDate);

// empty out the list
while(list.hasChildNodes()) {
    list.removeChild(list.firstChild);
};

// re-insert the sorted nodes
for(var i = 0; i < optionsArray.length; i++) {
    list.appendChild(optionsArray[i]);
}