date time converted to locale

hosting/static/hosting/css/commons.css

@@ -376,3 +376,11 @@
   color: #999;
   fill: #999;
 }
+
+.locale_date {
+  opacity: 0;
+}
+
+.locale_date.done{
+  opacity: 1;
+}

hosting/templates/hosting/order_detail.html

@@ -32,11 +32,11 @@
             {% endif %}
             <p>
                 <strong>{% trans "Date" %}:</strong>
-                <span id="order-created_at">
+                <span class="locale_date">
                     {% if order %}
-                        {{order.created_at|date:'Y-m-d H:i'}}
+                        {{order.created_at|date:'Y-m-d h:i a'}}
                     {% else %}
-                        {% now "Y-m-d H:i" %}
+                        {% now "Y-m-d h:i a" %}
                     {% endif %}
                 </span>
             </p>
@@ -107,7 +107,9 @@
                         {% if vm.created_at %}
                             <p>
                                 <span>{% trans "Period" %}: </span>
-                                <span>{{ vm.created_at|date:'Y/m/d' }} - {{ subscription_end_date|date:'Y/m/d' }}</span>
+                                <span>
+                                    <span class="locale_date" data-format="YYYY/MM/DD">{{ vm.created_at }}</span> - <span class="locale_date" data-format="YYYY/MM/DD">{{ subscription_end_date }}</span>
+                                </span>
                             </p>
                         {% endif %}
                         <p>
@@ -194,12 +196,16 @@
 <script type="text/javascript">
     {% trans "Some problem encountered. Please try again later." as err_msg %}
     var create_vm_error_message = '{{err_msg|safe}}';
-
     window.onload = function () {
-        var locale_date = moment.utc(document.getElementById("order-created_at").textContent, 'YYYY-MM-DD HH:mm').toDate();
+        var locale_dates = document.getElementsByClassName("locale_date");
-        locale_date = moment(locale_date).format("YYYY-MM-DD h:mm:ss a");
+        var formats = ['YYYY-MM-DD hh:mm a', 'YYYY/MM/DD']
-        document.getElementById('order-created_at').innerHTML = locale_date;
+        var i;
-
+        for (i = 0; i < locale_dates.length; i++) {
+            var oldDate = moment.utc(locale_dates[i].textContent, formats);
+            var outputFormat = locale_dates[i].getAttribute('data-format') || oldDate._f;
+            locale_dates[i].innerHTML = oldDate.local().format(outputFormat);
+            locale_dates[i].className += ' done';
+        }
     };
 </script>
 {%endblock%}