js原生完成日历选择器

最新推荐文章于 2024-06-10 22:52:06 发布
最新推荐文章于 2024-06-10 22:52:06 发布
阅读量492 收藏 9
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48813932/article/details/135494922
版权

html:

<div class="ivu-date-picker">
                                                <div class="ivu-date-picker-rel">
                                                    <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-date-picker-editor">
                                                        <span class="ivu-input-suffix">
                                                            <i id="input_icon" class="ivu-icon ivu-icon-ios-close-circle"></i>
                                                            <!-- <i class="ivu-icon ivu-icon-ios-close-circle"></i> -->
                                                        </span>
                                                        <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                                                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请选择日期" class="ivu-input ivu-input-default ivu-input-with-suffix">

                                                    </div>
                                                </div>
                                                <div class="ivu-select-dropdown" style="">
                                                    <div>
                                                        <div class="ivu-picker-panel-body-wrapper" steps="">
                                                            <div class="ivu-picker-panel-body">
                                                                <div class="ivu-date-picker-header">
                                                                    <span id="year_prev" class="ivu-picker-panel-icon-btn ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-back"></i>
                                                                    </span>
                                                                    <span id="month_prev" class="ivu-picker-panel-icon-btn  ivu-date-picker-prev-btn ivu-date-picker-prev-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-back"></i></span>
                                                                    <span>
                                                                        <span class="ivu-date-picker-header-label" id="date_year">2024年</span>
                                                                        <span class="ivu-date-picker-header-label" id="date_month">01月</span></span>
                                                                    <span id="year_next" class="ivu-picker-panel-icon-btn  ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow-double"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                                                                    </span>
                                                                    <span id="month_next" class="ivu-picker-panel-icon-btn ivu-date-picker-next-btn ivu-date-picker-next-btn-arrow"><i class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                                                                    </span>
                                                                </div>
                                                                <div class="ivu-picker-panel-content">
                                                                    <div class="ivu-date-picker-cells">
                                                                        <div class="ivu-date-picker-cells-header">
                                                                            <span>
                                                                                日
                                                                            </span><span>
                                                                                一
                                                                            </span><span>
                                                                                二
                                                                            </span><span>
                                                                                三
                                                                            </span><span>
                                                                                四
                                                                            </span><span>
                                                                                五
                                                                            </span><span>
                                                                                六
                                                                            </span>
                                                                        </div>
                                                                        <div id="Calendar_body" class="date_picket_body"><span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell"><em> 11 </em></span> <span class="ivu-date-picker-cells-cell"><em> 12 </em></span> <span class="ivu-date-picker-cells-cell"><em> 13 </em></span> <span class="ivu-date-picker-cells-cell"><em> 14 </em></span> <span class="ivu-date-picker-cells-cell"><em> 15 </em></span> <span class="ivu-date-picker-cells-cell"><em> 16 </em></span> <span class="ivu-date-picker-cells-cell"><em> 17 </em></span> <span class="ivu-date-picker-cells-cell"><em> 18 </em></span> <span class="ivu-date-picker-cells-cell"><em> 19 </em></span> <span class="ivu-date-picker-cells-cell"><em> 20 </em></span> <span class="ivu-date-picker-cells-cell"><em> 21 </em></span> <span class="ivu-date-picker-cells-cell"><em> 22 </em></span> <span class="ivu-date-picker-cells-cell"><em> 23 </em></span> <span class="ivu-date-picker-cells-cell"><em> 24 </em></span> <span class="ivu-date-picker-cells-cell"><em> 25 </em></span> <span class="ivu-date-picker-cells-cell"><em> 26 </em></span> <span class="ivu-date-picker-cells-cell"><em> 27 </em></span> <span class="ivu-date-picker-cells-cell"><em> 28 </em></span> <span class="ivu-date-picker-cells-cell"><em> 29 </em></span> <span class="ivu-date-picker-cells-cell"><em> 30 </em></span> <span class="ivu-date-picker-cells-cell"><em> 31 </em></span> <span class="ivu-date-picker-cells-cell"><em> 01 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 02 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 03 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 04 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 05 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 06 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 07 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 08 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 09 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 10 </em></span> <span class="ivu-date-picker-cells-cell ivu-date-picker-cells-cell-next-month"><em> 11 </em></span> </div>
                                                                    </div>

                                                                </div>
                                                                <div class="ivu-picker-panel-content" style="display: none;">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

