<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Picker with Swiper JS</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<style>
.time-picker {
display: flex;
justify-content: center;
align-items: center;
gap: 20px; /* Spacing between swipers */
}
.swiper-container {
height: 250px;
width: 80px;
overflow: hidden; /* Hide overflowed slides */
}
.swiper-slide {
display: flex;
height: 50px; /* Adjust the height to match the Swiper container's height divided by slidesPerView */
justify-content: center;
align-items: center;
font-size: 20px;
opacity: 0.5; /* Lower opacity for non-active slides */
user-select: none; /* Prevent text selection */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
/* Active slide has a different style */
.swiper-slide-active {
opacity: 1; /* Full opacity for the active slide */
font-size: 36px; /* Larger font size for the active slide */
color: #333;
border-top: 1px solid grey; /* Border only on top */
border-bottom: 1px solid grey; /* Border only on bottom */
}
/* Additional styles for the popup */
.time-picker-popup {
display: none; /* Hide the popup initially */
position: absolute;
background: white;
border: 1px solid #ddd;
z-index: 10;
padding: 10px;
border-radius: 5px;
}
/* Show the popup when it has the 'active' class */
.time-picker-popup.active {
display: flex;
}
/* Style for the input field */
.timeInput {
margin-bottom: 20px;
cursor: pointer;
display: block; /* Make input fields stack vertically */
}
/* Style for the done button */
#doneButton {
margin-top: 10px;
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}
#doneButton:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<a href="https://codepen.io/ldijkman/pen/ExMoOgy" id="popupLink" target="_blank">codepen</a><br>
<a href="https://plnkr.co/edit/isf9Pzc057i7kRAb" id="popupLink" target="_blank">plunker</a><br>
<br>
<script>
// Function to open a new popup window
function openPopupWindow(url, windowName, width, height) {
// Calculate the position of the popup to be centered on the screen
const left = (screen.width / 2) - (width / 2);
const top = (screen.height / 2) - (height / 2);
// Open the new popup window
window.open(url, windowName, `width=${width},height=${height},left=${left},top=${top}`);
}
// Event listener for your link (assuming you have a link with an ID of 'popupLink')
document.getElementById('popupLink').addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
const url = this.href; // Get the URL from the link's href attribute
openPopupWindow(url, 'PopupWindow', 400, 300); // Open the popup window with specified width and height
});
</script>
strange cannot find a good html css javascript wheel reel time picker that works good on pc and phone tablet<br>
made with chat gpt4<br>
but gpt4 is a bit much lazy, and leaves bits of code on every new question<br><br>
not as smooth as android wheel reel time picker<br>
<br>
mouse or touch drag and (toooo slow) mouse scroll wheel<br>
<br>
<!-- Multiple Input fields for the time picker -->
<input type="text" class="timeInput" placeholder="Select Time" readonly> <!-- readonly keeps keyboard hidden on phone -->
<input type="text" class="timeInput" placeholder="Select Time" readonly>
<input type="text" class="timeInput" placeholder="Select Time" readonly>
<!-- Time Picker Popup Container -->
<div class="time-picker-popup" id="timePickerPopup">
<!-- Time Picker Container -->
<div class="time-picker">
<!-- Swiper for hours -->
<div class="swiper-container hour-swiper">
<div class="swiper-wrapper" id="hourWrapper"></div>
</div>
<!-- Swiper for minutes -->
<div class="swiper-container minute-swiper">
<div class="swiper-wrapper" id="minuteWrapper"></div>
</div>
</div>
<!-- Done Button -->
<button id="doneButton" type="button">Done</button>
</div>
<br><br>
made for visual time slots time segments<br>
Visual TimeSlots Made with loads of questions to a Lazy Chat GPT4,<br><br>
<a href="#" onclick="openInPopup('https://plnkr.co/edit/ikOuTjDZvqbPR5jr?preview'); return false;">Plunker Preview</a><br>
<a href="#" onclick="openInPopup('https://codepen.io/ldijkman/full/LYaOgvW'); return false;">CodePen Preview</a><br>
<br>
<script>
function openInPopup(url) {
window.open(url, 'popupWindow', 'width=800, height=600, left=100, top=100, resizable=yes, scrollbars=yes, toolbar=yes, menubar=no, location=no, directories=no, status=yes');
}
</script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<script>
// Function to create Swiper slides
function createSwiperSlides(elementId, start, end, step = 1) {
const wrapper = document.getElementById(elementId);
// Add additional slides to the beginning for a smoother start
for (let i = start ; i <= end ; i += step) {
const slide = document.createElement('div');
slide.className = 'swiper-slide';
// Use modulo to create a loop effect
const displayValue = (i + 60) % 60; // Adjust for negative values
slide.textContent = displayValue.toString().padStart(2, '0');
wrapper.appendChild(slide);
}
}
// Create hour and minute slides
createSwiperSlides('hourWrapper', 0, 23);
createSwiperSlides('minuteWrapper', 0, 59);
// Declare Swiper instances
let hourSwiper, minuteSwiper;
// Initialize hour swiper with mousewheel control
hourSwiper = new Swiper('.hour-swiper', {
direction: 'vertical',
loop: true,
slidesPerView: 5,
centeredSlides: true,
spaceBetween: -10,
speed: 100,
touchRatio: 2, // Increase this number to move more per drag
mousewheel: {
control: true, // Enable natural scrolling with mousewheel
releaseOnEdges: true // Prevent unwanted swiping on edges
}
});
// Initialize minute swiper with mousewheel control
minuteSwiper = new Swiper('.minute-swiper', {
direction: 'vertical',
loop: true,
slidesPerView: 5,
centeredSlides: true,
spaceBetween: -10,
speed: 100,
touchRatio: 2, // Increase this number to move more per drag
mousewheel: {
forceToAxis: true,
sensitivity: 50, // Increase this number to move more per drag pixel
releaseOnEdges: true
}
});
let currentInput = null; // Keep a reference to the currently focused input
function updateSelectedTime() {
// Access the active slides directly
const selectedHour = hourSwiper.slides[hourSwiper.activeIndex].textContent;
const selectedMinute = minuteSwiper.slides[minuteSwiper.activeIndex].textContent;
if (currentInput) {
currentInput.value = `${selectedHour}:${selectedMinute}`;
// Find the index of the current input among all elements with the 'timeInput' class
const inputIndex = Array.from(document.querySelectorAll('.timeInput')).findIndex(input => input === currentInput);
// Echo the current input value and the index of the input field
//console.info('Time updated to:', currentInput.value, 'for input field at index:', inputIndex);
}
}
// Function to parse time and set Swiper sliders
function setTimeInSwiper(inputTime) {
let hour = 0;
let minute = 0;
// Check if input time is valid
if (inputTime && inputTime.includes(':')) {
const parts = inputTime.split(':');
hour = parseInt(parts[0], 10);
minute = parseInt(parts[1], 10);
}
// Set Swiper to the corresponding hour and minute
hourSwiper.slideToLoop(hour , 0, false);
minuteSwiper.slideToLoop(minute, 0, false);
}
// Function to show and hide the time picker
function showTimePicker() {
document.getElementById('timePickerPopup').classList.add('active');
}
function hideTimePicker() {
document.getElementById('timePickerPopup').classList.remove('active');
}
// Function to position the popup below the input field
function positionTimePicker(inputField) {
const popup = document.getElementById('timePickerPopup');
const rect = inputField.getBoundingClientRect();
popup.style.top = `${rect.bottom + window.scrollY}px`;
popup.style.left = `${rect.left + window.scrollX}px`;
}
// Set up event listeners for input fields
document.querySelectorAll('.timeInput').forEach(input => {
input.addEventListener('focus', function() {
currentInput = input; // Set the current input
positionTimePicker(input);
setTimeInSwiper(input.value); // Set the time in the swiper based on input value
showTimePicker();
});
});
// Add click event listener for the "Done" button
document.getElementById('doneButton').addEventListener('click', function() {
if (currentInput) {
const inputIndex = Array.from(document.querySelectorAll('.timeInput')).findIndex(input => input === currentInput);
console.info('Time updated to:', currentInput.value, 'for input field at index:', inputIndex);
hideTimePicker();
currentInput = null; // Clear the current input reference
console.info('You are Great, Well Done!');
}
});
// Listen to slide change events on both swipers
hourSwiper.on('slideChange', () => updateSelectedTime());
minuteSwiper.on('slideChange', () => updateSelectedTime());
</script>
<script src="https://ldijkman.github.io/Ace_Seventh_Heaven/console.js"></script>
</body>
</html>