在手机上更改日期格式？

Question

I have a web application that uses PHP to pull from a MySQL Database and display a table. The date format displayed is M\\(m\\) j, Y g:ia (example: Dec(12) 31, 1969 4:00 pm).

There's three columns of date data, and on mobile that make the table just too wide. What would be the best way of using CSS to convert that long date format into a shorter date format on mobile?

Thanks.

Answer 1

You can use different approaches. One is to generate with PHP the desktop version and the mobile version, and hiding through CSS the one not matching the current device.

A simple example using the current date and 768px as the point where to change:

<table>
 <tbody>
 <tr>
   <td>your other stuff</td>
   [...]
   <td>
     <span class="desktop-date"><?php echo date('M\(m\) j, Y g:i a'); ?></span>
     <span class="mobile-date"><?php echo date('d-m-Y'); ?></span>
   </td>
  </tr>
  </tbody>
</table>

and then using CSS:

@media (max-width: 767px) {
    .desktop-date {
      display: none;
    }
}
@media (min-width: 768px) {
    .mobile-date {
      display: none;
    }
}