js:

var $timestampToTime = (timestamp, mm) => {
    var weeks = ["日", "一", "二", "三", "四", "五", "六"],
        time = timestamp.toString().length == 10 ? timestamp * 1000 : timestamp, //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        date = new Date(time),
        Y = date.getFullYear(),
        M =
        date.getMonth() + 1 < 10 ?
        "0" + (date.getMonth() + 1) :
        date.getMonth() + 1,
        D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
        W = date.getDay(),
        H = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
        I = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
        S = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

    return {
        Y,
        M,
        D,
        H,
        I,
        W: weeks[W],
        H_I: H + ":" + I,
        Y_M_D: Y + "-" + M + "-" + D,
        Y_M_D_H_I: Y + "-" + M + "-" + D + " " + H + ":" + I,
        Y_M_D_H_I_S: Y + "-" + M + "-" + D + " " + H + ":" + I + ":" + S,
        sort: mm
    };
}
class DatePicker {

    constructor({
        datePicker,
        input,
        panel
    }) {
        this.currentDate = $timestampToTime(Date.now());
        this.m_arr = this.getMArr(this.currentDate.Y_M_D)
        this.init(this.currentDate.Y_M_D)

        this.bindingThing({
            datePicker,
            panel,
            input
        }) //绑定事件
    }
    //点击当前某天
    changeDay(d) {
        if (d.Y_M_D == this.selectDate.Y_M_D) {
            this.selectDate = {};
            this.parentChangeDay(null)
        } else {
            this.selectDate = this.selectDate;
            this.parentChangeDay(JSON.parse(JSON.stringify(d)))

        }
        this.isCurrentW()
    }

    //上月下月
    changeMonth(Y_M_D, n) {

        this.m_arr = this.getMArr(Y_M_D, n)
        this.init(Y_M_D)
    }
    //获取月份 7*6表格
    getMArr(YYYYMMDD, n = 0) {

        let date = this.countLastMonth(YYYYMMDD.slice(0, 7), n);
        this.days_num = this.getCountDays(date)

        var firstDay_date = new Date(date)
        var firstDayWeekDay = firstDay_date.getDay()
        if (firstDayWeekDay === 0) { //周日
            firstDayWeekDay = 7;
        }
        var prevDays = firstDayWeekDay - 1
        firstDay_date.setDate(firstDay_date.getDate() + 1 - firstDayWeekDay);
        firstDay_date = firstDay_date.toISOString().split('T')[0];
        let start_month_time = Date.parse(firstDay_date);
        var sum_num = 6 * 7;

        // var nums = this.getCountDays(date);

        // let start_month_time = Date.parse(date);
        let arr = [];
        let date_time = 24 * 60 * 60 * 1000;

        //根据当前月的1号的周往前推周一
        for (let i = 0; i < sum_num; i++) {
            var sort = i - prevDays;
            arr.push($timestampToTime(start_month_time + date_time * i, sort));
        }
        return arr;
    }
    // 计算每个月 有几天
    getCountDays(date) {
        let curDate = new Date(date);
        curDate.setDate(32);
        return 32 - curDate.getDate(); // 返回当前月份的天数
    }
    checkMonth(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    //计算上个月的日期
    // month表示当前月份， n表示要向前推移的月份数。
    countLastMonth(month, n) {
        if (n == 0) {
            var changeM = month.slice(5, 7)
            $("#date_month").html(changeM + '月')
            return month + "-" + "01";
        } else {
            let ns = (n = -n);
            let beforeMonth = new Date(month);
            let lastDate = beforeMonth.setMonth(beforeMonth.getMonth() - ns); // 输出日期格式为毫秒形式1551398400000
            lastDate = new Date(lastDate);
            let lastYear = lastDate.getFullYear();
            let lastMonth = this.checkMonth(lastDate.getMonth() + 1); // 因日期中的月份表示为0-11，所以要显示正确的月份，需要 + 1
            $("#date_month").html(lastMonth + '月')
            lastDate = lastYear + "-" + lastMonth + "-" + "01";
            return lastDate;
        }
    }
    //初始化日期
    init(Y_M_D) {
        var arr = this.m_arr
        var year = Y_M_D.slice(0, 4)

        $("#date_year").html(year + '年')

        var {
            currentDate
        } = this
        var html = ''
        arr.map(item => {
            var lableClass = ''
            if (item.sort < 0) {
                lableClass = ' ivu-date-picker-cells-cell-prev-month'

            } else if (item.sort > this.days_num) {
                lableClass = ' ivu-date-picker-cells-cell-next-month'
            } else if (item.Y_M_D == currentDate.Y_M_D) {
                lableClass = ' ivu-date-picker-cells-cell-today ivu-date-picker-cells-focused'
            }

            html += '<span class= "ivu-date-picker-cells-cell' + lableClass + '"><em> ' + item.D + ' </em></span > '
        })

        $("#Calendar_body").html(html)
    }



    bindingThing({
        datePicker,
        panel,
        input
    }) {
        function padZero(number) {
            return number.toString().padStart(2, '0');
        }
        // 隐藏日期选择面板
        panel.hide();

        // 点击日期输入框时显示日期选择面板
        input.on('click', function () {
            panel.show();
        });
        //聚焦
        input.focus(function () {
            $("#input_icon").addClass("ivu-icon-ios-calendar-outline").removeClass("ivu-icon-ios-close-circle")

        });
        input.blur(function () {
            $("#input_icon").removeClass("ivu-icon-ios-calendar-outline").addClass("ivu-icon-ios-close-circle")

        });


        // 点击日期选择面板之外的区域时隐藏日期选择面板
        $(document).on('click', function (event) {

            if (!$(event.target).closest(datePicker).length) {
                panel.hide();
            }
        });

        panel.on('click', '.ivu-date-picker-cells-cell', function () {
            var year = panel.find('#date_year').text().split("年")[0];
            var month = panel.find('#date_month').text().split("月")[0];
            var day = $(this).text().replace(/\s/g, "");
            var selclass = "ivu-date-picker-cells-cell-selected ivu-date-picker-cells-focused"
            $(this).addClass(selclass).siblings().removeClass(selclass)
            // 格式化日期
            var date = year + '-' + month + '-' + day;
            input.val(date);
            panel.hide();
        });

        // 点击上一个月按钮
        panel.on('click', '#month_prev', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, -1)
        });

