JS时间选择器（当天已过去的时间不可选择）

最新推荐文章于 2023-03-08 23:34:52 发布

hy3528

最新推荐文章于 2023-03-08 23:34:52 发布

阅读量1.6k

点赞数

分类专栏： JQuery JavaScript

本文链接：https://blog.csdn.net/hy3528/article/details/103736839

版权

JavaScript 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <link href="__PUBLIC__/css/weixin/cart/orderindex.css" rel="stylesheet" type="text/css" /> -->
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js2.0/HfPoints/v1/HfPoints.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://at.alicdn.com/t/font_bar8ih9wy9rltyb9.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/region/region.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日期时间选择器</title>
    <style>
    html{
        touch-action: none;
    }
    </style>
</head>

<body>
    <input type="text" id="mentdate" placeholder="请选择日期">
    <div id="apptime">
        <input type="text" id="menttime" placeholder="请选择时间">
    </div>
    
    <input type="hidden" name="nowtime" id="nowtime">
</body>
<script>
    $(function () {
        var list = [
            '06:00-07:00', '07:00-08:00', '08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00', '17:00-18:00'
        ]
        //日历选择
        var datelist = []
        var minDate = new Date(new Date().setDate(new Date().getDate() - 1)).format("yyyy-MM-dd");
        var maxDate = new Date(new Date().setDate(new Date().getDate() + 2)).format("yyyy-MM-dd");
        var nowtime = new Date().format("yyyy-MM-dd hh:mm:ss");
        var expiretime = nowtime.substring(11, 16);
        console.log(maxDate)
        console.log(nowtime)
        console.log(expiretime)
        $("#nowtime").val(nowtime);
        $("#mentdate").calendar({
            title: '预约日期',
            minDate: minDate,
            maxDate: maxDate,
            dateFormat: 'yyyy-mm-dd',
            closeByOutsideClick: true,
            onChange: function (picker, values, displayValues) {

                if (values[0] == '') {
                    $.alert('请选择预约日期');
                }
                $("#mentdate").val(values)
                var today = $("#mentdate").val()
                console.log(today)
                // book_date=today
                var nowdate = $("#nowtime").val().substring(0, 10);
                var expiretime = $("#nowtime").val().substring(11, 16);
                // console.log(today)
                //时间选择

                //日历选择end
                //选择今天时
                if (today == nowdate) {
                    datelist = []
                    for (let i in list) {
                        if (expiretime < list[i].substring(0, 5)) {
                            datelist.push(list[i])
                            $('#apptime').html(`<input type="text" id="menttime" placeholder="请选择时间">`)
                            console.log("1111111111===>", datelist)
                            $("#menttime").picker({
                                title: "请选择时间",
                                cols: [
                                    {
                                        textAlign: 'center',
                                        values: datelist
                                    }
                                ],
                            })
                        } else {
                            $('#apptime').html(`<input type="text" id="menttime" placeholder="请选择时间">`)
                            datelist = []
                            $("#menttime").picker({
                                title: "请选择时间",
                                cols: [
                                    {
                                        textAlign: 'center',
                                        values: datelist
                                    }
                                ],
                            })
                        }
                    }

                }
                //选择不是今天时
                else if (today != nowdate) {
                    datelist = []
                    $('#apptime').html(`<input type="text" id="menttime" placeholder="请选择时间">`)
                    console.log("1111111", list[0])
                    for (let i in list) {
                        datelist.push(list[i])
                    }


                    console.log("---------------", datelist)
                    $("#menttime").picker({
                        title: "请选择时间",
                        cols: [
                            {
                                textAlign: 'center',
                                values: datelist
                            }
                        ],
                    })
                }
            }

        })


    })
    //格式化日期
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份 
            "d+": this.getDate(),                    //日 
            "h+": this.getHours(),                   //小时 
            "m+": this.getMinutes(),                 //分 
            "s+": this.getSeconds(),                 //秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }
</script>

</html>

hy3528

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS时间选择器（当天已过去的时间不可选择）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- <link href="__PUBLIC__/css/weixin/cart/orderindex.css" rel="stylesheet" type="text/css" />...
复制链接

扫一扫