王多静

这里是我的记事本

导航

js和uniapp获取今天的当前时间和以后半小时, 文本框的日期和时间联动, 时间半小时为阶段

需求:

1. 日期的前三天是今天,明天, 后天, 其他日期按年月日是正常显示;

2. 时间是半小时一个刻度, 每天是9:00-18:00可以约时间, 但是注意: 今天的时间排列要特别计算, 当前时间只能约下一个时间段以后的时间

    如下图一个是jq的demo, 一个是uniapp小程序的picker, 时间紧有点啰嗦

  

 

 jq写法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>日期</title>
    </head>
    <body>
        <div style="width: 90%;margin: 0 auto;">
            <select id="dates">
                <!-- <option value="volvo">选择</option> -->
            </select>
            <br>
            <select id="times">
                <!-- <option value="volvo">选择</option> -->
            </select>

        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.js"></script>
        <script>
            // .......日期..........
            let nowTime = new Date();
            // var totalDay = mGetDate(2022, 2); // 29
            var nowYear = nowTime.getFullYear();
            var year = [nowYear, nowYear + 1];
            var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            // 所有日期的数组
            var dayArr = [];
            // 今天的日期
            var currentDay = "";
            // 明年的今天
            var nextDate = "";
            // 时间默认的值
            let defaultTime = [
                "09:00",
                "09:30",
                "10:00",
                "10:30",
                "11:00",
                "11:30",
                "12:00",
                "12:30",
                "13:00",
                "13:30",
                "14:00",
                "14:30",
                "15:00",
                "15:30",
                "16:00",
                "16:30",
                "17:00",
                "17:30",
                "18:00"
            ]
            // 当前的时间组
            let timeArr = []

            // 获取今天的日期
            function getNowFormatDate() {
                let date = new Date(),
                    year = date.getFullYear(), //获取完整的年份(4位)
                    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
                    strDate = date.getDate() // 获取当前日(1-31)
                // if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
                // if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0

                let currentDate = year + "年" + month + "月" + strDate + "日";
                return currentDate
            }


            // 获取明年?今天的日期
            function getNextFormatDate() {
                let date = new Date(),
                    year = date.getFullYear() + 1, //获取完整的年份(4位)
                    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
                    strDate = date.getDate() // 获取当前日(1-31)
                // if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
                // if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0

                let nextDate = year + "年" + month + "月" + strDate + "日";
                return nextDate
            }

            // 获取当前月的天数
            function mGetDate(year, month) {
                var d = new Date(year, month, 0);
                return d.getDate();
            }

            // 获取所有的天数
            function allDay() {

                for (var m = 0; m < year.length; m++) {
                    var tempYear = year[m]
                    for (var n = 0; n < month.length; n++) {
                        var tempMonth = month[n]
                        var days = mGetDate(tempYear, tempMonth)
                        for (var d = 1; d < days; d++) {
                            var tempDay = days[d];
                            dayArr.push(tempYear + "年" + tempMonth + "月" + d + "日")
                        }
                    }
                }

                return dayArr
            }

            // 处理数据,今天到后?明年的今天
            handleDay()

            function handleDay() {
                // 今天
                currentDay = getNowFormatDate();
                // 明年的今天
                nextDate = getNextFormatDate();
                dayArr = allDay();

                let startDayIndex = dayArr.indexOf(currentDay);
                let endDayIndex = dayArr.indexOf(nextDate);
                dayArr = dayArr.slice(startDayIndex, endDayIndex + 1);
                dayArr[0] = dayArr[0] + " 今天";
                dayArr[1] = dayArr[1] + " 明天";
                dayArr[2] = dayArr[2] + " 后天";
                return dayArr
            }
            // console.log(year,month,"??")


            for (var i = 0; i < dayArr.length; i++) {
                var $select = $("#dates");
                $select.append('<option values="' + dayArr[i] + '">' + dayArr[i] + '</option>');
            }




            // ..........时间.............

            // 调用
            formatTodayHalfHours(getNowFormatDate())

            function formatTodayHalfHours(nowDate) {
                timeArr = []
                // 其他天 截取的如果包含天就去掉
                if (nowDate.indexOf("天") > 0) {
                    // nowDate = nowDate.slice()
                    let _index = nowDate.indexOf("天")
                    nowDate = nowDate.slice(0, _index - 2)
                }

                // 判断是不是今天
                if (nowDate == getNowFormatDate()) {
                    let nowDate = new Date()
                    // 如果是今天的小时是几点8:20
                    let nowHours = new Date(nowDate).getHours();
                    let nowMinutes = new Date(nowDate).getMinutes();
                    console.log(nowMinutes)
                    // 。。。。。。。注意 start。。。。。。。。。
                    // TODO 测试时间和分钟 待删
                    nowHours = 1
                    nowMinutes = 31
                    // 。。。。。。。注意 end。。。。。。。。。
                    // 如果是今天9点后17点前
                    if (nowHours >= 9 && nowHours < 17) {
                        let hour = nowHours < 10 ? '0' + nowHours : nowHours;
                        let minute = nowMinutes < 30 ? '30' : '00';
                        // 当前时分
                        let nowHourMinute = hour + ':' + minute;

                        if (nowMinutes > 30 || nowMinutes == 30) {
                            console.log(nowHourMinute, hour)
                            nowHourMinute = hour * 1 + 1 + ':' + minute
                        }

                        if (defaultTime.indexOf(nowHourMinute) > 0) {
                            timeArr = defaultTime
                            let startDayIndex = timeArr.indexOf(nowHourMinute);
                            let endDayIndex = timeArr.length;
                            timeArr = timeArr.slice(startDayIndex, endDayIndex + 1);
                        }
                    } else if (nowHours == 17) {
                        // 如果是17:30之前
                        if (nowMinutes < 30) {
                            timeArr = ["17:30", "18:00"]
                        } else {
                            timeArr = ["18:00"]
                        }


                        //      // 如果是17:30之后
                        //      if (nowMinutes >= 31) {
                        // // 今天大于17:30点 只能约明天
                        //          timeArr = ["今日已无预约时间"]
                        //      }
                    } else if (nowHours >= 18) {
                        // 今天大于18点 只能约明天
                        timeArr = ["今日已无预约时间"]
                    } else if (nowHours < 9) {
                        timeArr = []
                        // 如果是今天9点之前和以后的每一天
                        timeArr = defaultTime
                    }
                } else {
                    timeArr = []
                    // 如果是今天9点之前和以后的每一天
                    timeArr = defaultTime
                }
                return timeArr
            }


            timeHtml();

            function timeHtml() {
                // console.log(timeArr,"值")
                var $select = $("#times");
                $select.html('')
                for (var i = 0; i < timeArr.length; i++) {
                    $select.append('<option values="' + timeArr[i] + '">' + timeArr[i] + '</option>');
                }
            }



            // 选择日期
            $('#dates').change(function() {
                // 调用
                formatTodayHalfHours($('#dates option:selected').val());
                timeHtml();
                // alert("选中的"+$('#dates option:selected').val())
                // console.log(dayArr, "选中日期")
            })

            // 选择时间
            $('#times').change(function() {
                // 调用
                // formatTodayHalfHours($('#times option:selected').val())
                alert("选中的" + $('#times option:selected').val())
                // console.log(dayArr, "选中日期")
            })
        </script>
    </body>