        // 点击下一个月按钮
        panel.on('click', '#month_next', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, 1)

        });

        //上一年 
        panel.on('click', '#year_prev', () => {

            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            year = year - 1;
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            this.changeMonth(Y_M_D, 0)


        });
        //下一年 
        panel.on('click', '#year_next', () => {
            // 获取当前显示的年份和月份
            var year = parseInt($('#date_year').text());
            var month = padZero(parseInt(panel.find('#date_month').text()));
            year = year + 1;
            var Y_M_D = String(year) + "-" + String(month) + "-" + "01";
            console.log(Y_M_D, "下一年");
            this.changeMonth(Y_M_D, 0)




        });

        datePicker.on('click', '.ivu-icon.ivu-icon-ios-close-circle', () => {

            input.val("")
            // 隐藏日期选择面板
            panel.hide();
            this.m_arr = this.getMArr(this.currentDate.Y_M_D)
            this.init(this.currentDate.Y_M_D)
        })
    }
}
$(document).ready(function () {
    //日期选择器处理
    // 获取日期选择器元素
    var datePicker = $('.ivu-date-picker');

    // 获取日期输入框元素
    var input = datePicker.find('input');

    // 获取日期选择面板元素
    var panel = datePicker.find('.ivu-select-dropdown');



    var datePickerObj = new DatePicker({
        datePicker,
        panel,
        input
    })
}

结果：

悠悠~飘
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html时间选择器时分秒,原生js日历日期控件带时分秒日期选择器
weixin_31515619的博客
06-03 2003
特效描述：原生js日历日期 时分秒日期选择器。时分秒日期选择代码结构1. 引入JS2. HTML代码【注意事项】一、请千万勿移动laydate中的目录结构，它们具有完整的依赖体系。使用时，只需引入laydate/laydate.js即可。二、如果您的网站的js采用合并或模块加载，您需要打开laydate.js，修改path。演示二(普通模式)演示一(日期精确到秒)演示三(日期范围限制)开始日：结束...
原生js实现移动端时间滑动选择器
xiao_chen00012的博客
08-18 3383
boss上遇到一个HR要求写一个移动端的招聘界面，发现这个时间滑动选择器好像确实没有多少人做，不知道是直接用插件还是咋的，反正练习一下自己手写了一下，具体效果图如上。以上为本篇文章的内容，小弟自学半年，希望得到大佬的指点！最后考虑到每个月的长度不同，计算并设置了一下，以下为js代码。opt类内是用嵌套放入内容。再后面加入js代码，实现选项的获取。以下是css+html片段。...
实现一个简单的JavaScript日期选择器
geng1025的博客
01-05 1669
通过实现一个简单的日期选择器，我们学习了如何在Web开发中使用JavaScript的Date对象处理日期。在这个过程中，我们不仅掌握了基础的DOM操作和事件监听，还体验了从无到有创建用户界面的乐趣。这个过程也让我意识到，有时候过于依赖第三方库可能会限制我们的思维和创新能力。自己动手实现一些基础功能不仅可以提高我们的技术水平，还可以培养我们解决问题的能力。在未来的Web开发中，我会更加注重这种能力的培养，以便在面对各种挑战时能够更加从容地应对。
原生js实现日期选择器插件
weixin_33809981的博客
08-12 2224
原生js实现日期选择器插件 前言 距离自己上次写插件差不多半年了。公司技术栈都是用框架，调解下口味就写了此原生插件。因为本意是想兼容到ie9就不用es6语法写了。前段时间在看vue源码受了点启发，本插件有点接近数据驱动视图更新的响应式渲染。如果希望有更多功能的，可在下方留言，我尽量扩展！如果你有需要或者喜欢的话，可以给我github来个s...
原生js日历选择器插件开发实例教程
蒋伟平的博客
03-05 1373
在web开发过程中经常会碰到需要选择日期的功能，一般的操作都是在文本框点击，然后弹出日历选择框，直接选择日期就可以在文本框显示选择的日期。开发好之后给用户使用是很方便，但如果每一个日历选择器都要临时开发的话，会严重影响项目进度。所以网上有很多日历插件提供下载使用。 在实际工作中，日历选择器功能确实都是直接使用已开发好的插件。但作为一个前端工程师，还是需要知道具体实例方法，也应该有能力完成此类功能。本实例教程详细讲解怎么样使用原生js，通过面向对象来开发一个日历选择器插件。 一般日历插件使用都非常简单，只需要
js和html写时间选择器,一款原生JS编写的文本框输入日历日期选择器JS控件
weixin_42363600的博客
06-03 593
日历 - 插件 演示 by 阿里西西特效 js.alixixi.com* {padding:0;margin:0;font-size:12px;}.fl {float:left}.fr {float:right}.dn {display:none}/*日历 begin*/.data_box {width:260px; }.showDate {width:24...
原生js实现日期选择器插件 简单风格日期选择插件
qq_45830796的博客
05-17 3476
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介 通过原生HTML/CSS/JavaScript完成一个日期选择器。 代码如下： ** <!-- 时间：2022-5-17 作者：小宋同学的云 标题：原生js实现日期选择器插件 简单风格日期选择插件 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="
js原生实现pc端日历组件
qq_23128255的博客
05-19 1644
原生js实现日历组件，不依赖其他插件
用 Vue 实现原生日期选择器
Dreamy_LIN的博客
01-03 5365
效果：
原生js日历选择器插件.rar
03-05
原生js日历选择器插件.rar
原生js日历日期控件带时分秒日期选择器
06-01
原生js日历日期控件带时分秒日期选择器
多样式js日历控件选择器代码
06-24
多样式js日历控件选择器代码是一款原生js制作的年月日时间选择器代码。
原生js layDate日历控件多款日历选择器样式代码下载
11-10
原生js layDate日历控件多款日历选择器样式代码下载 原生js layDate日历控件多款日历选择器样式代码下载 原生js layDate日历控件多款日历选择器样式代码下载
原生js带时间日历选择器插件
10-27
原生js带时间日历选择器插件
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 529
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 370
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1339
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1250
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
app时间选择器原生js
05-21
以下是一个简单的原生 JavaScript 时间选择器示例： HTML 代码： ``` 请选择时间： ``` JavaScript 代码： ```javascript var timeInput = document.getElementById("time"); timeInput.addEventListener(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值