screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js Convert 24 hours to 12 hours format </h3> <p>24 hours format: {{ time }}</p> <p>12 hours format: {{ formattedTime }}</p> </div> <script type="module"> const app = Vue.createApp({ data() { return { time: "15:30" // 24 hour format time string } }, computed: { formattedTime() { const [hours, minutes] = this.time.split(":"); const time = new Date(); time.setHours(hours); time.setMinutes(minutes); const ampm = time.getHours() >= 12 ? "PM" : "AM"; let hours12 = time.getHours() % 12; hours12 = hours12 ? hours12 : 12; // convert 0 to 12 return `${hours12}:${minutes} ${ampm}`; } } }); app.mount('#app'); </script> </body> </html>