原生js点击input弹出时间选择器

已于 2025-06-27 13:39:59 修改
阅读量526 收藏 13
点赞数 12
CC 4.0 BY-SA版权
文章标签： css 前端 javascript
于 2025-06-03 15:58:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148403520

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js点击input弹出时间选择器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        .date-input {
            padding: 10px 15px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
            text-align: center;
            cursor: pointer;
        }
        .date-input:focus {
            outline: none;
            border-color: #4CAF50;
        }
        .date-picker {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: none;
        }
        .date-picker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .date-picker-title {
            font-weight: bold;
        }
        .date-picker-nav {
            display: flex;
            gap: 10px;
        }
        .date-picker-nav button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .date-picker-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            margin-bottom: 5px;
        }
        .date-picker-weekday {
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            color: #666;
        }
        .date-picker-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        .date-picker-day {
            padding: 5px;
            text-align: center;
            cursor: pointer;
            border-radius: 3px;
        }
        .date-picker-day:hover {
            background-color: #f0f0f0;
        }
        .date-picker-day.selected {
            background-color: #4CAF50;
            color: white;
        }
        .date-picker-day.other-month {
            color: #ccc;
        }
        .date-picker-day.today {
            font-weight: bold;
            color: #4CAF50;
        }
   
    </style>
</head>
<body>
    <div class="container">
        <h1>Date Picker Demo</h1>
        <input type="text" class="date-input" id="dateInput" readonly placeholder="Select a date">
        
        <div class="date-picker" id="datePicker">
            <div class="date-picker-header">
                <div class="date-picker-title" id="datePickerTitle">June 2023</div>
                <div class="date-picker-nav">
                    <button id="prevMonth">&lt;</button>
                    <button id="nextMonth">&gt;</button>
                </div>
            </div>
            <div class="date-picker-weekdays">
                <div class="date-picker-weekday">Sun</div>
                <div class="date-picker-weekday">Mon</div>
                <div class="date-picker-weekday">Tue</div>
                <div class="date-picker-weekday">Wed</div>
                <div class="date-picker-weekday">Thu</div>
                <div class="date-picker-weekday">Fri</div>
                <div class="date-picker-weekday">Sat</div>
            </div>
            <div class="date-picker-days" id="datePickerDays"></div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dateInput = document.getElementById('dateInput');
            const datePicker = document.getElementById('datePicker');
            const datePickerTitle = document.getElementById('datePickerTitle');
            const datePickerDays = document.getElementById('datePickerDays');
            const prevMonthBtn = document.getElementById('prevMonth');
            const nextMonthBtn = document.getElementById('nextMonth');
            
            let currentDate = new Date();
            let selectedDate = null;
            
            // Initialize the date picker
            renderCalendar(currentDate);
            
            // Show date picker when input is clicked
            dateInput.addEventListener('click', function(e) {
                e.stopPropagation();
                positionDatePicker();
                datePicker.style.display = 'block';
            });
            
            // Hide date picker when clicking outside
            document.addEventListener('click', function() {
                datePicker.style.display = 'none';
            });
            
            // Prevent date picker from closing when clicking inside it
            datePicker.addEventListener('click', function(e) {
                e.stopPropagation();
            });
            
            // Navigation buttons
            prevMonthBtn.addEventListener('click', function() {
                currentDate.setMonth(currentDate.getMonth() - 1);
                renderCalendar(currentDate);
            });
            
            nextMonthBtn.addEventListener('click', function() {
                currentDate.setMonth(currentDate.getMonth() + 1);
                renderCalendar(currentDate);
            });
            
            // Position the date picker below the input
            function positionDatePicker() {
                const inputRect = dateInput.getBoundingClientRect();
                datePicker.style.top = (inputRect.bottom + window.scrollY + 5) + 'px';
                datePicker.style.left = (inputRect.left + window.scrollX) + 'px';
            }
            
            // Render the calendar for the given month
            function renderCalendar(date) {
                const year = date.getFullYear();
                const month = date.getMonth();
                
                // Update the title
                datePickerTitle.textContent = new Intl.DateTimeFormat('en-US', { 
                    month: 'long', 
                    year: 'numeric' 
                }).format(date);
                
                // Clear previous days
                datePickerDays.innerHTML = '';
                
                // Get first day of month and last day of month
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                
                // Get days from previous month to show
                const prevMonthDays = firstDay.getDay();
                
                // Get days from next month to show
                const nextMonthDays = 6 - lastDay.getDay();
                
                // Get total days to show (prev + current + next)
                const totalDays = prevMonthDays + lastDay.getDate() + nextMonthDays;
                
                // Create day elements
                for (let i = 0; i < totalDays; i++) {
                    const dayElement = document.createElement('div');
                    dayElement.classList.add('date-picker-day');
                    
                    let day, isCurrentMonth, isToday, isSelected;
                    
                    if (i < prevMonthDays) {
                        // Previous month
                        const prevDate = new Date(year, month, 0);
                        prevDate.setDate(prevDate.getDate() - (prevMonthDays - i - 1));
                        day = prevDate.getDate();
                        isCurrentMonth = false;
                        dayElement.classList.add('other-month');
                    } else if (i >= prevMonthDays && i < prevMonthDays + lastDay.getDate()) {
                        // Current month
                        day = i - prevMonthDays + 1;
                        isCurrentMonth = true;
                        
                        // Check if today
                        const today = new Date();
                        isToday = day === today.getDate() && 
                                  month === today.getMonth() && 
                                  year === today.getFullYear();
                                  
                        if (isToday) {
                            dayElement.classList.add('today');
                        }
                        
                        // Check if selected
                        if (selectedDate) {
                            isSelected = day === selectedDate.getDate() && 
                                         month === selectedDate.getMonth() && 
                                         year === selectedDate.getFullYear();
                                         
                            if (isSelected) {
                                dayElement.classList.add('selected');
                            }
                        }
                    } else {
                        // Next month
                        const nextDate = new Date(year, month + 1, 1);
                        nextDate.setDate(i - prevMonthDays - lastDay.getDate() + 1);
                        day = nextDate.getDate();
                        isCurrentMonth = false;
                        dayElement.classList.add('other-month');
                    }
                    
                    dayElement.textContent = day;
                    
                    if (isCurrentMonth) {
                        dayElement.addEventListener('click', function() {
                            // Update selected date
                            selectedDate = new Date(year, month, day);
                            
                            // Update input value
                            dateInput.value = new Intl.DateTimeFormat('en-US', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit'
                            }).format(selectedDate);
                            
                            // Re-render calendar to show selection
                            renderCalendar(currentDate);
                            
                            // Hide the picker
                            datePicker.style.display = 'none';
                        });
                    }
                    
                    datePickerDays.appendChild(dayElement);
                }
            }
            
            // Handle window resize
            window.addEventListener('resize', function() {
                if (datePicker.style.display === 'block') {
                    positionDatePicker();
                }
            });
        });
    </script>