</html>
View Code

 

小程序uniapp写法:

 

  
<uni-forms-item label="预约日期" required name="date">
                    <view class="addText">
                        <picker class="pickClass" :range="dayArr" :value="bookingDateIndex" @change="dateChange">
                            <view class="innerBox">
                                <view>{{dayArr[bookingDateIndex]}}</view>
                                <image src="/static/pull.png" mode="widthFix" class="arrDown"></image>
                            </view>
                        </picker>
                    </view>
                </uni-forms-item>
                <uni-forms-item label="预约时间" required name="date">
                    <view class="addText">
                        <picker class="pickClass" :range="timeArr" :value="bookingTimeIndex" @change="timeChange">
                            <view class="innerBox">
                                <view>{{timeArr[bookingTimeIndex]}}</view>
                                <image src="/static/pull.png" mode="widthFix" class="arrDown"></image>
                            </view>
                        </picker>
                    </view>
                </uni-forms-item>


export default {
        data() {
            return {
                // 当前所选日期下标
                bookingDateIndex: 0,
                // 当前所选时间下标
                bookingTimeIndex: 0,
                // 当前时间
                nowTime: new Date(),
                // 今年是哪年
                nowYear: "",
                // 总共年长
                year: [],
                // 每年几个月
                month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                // 所有日期的数组
                dayArr: [],
                // 今天的日期
                currentDay: "",
                // 明年的今天
                nextDate: "",
                // 时间默认的值
                defaultTime: [
                    "09:00",
                    "09:30",
                    "10:00",
                    "10:30",
                    "11:00",
                    "11:30",
                    "12:00",
                    "12:30",
                    "13:00",
                    "13:30",
                    "14:00",
                    "14:30",
                    "15:00",
                    "15:30",
                    "16:00",
                    "16:30",
                    "17:00",
                    "17:30",
                    "18:00"
                ],
                // 当前的时间组
                timeArr: [],
            },
         onLoad(option) {
            this.nowYear = this.nowTime.getFullYear()
            this.year = [this.nowYear, this.nowYear + 1];
            // 日期
            this.handleDay();

            // 获取当前时间
            this.formatTodayHalfHours(this.getNowFormatDate())
        },
    methods: {    
          // 选择日期
            dateChange(e) {
                // console.log(e.detail.value, this.dayArr[this.bookingDateIndex], "选中日期")
                this.bookingDateIndex = e.detail.value;
                this.bookingTimeIndex = 0;
                this.formatTodayHalfHours(this.dayArr[this.bookingDateIndex])
            },

            // 时间
            formatTodayHalfHours(nowDate) {
                this.timeArr = []
                // 其他天 截取的如果包含天就去掉
                if (nowDate.indexOf("天") > 0) {
                    // nowDate = nowDate.slice()
                    let _index = nowDate.indexOf("天")
                    nowDate = nowDate.slice(0, _index - 2)
                }

                // 判断是不是今天
                if (nowDate == this.getNowFormatDate()) {
                    let nowDate = new Date()
                    // 如果是今天的小时是几点8:20
                    let nowHours = new Date(nowDate).getHours();
                    let nowMinutes = new Date(nowDate).getMinutes();
                    // console.log(nowMinutes)
                    // 测试待删
                    // nowHours = 1
                    // nowMinutes = 31
                    // 如果是今天9点后17点前
                    if (nowHours >= 9 && nowHours < 17) {
                        let hour = nowHours < 10 ? '0' + nowHours : nowHours;
                        let minute = nowMinutes < 30 ? '30' : '00';
                        // 当前时分
                        let nowHourMinute = hour + ':' + minute;

                        if (nowMinutes > 30 || nowMinutes == 30) {
                            // console.log(nowHourMinute, hour)
                            nowHourMinute = hour * 1 + 1 + ':' + minute
                        }

                        if (this.defaultTime.indexOf(nowHourMinute) > 0) {
                            this.timeArr = this.defaultTime
                            let startDayIndex = this.timeArr.indexOf(nowHourMinute);
                            let endDayIndex = this.timeArr.length;
                            this.timeArr = this.timeArr.slice(startDayIndex, endDayIndex + 1);
                        }
                    } else if (nowHours == 17) {
                        // 如果是17:30之前
                        if (nowMinutes < 30) {
                            this.timeArr = ["17:30", "18:00"]
                        } else {
                            this.timeArr = ["18:00"]
                        }

                    } else if (nowHours >= 18) {
                        // 今天大于18点 只能约明天
                        this.timeArr = ["今日已无预约时间"]
                    } else if (nowHours < 9) {
                        this.timeArr = []
                        // 如果是今天9点之前和以后的每一天
                        this.timeArr = this.defaultTime
                    }
                } else {
                    this.timeArr = []
                    // 如果是今天9点之前和以后的每一天
                    this.timeArr = this.defaultTime
                }
                return this.timeArr
            },

            // 选择时间
            timeChange(e) {
                this.bookingTimeIndex = e.detail.value;
            },

            // 获取当前月的天数
            mGetDate(year, month) {
                var d = new Date(year, month, 0);
                return d.getDate();
            },

            // 获取今天的日期
            getNowFormatDate() {
                let date = new Date(),
                    year = date.getFullYear(), // 获取完整的年份(4位)
                    month = date.getMonth() + 1, // 获取当前月份(0-11,0代表1月)
                    strDate = date.getDate() // 获取当前日(1-31)
                // if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
                // if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0

                let currentDate = year + "年" + month + "月" + strDate + "日";
                return currentDate
            },

            // 获取明年?今天的日期
            getNextFormatDate() {
                let date = new Date(),
                    year = date.getFullYear() + 1, //获取完整的年份(4位)
                    month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
                    strDate = date.getDate() // 获取当前日(1-31)
                // if (month >= 1 && month <= 9) month = '0' + month // 如果月份是个位数，在前面补0
                // if (strDate >= 0 && strDate <= 9) strDate = '0' + strDate // 如果日是个位数，在前面补0

                let nextDate = year + "年" + month + "月" + strDate + "日";
                return nextDate
            },

            // 获取所有的天数
            allDay() {

                for (var m = 0; m < this.year.length; m++) {
                    var tempYear = this.year[m]
                    for (var n = 0; n < this.month.length; n++) {
                        var tempMonth = this.month[n]
                        var days = this.mGetDate(tempYear, tempMonth)
                        for (var d = 1; d < days; d++) {
                            var tempDay = days[d];
                            this.dayArr.push(tempYear + "年" + tempMonth + "月" + d + "日")
                        }
                    }
                }

                return this.dayArr
            },


            // 处理日期
            handleDay() {
                // 今天
                this.currentDay = this.getNowFormatDate();
                // 明年的今天
                this.nextDate = this.getNextFormatDate();
                this.dayArr = this.allDay();

                let startDayIndex = this.dayArr.indexOf(this.currentDay);
                let endDayIndex = this.dayArr.indexOf(this.nextDate);
                this.dayArr = this.dayArr.slice(startDayIndex, endDayIndex + 1);
                this.dayArr[0] = this.dayArr[0] + " 今天";
                this.dayArr[1] = this.dayArr[1] + " 明天";
                this.dayArr[2] = this.dayArr[2] + " 后天";
                return this.dayArr
            }
    }
        }
View Code

 

参考:

小程序uniapp picker组件的写法https://blog.csdn.net/qq_40007317/article/details/125721938

posted on 2022-08-29 10:52  王多静  阅读(1484)  评论(2)    收藏  举报