ionic 雙選日曆控件

選擇一年周的時間和雙日曆選擇

H5 代碼

 

<ion-view title="選擇時間">

    <ion-content>
        <!-- 日曆顯示 -->
        <div class="row row-wrap" style="background-color: #FFFFFF;position: absolute;top: 0;z-index: 99;">
            <div style="width: 14.2%;text-align: center;">日</div>
            <div style="width: 14.2%;text-align: center;">一</div>
            <div style="width: 14.2%;text-align: center;">二</div>
            <div style="width: 14.2%;text-align: center;">三</div>
            <div style="width: 14.2%;text-align: center;">四</div>
            <div style="width: 14.2%;text-align: center;">五</div>
            <div style="width: 14.2%;text-align: center;">六</div>
        </div>
        <table class="tab2-table-cleander">
            <tr class="row row-wrap" ng-repeat="monthItem in vo.dateData" ng-style="{'margin-top':$index==0?'36px':'0px'}">
                <td style="width: 100%;margin-top: 12px;">{{monthItem.year + '年' + monthItem.month+'月'}}</td>
                <td ng-repeat="dayItem in monthItem.dayList track by $index" ng-style="vc.setChooseTimeStyle(dayItem)" ng-click="vc.chooseTime(dayItem)">
                    <i>{{dayItem.day}}</i><br />
                    <i ng-style="{'color':(dayItem.isHoliday)?'green':'#000000', 'font-size': '10px'}">{{vc.showHoliday(dayItem)}}</i>
                </td>
            </tr>
        </table>
    </ion-content>

    <ion-content ng-show="vo.weekType">
        <div style="clear: both;margin-top: 12px;">
            <div class="m-filter-first" style="margin-top: 9px;">
                <ul class="g-flexbox" style="border: 1px #D4DEEA solid;border-radius: 6px;margin: 0  6px;">
                    <li class="flex react-cursor vertical-line" ng-class="{'0':'item-on','1':'','2':''}[vo.itemmenu.years]" ng-click="vc.MenuIChange('years')"
                     data-index="0" style="text-align: center;padding: 6px 0;">
                        <span class="text" style="font-size: 14px;">{{vo.years.selectorName}}</span>
                        <i class="icon mdi" ng-class="{'0': 'mdi-chevron-up','1': 'mdi-chevron-down', '2': 'mdi-chevron-double-down'}[vo.itemmenu.years]"></i>
                    </li>

                </ul>
                <!-- 單位年度下拉列表 -->
                <div class="m-filter-cont m-filter-row m-filter-comprehensive react-cursor" ng-class="{'0':'','1':'hide','2':'hide'}[vo.itemmenu.years]">
                    <ul class="list1 col-filter scroll-overflow">
                        <li class="item item-checkbox" ng-repeat="obj in vo.years.dataList" ng-click="vc.conditionChange(obj)">
                            {{obj.value}}
                            <label class="checkbox">
                                <input type="checkbox" style="float: right;" ng-checked="vo.years.selector == obj.id" ng-disabled="vo.years.selector == obj.id">
                            </label>
                        </li>
                    </ul>
                </div>

                <div class="row row-wrap" style="width: 100%; text-align: center;margin: auto 5px">
                    <div class="col col-24" ng-repeat="obj in vo.weekRange" ng-style="{'border': obj.isSelected?'cornflowerblue 0.5px solid':'#dddddd 0.5px solid', 'background-color':obj.isSelected?'cornflowerblue':'whitesmoke','border-radius': '6px','margin': '2px'}"
                     ng-click="vc.comfirmClick($index)">
                        <div style="width:100%;text-align: center;">
                            <span ng-style="{'color': obj.isSelected?'#FFFFFF':'#8a8a8a'}">{{obj.value}}</span>
                        </div>
                        <div style="width: 99%;text-align: center;">
                            <span ng-style="{'color': obj.isSelected?'#FFFFFF':'#8a8a8a','font-size': '10px'}">{{obj.valueDetail}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
    <button style="position: absolute;position: fixed;bottom: 64px;right: 24px;overflow:scroll;border: none;padding: 6px 18px;background-color: #DD2C00DD;color: #FFFFFF;border-radius: 6px;"
     ng-show="!vo.weekType" ng-click="vc.confirmChoose()">確定</button>
</ion-view>

js 代碼

angular.module('app')
    .controller('clendarDoubleCtrl', ['$rootScope', '$scope', '$ionicHistory', '$ionicScrollDelegate', '$timeout',
        '$stateParams', 'formatService',
        function ($rootScope, $scope, $ionicHistory, $ionicScrollDelegate, $timeout, $stateParams, formatService) {
            $scope.vo = {
                itemmenu: {
                    years: ITEM_DEFUALT,
                },
                //當前 年,月,日, 假期日
                currentDay: '',
                currentMonth: '',
                currentYear: '',
                glHoliday: '',
                nlHoliday: '',
                nlDate: '',

                //天干地支,生肖等常量,全局變量定義
                calendarData: CALENDAR_DATA,
                madd: MADD,
                tgStr: TG,
                dzStr: DZ,
                numStr: NUM_CHINESE,
                monStr: NUM_MON,
                weekStr: NUM_WEEK,
                sx: SX,
                cYear: '',
                cMonth: '',
                cDay: '',
                theDate: '',
                //總月份和天數集合
                dateData: [],
                startTime: $stateParams.startTime,
                endTime: $stateParams.endTime,
                chooseCs: 0,

                //顯示周的部分
                weekType: false,
                //可選月的範圍
                weekRange: [],
                //當前選中的年
                chooseYear: '',
                //當前選中的週數,
                chooseWeek: '',
                //可選年的範圍
                years: {
                    dataList: initRangeYears(),
                    selector: formatService.getYear(),
                    selectorName: formatService.getYear() + '年'
                },
            }

            /**
             * 創建可選年的範圍
             */
            function initRangeYears() {
                var rangeYears = [];
                var currentYear = Number(formatService.getYear());
                var startYear = currentYear - 3;
                for (var i = 0; i < 4; i++) {
                    startYear++;
                    var yearValue =
                        {
                            id: startYear,
                            value: startYear + '年'
                        };
                    rangeYears.push(yearValue);
                }
                return rangeYears;
            };

            $scope.vc = {
                //創建日曆
                initTime: function () {
                    //初始化顯示 當前年和月
                    var now = new Date();
                    $scope.vo.currentYear = now.getFullYear();
                    $scope.vo.currentMonth = now.getMonth() + 1;
                    $scope.vo.currentDay = now.getDate();
                    $scope.vo.glHoliday = $scope.vc.getHolidays($scope.vo.currentMonth, $scope.vo.currentDay);
                    //展示指定的年和月的所有日期
                    $scope.vc.preMonth($scope.vo.currentYear, $scope.vo.currentMonth);
                    $scope.vc.showCleander($scope.vo.currentYear, $scope.vo.currentMonth);
                    $scope.vc.lastMonth($scope.vo.currentYear, $scope.vo.currentMonth);
                },
                //前一個月
                preMonth: function (year, month) {
                    if (month == 1) {
                        year = year - 1;
                        month = 12;
                    } else {
                        month = month - 1;
                    }
                    $scope.vc.showCleander(year, month);
                },
                //後一個月
                lastMonth: function (year, month) {
                    if (month == 12) {
                        year = year + 1;
                        month = 1;
                    } else {
                        month = month + 1;
                    }
                    $scope.vc.showCleander(year, month);
                },
                //選擇時間
                chooseTime: function (dayItem) {
                    if (dayItem != undefined) {
                        switch ($scope.vo.chooseCs) {
                            case 0:
                                $scope.vo.chooseCs = 1;
                                $scope.vo.startTime = dayItem.alltime;
                                $scope.vo.endTime = '';
                                break;
                            case 1:
                                $scope.vo.chooseCs = 2;
                                if ($scope.vo.startTime > dayItem.alltime) {
                                    $scope.vo.endTime = $scope.vo.startTime;
                                    $scope.vo.startTime = dayItem.alltime;
                                } else {
                                    $scope.vo.endTime = dayItem.alltime;
                                }
                                break;
                            case 2:
                                $scope.vo.chooseCs = 1;
                                $scope.vo.startTime = dayItem.alltime;
                                $scope.vo.endTime = '';
                                break;
                        }
                    }
                },
                //確定選則
                confirmChoose: function () {
                    var item = {};
                    $rootScope.startTime = $scope.vo.startTime;
                    $rootScope.endTime = $scope.vo.endTime;
                    $ionicHistory.goBack();
                },
                //設置選中的時間
                setChooseTimeStyle: function (item) {
                    if (item != undefined) {
                        if (item.alltime == $scope.vo.startTime && item.alltime == $scope.vo.endTime) {
                            return {
                                'width': '14.2%',
                                'margin-top': '6px',
                                'background-image': 'url(img/start_end_time.png)',
                                'background-size': '100% 100%',
                                'background-repeat': 'no-repeat'
                            };
                        } else if (item.alltime == $scope.vo.startTime) {
                            return {
                                'width': '14.2%',
                                'margin-top': '6px',
                                'background-image': 'url(img/start_time.png)',
                                'background-size': '100% 100%',
                                'background-repeat': 'no-repeat'
                            };
                        } else if (item.alltime == $scope.vo.endTime) {
                            return {
                                'width': '14.2%',
                                'margin-top': '6px',
                                'background-image': 'url(img/end_time.png)',
                                'background-size': '100% 100%',
                                'background-repeat': 'no-repeat'
                            };
                        } else if (item.alltime < $scope.vo.endTime && item.alltime > $scope.vo.startTime) {
                            return {
                                'width': '14.2%',
                                'margin-top': '6px',
                                'background': '#AFEEEE',
                                'background-size': '100% 100%',
                                'background-repeat': 'no-repeat'
                            };
                        }
                        return {
                            'width': '14.2%',
                            'margin-top': '6px',
                            'background': 'none',
                            'background-size': '100% 100%',
                            'background-repeat': 'no-repeat'
                        };
                    }
                },
                //展示指定的年和月的所有日期
                showCleander: function (year, month) {
                    $scope.vo.nlDate = $scope.vc.getLunarCalendar(year, month, $scope.vo.currentDay)
                    $scope.vo.glHoliday = $scope.vc.getHolidays(month, $scope.currentDay);
                    $scope.vo.nlHoliday = $scope.vc.getnlHolidays($scope.vo.nlDate);
                    var dayList = [];

                    var beforeDays = [];
                    //得到表示指定年和月的1日的那個時間對象
                    var date = new Date(year, month - 1, 1);
                    //判斷這個月1號是星期幾，添加響應空格
                    var dayOfWeek = date.getDay();
                    var stack = [];
                    for (var i = 0; i < dayOfWeek; i++) {
                        stack.push(beforeDays.pop());
                    }
                    stack.reverse();
                    for (var i = 0; i < dayOfWeek; i++) {
                        stack.push(beforeDays.pop());
                        dayList.push(stack.shift());
                    }

                    //計算一個月有多少天
                    var daysOfMonth = $scope.vc.monthContainDays(year, month);
                    //從1號開始添加日曆數字
                    for (var i = 1; i <= daysOfMonth; i++) {
                        var day = {};
                        day.day = i;
                        day.month = month;
                        day.year = year;
                        day.alltime = year + '-' + ((month + '').length > 1 ? month : ('0' + month)) + '-' + ((i + '').length > 1 ? (i +
                            '') : ('0' + i));
                        day.nldate = $scope.vc.getLunarCalendar(year, month, i);
                        day.glHoliday = $scope.vc.getHolidays(month, i);
                        day.nlHoliday = $scope.vc.getnlHolidays(day.nldate);
                        if (day.glHoliday || day.nlHoliday) {
                            day.isHoliday = true;
                        } else {
                            day.isHoliday = false;
                        }
                        dayList.push(day);
                    }

                    //添加每月天數
                    var param = {};
                    param.year = year;
                    param.month = month;
                    param.dayList = dayList;
                    $scope.vo.dateData.push(param);
                },
                //在日曆顯示節假日
                showHoliday: function (day) {
                    if (day == undefined || day == null) {
                        return '';
                    }
                    if (day.nlHoliday || day.glHoliday) {
                        if (day.nlHoliday) {
                            return day.nlHoliday;
                        } else {
                            return day.glHoliday;
                        }
                    } else {
                        return day.nldate.day;
                    }
                },
                //返回月份包含的天數
                monthContainDays: function (year, month) {
                    return new Date(year, month, 0).getDate();
                },
                //獲取農曆日期
                getLunarDay: function (solarYear, solarMonth, solarDay) {
                    if (solarYear < 1921 || solarYear > 2020) {
                        return "";
                    } else {
                        solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
                        $scope.vc.nlTrans(solarYear, solarMonth, solarDay);
                        return $scope.vc.setNlDate(solarYear);
                    }
                },
                //獲取當前農曆
                getLunarCalendar: function (year, month, day) {
                    if (year < 100) {
                        year = "19" + year;
                    }
                    return $scope.vc.getLunarDay(year, month, day);
                },
                //設置農曆日期
                setNlDate: function (year) {
                    var tmp = new Object();
                    tmp.month = "";
                    tmp.day = "";
                    if ($scope.vo.cMonth < 1) {
                        tmp.month += "(閏)";
                        tmp.month += $scope.vo.monStr.charAt(-$scope.vo.cMonth - 1);
                    } else {
                        tmp.month += $scope.vo.monStr.charAt($scope.vo.cMonth - 1);
                    }
                    tmp.year = year;
                    tmp.month += "月";
                    tmp.day += ($scope.vo.cDay < 11) ? "初" : (($scope.vo.cDay < 20) ? "十" : (($scope.vo.cDay < 30) ? "廿" : "三十"));
                    if ($scope.vo.cDay % 10 != 0 || $scope.vo.cDay == 10) {
                        tmp.day += $scope.vo.numStr.charAt(($scope.vo.cDay - 1) % 10);
                    }
                    return tmp;
                },
                //獲取公曆節假日名稱
                getHolidays: function (month, date) {
                    var holiday = "";
                    if ((month == 1) && (date == 1)) {
                        holiday = "元旦";
                    }

                    if ((month == 3) && (date == 12)) {
                        holiday = "植樹節";
                    }

                    if ((month == 4) && (date == 5)) {
                        holiday = "清明";
                    }

                    if ((month == 5) && (date == 1)) {
                        holiday = "勞動節";
                    }

                    if ((month == 5) && (date == 4)) {
                        holiday = "青年節";
                    }

                    if ((month == 6) && (date == 1)) {
                        holiday = "兒童節";
                    }

                    if ((month == 8) && (date == 1)) {
                        holiday = "建軍節";
                    }

                    if ((month == 8) && (date == 16)) {
                        holiday = "情人節";
                    }

                    if ((month == 10) && (date == 1)) {
                        holiday = "國慶節";
                    }

                    if ((month == 12) && (date == 25)) {
                        holiday = "聖誕節";
                    }
                    return holiday;
                },
                //獲取農曆節假日名稱
                getnlHolidays: function (nldate) {
                    nldate = nldate.month + nldate.day;
                    var nlHolidays = "";
                    if (nldate == "正月初一") {
                        nlHolidays = "春節";
                    }
                    if (nldate == "正月十五") {
                        nlHolidays = "元宵節";
                    }
                    if (nldate == "五月初五") {
                        nlHolidays = "端午節";
                    }
                    if (nldate == "七月初七") {
                        nlHolidays = "七夕";
                    }
                    if (nldate == "七月十五") {
                        nlHolidays = "中元節";
                    }
                    if (nldate == "八月十五") {
                        nlHolidays = "中秋節"
                    }
                    if (nldate == "九月初九") {
                        nlHolidays = "重陽節"
                    }
                    if (nldate == "臘月初八") {
                        nlHolidays = "臘八節"
                    }
                    if (nldate == "臘月廿四") {
                        nlHolidays = "小年"
                    }
                    return nlHolidays;
                },
                getBit: function (m, n) {
                    return (m >> n) & 1;
                },
                //農曆轉換
                nlTrans: function () {
                    $scope.vo.theDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
                    var total, m, n, k;
                    var isEnd = false;
                    var tmp = $scope.vo.theDate.getYear();
                    if (tmp < 1900) {
                        tmp += 1900;
                    }
                    total = (tmp - 1921) * 365 + Math.floor((tmp - 1921) / 4) + $scope.vo.madd[$scope.vo.theDate.getMonth()] +
                        $scope.vo.theDate.getDate() - 38;

                    if ($scope.vo.theDate.getYear() % 4 == 0 && $scope.vo.theDate.getMonth() > 1) {
                        total++;
                    }
                    for (m = 0; ; m++) {
                        k = ($scope.vo.calendarData[m] < 0xfff) ? 11 : 12;
                        for (n = k; n >= 0; n--) {
                            if (total <= 29 + $scope.vc.getBit($scope.vo.calendarData[m], n)) {
                                isEnd = true;
                                break;
                            }
                            total = total - 29 - $scope.vc.getBit($scope.vo.calendarData[m], n);
                        }
                        if (isEnd) break;
                    }
                    $scope.vo.cYear = 1921 + m;
                    $scope.vo.cMonth = k - n + 1;
                    $scope.vo.cDay = total;
                    if (k == 12) {
                        if ($scope.vo.cMonth == Math.floor($scope.vo.calendarData[m] / 0x10000) + 1) {
                            $scope.vo.cMonth = 1 - $scope.vo.cMonth;
                        }
                        if ($scope.vo.cMonth > Math.floor($scope.vo.calendarData[m] / 0x10000) + 1) {
                            $scope.vo.cMonth--;
                        }
                    }
                },

                /**
                 * 獲取指定年，所有的週數的開始和結束時間
                 * @param year 指定年
                 */
                initRangeWeeks: function (year) {
                    $scope.vo.weekRange = [];
                    $scope.vo.weekRange = formatService.getAllWeeksInfo(year);
                    if(Number($scope.vo.chooseWeek)>=$scope.vo.weekRange.length)
                        $scope.vo.weekRange[$scope.vo.weekRange.length-1].isSelected = true;
                    else
                    //將選中的週數標記出來
                    $scope.vo.weekRange[$scope.vo.chooseWeek].isSelected = true;
                },  //條件篩選
                MenuIChange: function (type) {
                    switch (type) {
                        case 'years':
                            $scope.vo.itemmenu.weeks = ITEM_DEFUALT;
                            $scope.vo.itemmenu.years == ITEM_DEFUALT
                                ? $scope.vo.itemmenu.years = ITEM_SELECTED
                                : $scope.vo.itemmenu.years = ITEM_DEFUALT;
                            break;
                    }
                },
                //條件改變
                conditionChange: function (obj) {

                    $scope.vo.itemmenu.years = ITEM_DEFUALT;
                    $scope.vo.years.selector = obj.id;
                    $scope.vo.years.selectorName = obj.value;

                    //查詢條件變更
                    $scope.vo.chooseYear = obj.id;

                    //更新當年的週數
                    $scope.vc.initRangeWeeks(obj.id);
                },
                comfirmClick: function (index) {
                    $rootScope.selectWeek = $scope.vo.weekRange[index];
                    $ionicHistory.goBack();
                }
            }

            $scope.ready = (function () {
                //獲取日曆類型
                $scope.vo.weekType = $stateParams.type=='true';
                if ($scope.vo.weekType) { //選擇週數
                    //獲取已經選中的年份
                    $scope.vo.chooseYear = $stateParams.selectedYear;
                    //獲取已經選中的周
                    $scope.vo.chooseWeek = $stateParams.selectedWeek;
                    $scope.vo.years.selector = $scope.vo.chooseYear;
                    $scope.vo.years.selectorName = $scope.vo.chooseYear + '年';
                    $scope.vc.initRangeWeeks($scope.vo.chooseYear);
                } else {
                    //初始化時間
                    $scope.vc.initTime();
                    $timeout(function () {
                        $ionicScrollDelegate.scrollBy(0, 248, false);
                    }, 200)
                }
            })()
        }
    ])

 

靜態代碼

var CALENDAR_DATA = new Array(0xA4B, 0x5164B, 0x6A5, 0x6D4, 0x415B5, 0x2B6, 0x957, 0x2092F, 0x497, 0x60C96, 0xD4A, 0xEA5, 0x50DA9, 0x5AD, 0x2B6, 0x3126E, 0x92E, 0x7192D, 0xC95, 0xD4A, 0x61B4A, 0xB55, 0x56A, 0x4155B, 0x25D, 0x92D, 0x2192B, 0xA95, 0x71695, 0x6CA, 0xB55, 0x50AB5, 0x4DA, 0xA5B, 0x30A57, 0x52B, 0x8152A, 0xE95, 0x6AA, 0x615AA, 0xAB5, 0x4B6, 0x414AE, 0xA57, 0x526, 0x31D26, 0xD95, 0x70B55, 0x56A, 0x96D, 0x5095D, 0x4AD, 0xA4D, 0x41A4D, 0xD25, 0x81AA5, 0xB54, 0xB6A, 0x612DA, 0x95B, 0x49B, 0x41497, 0xA4B, 0xA164B, 0x6A5, 0x6D4, 0x615B4, 0xAB6, 0x957, 0x5092F, 0x497, 0x64B, 0x30D4A, 0xEA5, 0x80D65, 0x5AC, 0xAB6, 0x5126D, 0x92E, 0xC96, 0x41A95, 0xD4A, 0xDA5, 0x20B55, 0x56A, 0x7155B, 0x25D, 0x92D, 0x5192B, 0xA95, 0xB4A, 0x416AA, 0xAD5, 0x90AB5, 0x4BA, 0xA5B, 0x60A57, 0x52B, 0xA93, 0x40E95);

var MADD = new Array(

    0,

    31,

    59,

    90,

    120,

    151,

    181,

    212,

    243,

    273,

    304,

    334

)

var TG = "甲乙丙丁戊己庚辛壬癸";

var DZ = "子醜寅卯辰巳午未申酉戌亥";

var NUM_CHINESE = "一二三四五六七八九十";

var NUM_MON = "正二三四五六七八九十冬臘";

var NUM_WEEK = "日一二三四五六";

var SX = "鼠牛虎兔龍蛇馬羊猴雞狗豬";

 

圖片

 

配置路由

/**

  * 雙日曆時間跳轉

  * @param startTime

  * @param endTime

  * @param clendarType 日曆類型 true --週數選擇  false--雙日曆選擇

  * @param selectedYear 選中的年份

  * @param selectedWeek 選中的週數

  */

.state("clendarDouble", {

    url: '/clendarDouble/:startTime, :endTime, :type, :selectedYear, :selectedWeek',

    cache: false,

    views: {

         'main-view': {

             templateUrl: "templates/clendar_double.html",

             controller: "clendarDoubleCtrl"

         }

    }

})