</body>
</html>

ziblog
关注
js时间选择器
07-27
NULL 博文链接：https://caleb-520.iteye.com/blog/689684
JS时间选择器
10-26
JS实现的时间选择器，用于web页面中时间的选择，简单易用
js时间选择器(HH24:mi:ss)
06-17
较好的时间控件，共同分享,js +xlst+xml
JS时间选择器（非日期选择器）
08-30
JS时间选择器，可以选择时分秒，使用简单，只需引用JS文件，并在指定的文本框地方设置调用函数即可
原生js时间选择器点击input弹出时间选择器代码.zip
最新发布
11-23
开发者通过在HTML中设置一个input元素，当用户点击这个input元素时，showdate.js中的JavaScript代码会被触发，执行弹出时间选择器的操作。 具体实现时间选择器时，可能会涉及到以下几个关键点： 1. 创建时间选择器...
点击input，弹出日期选择框
06-06
总的来说，实现“点击input，弹出日期选择框”的功能涉及HTML和JavaScript的结合使用，通过`input`元素的`type="date"`属性以及适当的事件处理来创建交互式日期选择器。在实际项目中，还应考虑兼容性、用户体验和...
JS日期时间选择器，js原生，任何地方可用
05-21
本文将深入探讨如何使用JavaScript原生代码创建一个可复用的日期时间选择器，并结合给定的文件名来理解其组成部分。 首先，"dol-datepicker.js" 文件很可能是这个日期时间选择器的主要实现部分，它包含了JavaScript...
原生js日期控件带时分秒点击text文本框选择日期时分秒
12-04
在这个场景下，`input`文本框结合原生JS可以实现一个自定义的日期时间选择器，以满足用户对精确到时分秒的选取。 首先，我们需要一个`<input>`元素，类型设置为`text`，并可能添加`id`和`placeholder`属性以供后续...
使用trigger方式实现不用点击file类型的input弹出文件选择对话框
09-28
然而，在某些情况下，我们可能希望在用户不直接点击file类型的input时触发文件选择对话框。这篇文章将探讨如何使用JavaScript和trigger方法来实现这一点。 首先，需要说明的是，在原生JavaScript中并没有一个名为...
Js日期时间选择器
08-06
一个js日期和时间选择器，支持精确到毫秒的时间选择 http://blog.youkuaiyun.com/yanwushu/article/details/38401749 效果预览 http://www.helloweba.com/demo/timepicker/
js 时间选择器 日期选择器
11-27
js 时间选择器 js 时间选择器 js 时间选择器日期选择器
移动端js时间选择器
12-28
datepicker:一个适合移动端的时间选择器. html,js 时间选择器
js日期时间选择器代码
06-24
js日期时间选择器代码是一款日期时间下拉框框组件，支持年月日、时钟、时间选择代码。
js时分秒选择器
05-10
js时分秒选择器，写的还不错的，推荐大家使用
JS日期时间选择器
热门推荐
yanwushu的博客
08-06 2万+
本文介绍一种日期和时间选择器的用法。此选择器由jqueryUI实现，支持精确到毫秒的时间选择。此选择器项目地址为http://trentrichardson.com/examples/timepicker/ Demo地址为：http://www.helloweba.com/demo/timepicker/ 效果图 另外关于js时间选择器还可以参考其他项目 http://www.
简单的js时间选择器，javascript时间选择器
iteye_17200的博客
07-28 483
简单的js时间选择器，javascript时间选择器 网上全是js的日历控件，没有找到好的时间控件，今天找到了一个就分享给大家！二次转web开发网（http://www.webkaifa.com） setTime.js内容如下： /**//*********************************** * 简单时间控件： version 1.0 * 作者：李禄燊 * 时间...
JS - 实现时间选择器
技术共享，共同进步！
12-24 6532
JS实现时间选择器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值