better format for dateTime component

ui/js/component/dateTime/view.jsx

@@ -5,6 +5,14 @@ class DateTime extends React.PureComponent {
   static SHOW_TIME = "time";
   static SHOW_BOTH = "both";
 
+  static defaultProps = {
+    formatOptions: {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    },
+  };
+
   componentWillMount() {
     this.refreshDate(this.props);
   }
@@ -23,16 +31,18 @@ class DateTime extends React.PureComponent {
   render() {
     const { date, formatOptions } = this.props;
     const show = this.props.show || DateTime.SHOW_BOTH;
+    const locale = app.i18n.getLocale();
 
     return (
       <span>
         {date &&
           (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
-          date.toLocaleDateString()}
+          date.toLocaleDateString([locale, "en-US"], formatOptions)}
         {show == DateTime.SHOW_BOTH && " "}
         {date &&
           (show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
           date.toLocaleTimeString()}
+        {!date && "..."}
       </span>
     );
   }

ui/js/page/file/view.jsx

@@ -87,9 +87,9 @@ class FilePage extends React.PureComponent {
                   <h1>{title}</h1>
                   <div className="card__subtitle">
                     <UriIndicator uri={uri} link={true} />
-                    <span class="meta" style={{ margin: "10px" }}>&#9899;</span>
+                    <span style={{ margin: "10px" }}>&#9899;</span>
-                    <span class="meta">
+                    <span>
-                      Published on <DateTime block={height} />
+                      Published on <DateTime block={height} show="date" />
                     </span>
                   </div>
                 </div>