Vue Js Time Picker Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <h3>Vue.js Date Time Picker Example</h3>
    <input type="time" v-model="selectedTime"><br>

<p class="chip" v-if="selectedTime">{{ selectedTime}}</p>

</div>

h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }

input[type="time"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 10px;
      outline-color: #007bff;
      /* Add outline color here */
    }

input[type="time"]:focus {
      outline-color: #007bff;
      /* Set the same color for the focus state */
    }

.chips {
      margin-top: 10px;
    }
   .chip {
      display: inline-block;
      /* Ensures chips appear in a single line */
      background-color: #f0f0f0;
      color: #333;
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 14px;
      margin-right: 6px;
      margin-bottom: 6px;
      transition: background-color 0.3s ease;
      /* Adds smooth hover effect */
      cursor: pointer;
      /* Makes the chip cursor interactive */
      user-select: none;
      /* Prevents text selection */
      overflow: hidden;
      /* Hides any overflow text */
      white-space: nowrap;
      /* Prevents text wrapping */
    }

.chip:hover {
      background-color: #ddd;
      /* Changes background color on hover */
    }

.chip:focus {
      outline: none;
      /* Removes the default focus outline */
      box-shadow: 0 0 0 2px #333;
      /* Adds a focus border */
    }

.chip span {
      display: flex;
      align-items: center;
      justify-content: center;
    }

.chip span img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 8px;
    }

.chip span span {
      font-size: 16px;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
​
<body>
  <div id="app">
    <h3>Vue.js Date Time Picker Example</h3>
    <input type="time" v-model="selectedTime"><br>
​
    <p class="chip" v-if="selectedTime">{{ selectedTime}}</p>
​
  </div>
​
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedTime: ''
        };
      }
    });
    app.mount('#app');
  </script>
​
  <style>
    #app {
      text-align: center;
      padding: 20px;
    }
​
    h3 {
      font-size: 24px;
      margin-bottom: 20px;
    }
​
    input[type="time"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 10px;
      outline-color: #007bff;
      /* Add outline color here */
    }
​
    input[type="time"]:focus {
      outline-color: #007bff;
      /* Set the same color for the focus state */
    }
​
    .chips {
      margin-top: 10px;
    }
   .chip {
      display: inline-block;
      /* Ensures chips appear in a single line */
      background-color: #f0f0f0;
      color: #333;
      border-radius: 4px;
      padding: 6px 12px;
      font-size: 14px;
      margin-right: 6px;
      margin-bottom: 6px;
      transition: background-color 0.3s ease;
      /* Adds smooth hover effect */
      cursor: pointer;
      /* Makes the chip cursor interactive */
      user-select: none;
      /* Prevents text selection */
      overflow: hidden;
      /* Hides any overflow text */
      white-space: nowrap;
      /* Prevents text wrapping */
    }
​
    .chip:hover {
      background-color: #ddd;
      /* Changes background color on hover */
    }
​
    .chip:focus {
      outline: none;
      /* Removes the default focus outline */
      box-shadow: 0 0 0 2px #333;
      /* Adds a focus border */
    }
​
    .chip span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
​
    .chip span img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 8px;
    }
​
    .chip span span {
      font-size: 16px;
    }
  </style>
</body>
​
</html>