angularjs 移动端web仿ios年月日三级联动

最新推荐文章于 2023-10-06 12:01:00 发布

未来-更美好

最新推荐文章于 2023-10-06 12:01:00 发布

阅读量430

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/qq_33563147/article/details/88898449

angularjs 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于Angular的应用程序中实现的日期选择器组件。该组件使用picker.js库来创建一个直观的用户界面，允许用户从下拉菜单中选择年份、月份和日期。通过动态更新选项来确保所选日期的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装：使用了picker .js

picker .js详情介绍：

https://ustbhuangyi.github.io/picker/

.factory('DateSelection', [function () {
        /**
         *  前提条件，必须使用picker js
         */
        var picker, yearArr, monthArr, dayArr;
        yearArr = addYearArr();
        monthArr = getMonth();
        dayArr = getDay();
        function addYearArr() {
            var yearArrs = [];
            var myDate = new Date();
            nowYear = myDate.getFullYear();//当前年
            startYear = nowYear - 80;
            for (var int = startYear; int <= nowYear; int++) {
                var param = {
                    text: int,
                    value: int
                };
                yearArrs.unshift(param);
            }
            return yearArrs;
        }

        function getMonth() {
            var monthArrs = [];
            for (var i = 1; i <= 12; i++) {
                var param = {
                    text: i,
                    value: i
                };
                monthArrs.push(param)
            }
            return monthArrs
        }

        function getDay(years, months) {
            var days;
            if (!years && !months) {
                days = new Date(yearArr[0].text, monthArr[0].text, 0).getDate();
            } else if (!years && months) {
                days = new Date(yearArr[0].text, months, 0).getDate();
            }
            else {
                days = new Date(years, months, 0).getDate();
            }
            var dayArrs = [];
            for (var i = 1; i <= days; i++) {
                var param = {
                    text: i,
                    value: i
                };
                dayArrs.push(param)
            }
            return dayArrs
        }

        picker = new Picker({
            data: [yearArr, monthArr, dayArr],
            selectedIndex: [0, 0, 0]
        });


        //  确定点击

        //  选择
        var year, day, month;
        picker.on('picker.change', function (index, selectedIndex) {
            if (index === 0) {
                year = yearArr[selectedIndex].text;
                if (month) {
                    day = getDay(year, month);
                    picker.refillColumn(2, day);
                } else {
                    day = getDay(year, monthArr[0].text);
                    picker.refillColumn(2, day);
                }
            } else if (index === 1) {
                month = monthArr[selectedIndex].text;
                day = getDay(year, month);
                picker.refillColumn(2, day);
            }
        });

        return {
            show: function (callBack) {
                picker.show();
                //  确定点击
                picker.on('picker.select', function (selectedVal, selectedIndex) {
                        callBack(selectedVal)
                        // $scope.$apply($scope.val.birthday = selectedVal[0] + '-' + selectedVal[1] + '-' + selectedVal[2]);
                    }
                )
            }
        }

    }]);

使用方法：

angular.module('app')
    .controller('PersonalDataCtrl', ['$scope','DateSelection',
        function ($scopt,DateSelection) {
        $scope.val = {
            textarea: '',
            num: 0,
            sex: '請選擇',
            birthday: '請選擇'
        };

            //  生日
            onBirthdayClick: function () {
//==============================   调用日历  ==============================================
                DateSelection.show(function (result) {
                    $scope.$apply($scope.val.birthday=result[0]+'-'+result[1]+'-'+result[2])
                })
            },
         
        };



    }]);