点击箭头使用Javascript AngularJS更改月份 [英] Change the month by clicking arrow using Javascript AngularJS

查看：374
本文介绍了点击箭头使用Javascript AngularJS更改月份的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在哪里日期和时间显示的日期时间选择器。通过点击右箭头可以移动到下个月左箭头是previous一个月。日期也将被改变每月的变化。但是，在我的情况，我能够改变人每月最多月份。右键单击后不工作，而我需要未来12个月当月。这是我的JS code，我在下面加plunker。

\r
\r

=日期选择器angular.module（'日期选择器'，[]）;\r
\r
datepicker.controller（'dateTimePicker的'，['$范围，$ HTTP，FORMATDATETIME'，'$过滤'，函数（$范围，$ HTTP，FORMATDATETIME，$过滤器）{\r
    \r
    $ scope.showType = 1;\r
    $ scope.selected = {};\r
    \r
    $ scope.changeShowType =函数（类型）{\r
  $ scope.showType =类型;\r
  $ scope.monthName = $过滤器（'日期'）（$ scope.selected.date，MMM YYYY'）;\r
  $ scope.monthIndex = $ scope.selected.date.getMonth（）;\r
  $ scope.changeMonth（0）;\r
};\r
    \r
    $ scope.selectDate =功能（日期）{\r
      的console.log（日期）;\r
        $ scope.showType = 2;\r
        $ scope.selected.date =日期;\r
        $ scope.monthName = $过滤器（'日期'）（日期，DD MMM YYYY'）;\r
    };\r
    \r
    $ scope.selectTime =功能（时间）{\r
        $ scope.selected.time =时间;\r
        $ http.post（'选择日期/'，$ scope.selected）;\r
    };\r
\r
    VAR getTimeValues​​ =功能（）{\r
        formatDateTime.getTimeValues​​（）;\r
    }\r
    getTimeValues​​（）;\r
\r
    VAR bindScope =功能（）{\r
        $ scope.timeValues​​ = formatDateTime.timeValues​​;\r
    }\r
\r
    bindScope（）;\r
\r
    //日期选取器启动\r
\r
    VAR日期=新的日期（）;\r
    VAR个月= []，\r
        即monthNames =一月，二月，月，月，月，君，月，月，月，月，月，月 ];\r
    VAR tempMonth;\r
    tempMonth = date.getMonth（）;\r
    对于（VAR I = 0;我LT＆= 12;我++）{\r
        months.push（即monthNames [tempMonth] +''+ date.getFullYear（））;\r
        tempMonth + = 1;\r
        如果（tempMonth＆GT; = 12）{\r
          tempMonth = 0;\r
          date.setFullYear（date.getFullYear（）+ 1）;\r
        }\r
    }\r
    $ scope.year = 2015;\r
    $ scope.changeMonth =功能（步骤）{\r
      如果（$ scope.showType == 2）{\r
        $ scope.selectDate（新日期（$ scope.selected.date.setDate（$ scope.selected.date.getDate（）+步）））\r
        的console.log（$ scope.showType）\r
      }否则如果（$ scope.monthIndex +步骤＆GT; = 0＆放大器;＆安培; $ scope.monthIndex +步骤：= 12）{\r
            $ scope.dateValues​​ = [];\r
            $ scope.monthIndex = $ scope.monthIndex +步骤;\r
            $ scope.monthName = $ scope.months [$ scope.monthIndex - 新的Date（）的getMonth（）];\r
            // VAR日期=新的日期（）;\r
            //的console.log（date.getMonth（））;\r
            // VAR偏移量= date.getMonth（）\r
            //执行console.log（$ scope.monthIndex）;\r
            // VAR offsetDate =偏移+ $ scope.monthIndex;\r
            // $ scope.nDays =新的日期（$ scope.year，offsetDate + 1，0）.getDate（）;\r
            //的console.log（offsetDate + 1）;\r
            //执行console.log（新日期（$ scope.year，offsetDate，1））;\r
            \r
            $ scope.nDays =新的日期（$ scope.year，$ scope.monthIndex + 1，0）.getDate（）\r
            的console.log（$ scope.months）\r
            \r
            对于（i = 1; I＆LT; = $ scope.nDays;我++）{\r
                变种D =新的日期（）;\r
                d.setHours（0，0，0，0）;\r
                VAR displayDate =新的日期（$ scope.year，$ scope.monthIndex，I）;\r
                如果（displayDate＆GT; = D）$ scope.dateValues​​.push（displayDate）;\r
            }\r
$ scope.showType = 1;\r
        }其他{\r
            的console.log（失之交臂）\r
        }\r
        \r
        \r
    };\r
VAR今天=新的Date（）;\r
    $ scope.monthIndex = today.getMonth（）;\r
    $ scope.months =月;\r
    $ scope.monthName =月[$ scope.monthIndex];\r
    $ scope.changeMonth（0）;\r
\r
\r
}]）;\r
\r
datepicker.factory（'FORMATDATETIME'，[功能（）{\r
    返回{\r
        这必将查看//最终结构\r
        //\r
        dateValues​​：[]，\r
        timeValues​​：[]，\r
\r
        //生成minTime和MAXTIME之间的一个小时时间段\r
        getTimeValues​​：功能（）{\r
            的console.log（'我在这里'）;\r
            VAR timeValues​​ = this.timeValues​​;\r
            VAR minTime = 11; //这个变化来改变第一个可用的业务槽位\r
            VAR MAXTIME = 19; //改变该到恰克可最后业务槽位\r
            VAR串;\r
            对于（VAR I = minTime; I＆LT; MAXTIME;我++）{\r
                如果（ⅰ＆下; 12）{\r
                    lowersuffix =AM;\r
                    startRange = I;\r
                }否则如果（我=== 12）{\r
                    lowersuffix ='PM';\r
                    startRange = I;\r
                }其他{\r
                    lowersuffix ='PM';\r
                    startRange = I - 12;\r
                }\r
                如果（第（i + 1） - ; 12）{\r
                    uppersuffix =AM;\r
                    endRange =第（i + 1）;\r
                }否则如果（第（i + 1）=== 12）{\r
                    uppersuffix ='PM';\r
                    endRange =第（i + 1）;\r
                }其他{\r
                    uppersuffix ='PM';\r
                    endRange =第（i + 1） - 12;\r
                }\r
                串= startRange + lowersuffix +' - '+ endRange + uppersuffix;\r
                的console.log（字符串）;\r
                timeValues​​.push（字符串）;\r
            }\r
        }\r
    };\r
}]）;

\r

\r
\r

Plunker链接： - http://plnkr.co/edit/bbRAgzJCzws1vMZaZfkV?p = preVIEW


解决方案

我编辑code和固定的几个点，特别是变量$ scope.monthIndex除了她和另一个电话包括$ scope.currentDateCalendar。这将始终具有日历显示看年/月这个：

\r
\r

=日期选择器angular.module（'日期选择器'，[]）;\r
\r
datepicker.controller（'dateTimePicker的'，['$范围，$ HTTP，FORMATDATETIME'，'$过滤'，函数（$范围，$ HTTP，FORMATDATETIME，$过滤器）{\r
    $ scope.dateValues​​ = [];\r
    $ scope.showType = 1;\r
    $ scope.selected = {};\r
    $ scope.currentDateCalendar =新的日期（新日期（）和getFullYear（），新的Date（）的getMonth（），0）;\r
    \r
    $ scope.changeShowType =函数（类型）{\r
        $ scope.showType =类型;\r
        $ scope.monthName = $过滤器（'日期'）（$ scope.selected.date，MMM YYYY'）;\r
        $ scope.monthIndex = $ scope.selected.date.getMonth（）;\r
        $ scope.changeMonth（0）;\r
    };\r
\r
    $ scope.selectDate =功能（日期）{\r
        $ scope.showType = 2;\r
        $ scope.selected.date =日期;\r
        $ scope.monthName = $过滤器（'日期'）（日期，DD MMM YYYY'）;\r
    };\r
\r
    $ scope.selectTime =功能（时间）{\r
        $ scope.selected.time =时间;\r
        $ http.post（'选择日期/'，$ scope.selected）;\r
    };\r
\r
    VAR getTimeValues​​ =功能（）{\r
        formatDateTime.getTimeValues​​（）;\r
    };\r
    getTimeValues​​（）;\r
\r
    VAR bindScope =功能（）{\r
        $ scope.timeValues​​ = formatDateTime.timeValues​​;\r
    };\r
\r
    bindScope（）;\r
\r
    //日期选取器启动\r
\r
    VAR日期=新的日期（）;\r
    VAR个月= []，\r
    即monthNames =一月，二月，月，月，月，君，月，月，月，月，月，月 ];\r
\r
    $ scope.year = 2015;\r
    $ scope.changeMonth =功能（步骤）{\r
        如果（$ scope.showType == 2）{\r
            $ scope.selectDate（新日期（$ scope.selected.date.setDate（$ scope.selected.date.getDate（）+步）））;\r
        }其他{\r
            $ scope.dateValues​​.splice（0，$ scope.dateValues​​.length）;\r
            $ scope.currentDateCalendar.setMonth（$ scope.currentDateCalendar.getMonth（）+步骤）;\r
            $ scope.nDays =新的日期（$ scope.currentDateCalendar.getFullYear（），$ scope.currentDateCalendar.getMonth（），0）.getDate（）;\r
\r
            的console.log（$ scope.nDays：+ $ scope.nDays）;\r
            \r
            对于（i = 1; I＆LT; = $ scope.nDays;我++）{\r
                变种D =新的日期（）;\r
                d.setHours（0，0，0，0）;\r
                VAR displayDate =新的日期（$ scope.year，$ scope.currentDateCalendar.getMonth（），I）;\r
                //如果（$ scope.currentDateCalendar.getTime（）＆GT; = d.getTime（））\r
                    $ scope.dateValues​​.push（新日期（$ scope.currentDateCalendar.getFullYear（），$ scope.currentDateCalendar.getMonth（），I））;\r
            }\r
            \r
            $ scope.monthName =即monthNames [$ scope.currentDateCalendar.getMonth（）];\r
            $ scope.year = $ scope.currentDateCalendar.getFullYear（）;\r
        }\r
    };\r
}]）;\r
\r
datepicker.factory（'FORMATDATETIME'，[功能（）{\r
    返回{\r
        这必将查看//最终结构\r
        //\r
        dateValues​​：[]，\r
        timeValues​​：[]，\r
\r
        //生成minTime和MAXTIME之间的一个小时时间段\r
        getTimeValues​​：功能（）{\r
            的console.log（'我在这里'）;\r
            VAR timeValues​​ = this.timeValues​​;\r
            VAR minTime = 11; //这个变化来改变第一个可用的业务槽位\r
            VAR MAXTIME = 19; //改变该到恰克可最后业务槽位\r
            VAR串;\r
            对于（VAR I = minTime; I＆LT; MAXTIME;我++）{\r
                如果（ⅰ＆下; 12）{\r
                    lowersuffix =AM;\r
                    startRange = I;\r
                }否则如果（我=== 12）{\r
                    lowersuffix ='PM';\r
                    startRange = I;\r
                }其他{\r
                    lowersuffix ='PM';\r
                    startRange = I - 12;\r
                }\r
                如果（第（i + 1） - ; 12）{\r
                    uppersuffix =AM;\r
                    endRange =第（i + 1）;\r
                }否则如果（第（i + 1）=== 12）{\r
                    uppersuffix ='PM';\r
                    endRange =第（i + 1）;\r
                }其他{\r
                    uppersuffix ='PM';\r
                    endRange =第（i + 1） - 12;\r
                }\r
                串= startRange + lowersuffix +' - '+ endRange + uppersuffix;\r
                timeValues​​.push（字符串）;\r
            }\r
        }\r
    };\r
}]）;

\r

/ *样式去这里* /\r
\r
.frame {\r
    宽度：100％;\r
    高度：400像素;\r
    / *调整此根据主要问题框的高度* /\r
    保证金左：0％;\r
    边框：1px的固体＃777777;\r
    溢出：汽车;\r
}\r
\r
.datepicker {\r
    宽度：100％;\r
    列表样式：无;\r
    填充：0像素;\r
    保证金：0像素;\r
}\r
\r
.datepicker李{\r
    光标：指针;\r
    下边框：1px的固体#ededed;\r
    填充：10px的;\r
}\r
.datepicker李：悬停{\r
    背景：#EEE;\r
}\r
的.text中心{\r
    文本对齐：中心;\r
}\r
\r
。边境 {\r
    边框：1px的固体红色​​;\r
}

\r

＆LT; HTML NG-应用=日期选择器＆GT;\r
\r
＆LT; HEAD＆GT;\r
    ＆LT;标题＆GT;日期时间选择器＆LT; /标题＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css＆GT;\r
    ＆所述;！ - ＆下; SCRIPT SRC =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js＆GT;＆下; /脚本＆GT - →;\r
    ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=dateTimePicker的NG-的init =changeMonth（0）;＆GT;\r
    ＆LT; D​​IV CLASS =集装箱COL-MD-3＆GT;\r
        ＆LT; D​​IV CLASS =COL-MD-12＆GT;\r
            ＆LT;输入类型=形象SRC =htt​​p://s15.postimg.org/utzsj55ev/icon_ios7_arrow_right_128.png的风格=浮动：权利; NG-点击=changeMonth（1）; /＆GT;\r
            ＆LT;输入类型=形象SRC =htt​​p://s7.postimg.org/mwp7xtpg7/icon_ios7_arrow_left_128.pngNG点击=changeMonth（-1）; /＆GT;\r
            ＆LT; H3类=TEXT-中心NG点击=changeShowType（1）＆GT; {{MONTHNAME}} {{}一年}＆LT; / H3 GT＆;\r
        ＆LT; / DIV＆GT;\r
        ＆LT; D​​IV CLASS =框架COL-MD-12＆GT;\r
            {{showType}}\r
            ＆LT; UL类=日期选择文本中心NG-IF =showType === 1＆GT;\r
                ＆LT;李NG点击=selectDate（日期）NG重复=日期dateValues​​＆GT; {{日期|日期：'DD EEE'}}＆LT; /李＆GT;\r
            ＆LT; / UL＆GT;\r
            ＆LT;按钮式=按钮NG-IF =showType === 2NG点击=showType = showType = 1 1：！？2＆GT;返回＆LT; /按钮＆GT;\r
            ＆LT; UL类=日期选择文本中心NG-IF =showType === 2＆GT;\r
                ＆LT;李NG点击=selectTime（时间）NG重复=，在timeValues​​时间＆GT; {{时间}}＆LT; /李＆GT;\r
            ＆LT; / UL＆GT;\r
        ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

I have a date time picker where dates and times are showing. By clicking on right arrow you can move to next month and left arrow is for previous month. Dates will be changed too as per month changes. But, in my case, I am able to change the month up to January. Right click is not working after that, while I need next 12 months from current month. This is my JS code, I have added plunker below. 

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', '$http', 'formatDateTime', '$filter', function($scope, $http, formatDateTime, $filter) {
    
    $scope.showType = 1;
    $scope.selected = {};
    
    $scope.changeShowType = function (type) {
  $scope.showType = type;
  $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy');
  $scope.monthIndex = $scope.selected.date.getMonth();
  $scope.changeMonth(0);
};
    
    $scope.selectDate = function(date) {
      console.log(date);
        $scope.showType = 2;
        $scope.selected.date = date;
        $scope.monthName = $filter('date')(date, 'dd MMM yyyy');
    };
    
    $scope.selectTime = function(time) {
        $scope.selected.time = time;
        $http.post('date/selected', $scope.selected);
    };

    var getTimeValues = function() {
        formatDateTime.getTimeValues();
    }
    getTimeValues();

    var bindScope = function() {
        $scope.timeValues = formatDateTime.timeValues;
    }

    bindScope();

    //Date Picker START

    var date = new Date();
    var months = [],
        monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var tempMonth;
    tempMonth = date.getMonth();
    for (var i = 0; i <= 12; i++) {
        months.push(monthNames[tempMonth] + ' ' + date.getFullYear());
        tempMonth += 1;
        if (tempMonth >= 12) {
          tempMonth = 0;
          date.setFullYear(date.getFullYear() + 1);
        }
    }
    $scope.year = 2015;
    $scope.changeMonth = function(steps) {
      if($scope.showType == 2) {
        $scope.selectDate(new Date($scope.selected.date.setDate($scope.selected.date.getDate() + steps)))
        console.log($scope.showType)
      } else if ($scope.monthIndex + steps >= 0 && $scope.monthIndex + steps <= 12) {
            $scope.dateValues = [];
            $scope.monthIndex = $scope.monthIndex + steps;
            $scope.monthName = $scope.months[$scope.monthIndex - new Date().getMonth()];
            // var date = new Date();
            // console.log(date.getMonth());
            // var offset = date.getMonth()
            // console.log($scope.monthIndex);
            // var offsetDate = offset + $scope.monthIndex;
            // $scope.nDays = new Date($scope.year, offsetDate + 1, 0).getDate();
            // console.log(offsetDate + 1);
            // console.log(new Date($scope.year, offsetDate, 1));
            
            $scope.nDays = new Date($scope.year, $scope.monthIndex + 1, 0).getDate()
            console.log($scope.months)
            
            for (i = 1; i <= $scope.nDays; i++) {
                var d = new Date();
                d.setHours(0, 0, 0, 0);
                var displayDate = new Date($scope.year, $scope.monthIndex, i);
                if (displayDate >= d) $scope.dateValues.push(displayDate);
            }
$scope.showType =1;
        } else {
            console.log("missed")
        }
        
        
    };
var today = new Date();
    $scope.monthIndex = today.getMonth();
    $scope.months = months;
    $scope.monthName = months[$scope.monthIndex];
    $scope.changeMonth(0);


}]);

datepicker.factory('formatDateTime', [function() {
    return {
        //final structures which are bound to view
        //
        dateValues: [],
        timeValues: [],

        //generates one hour slots between minTime and maxTime
        getTimeValues: function() {
            console.log('here i am');
            var timeValues = this.timeValues;
            var minTime = 11; //vary this to change the first service slot available
            var maxTime = 19; //vary this to chage the last service slot available
            var string;
            for (var i = minTime; i < maxTime; i++) {
                if (i < 12) {
                    lowersuffix = 'AM';
                    startRange = i;
                } else if (i === 12) {
                    lowersuffix = 'PM';
                    startRange = i;
                } else {
                    lowersuffix = 'PM';
                    startRange = i - 12;
                }
                if ((i + 1) < 12) {
                    uppersuffix = 'AM';
                    endRange = (i + 1);
                } else if ((i + 1) === 12) {
                    uppersuffix = 'PM';
                    endRange = (i + 1);
                } else {
                    uppersuffix = 'PM';
                    endRange = (i + 1) - 12;
                }
                string = startRange + lowersuffix + '-' + endRange + uppersuffix;
                console.log(string);
                timeValues.push(string);
            }
        }
    };
}]);

Plunker Link :- http://plnkr.co/edit/bbRAgzJCzws1vMZaZfkV?p=preview

解决方案

I edit your code and fix several points , particularly the variable $ scope.monthIndex removed her and another call includes $ scope.currentDateCalendar . This will always have the year / month shown in the calendar Look at this:

datepicker = angular.module('datepicker', []);

datepicker.controller('dateTimePicker', ['$scope', '$http', 'formatDateTime', '$filter', function($scope, $http, formatDateTime, $filter) {
    $scope.dateValues = [];
    $scope.showType = 1;
    $scope.selected = {};
    $scope.currentDateCalendar = new Date(new Date().getFullYear(), new Date().getMonth(), 0);
    
    $scope.changeShowType = function (type) {
        $scope.showType = type;
        $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy');
        $scope.monthIndex = $scope.selected.date.getMonth();
        $scope.changeMonth(0);
    };

    $scope.selectDate = function(date) {
        $scope.showType = 2;
        $scope.selected.date = date;
        $scope.monthName = $filter('date')(date, 'dd MMM yyyy');
    };

    $scope.selectTime = function(time) {
        $scope.selected.time = time;
        $http.post('date/selected', $scope.selected);
    };

    var getTimeValues = function() {
        formatDateTime.getTimeValues();
    };
    getTimeValues();

    var bindScope = function() {
        $scope.timeValues = formatDateTime.timeValues;
    };

    bindScope();

    //Date Picker START

    var date = new Date();
    var months = [],
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    $scope.year = 2015;
    $scope.changeMonth = function(steps) {
        if($scope.showType == 2) {
            $scope.selectDate(new Date($scope.selected.date.setDate($scope.selected.date.getDate() + steps)));
        } else {
            $scope.dateValues.splice(0, $scope.dateValues.length);
            $scope.currentDateCalendar.setMonth($scope.currentDateCalendar.getMonth() + steps);
            $scope.nDays = new Date($scope.currentDateCalendar.getFullYear(), $scope.currentDateCalendar.getMonth(), 0).getDate();

            console.log("$scope.nDays: " + $scope.nDays);
            
            for (i = 1; i <= $scope.nDays; i++) {
                var d = new Date();
                d.setHours(0, 0, 0, 0);
                var displayDate = new Date($scope.year, $scope.currentDateCalendar.getMonth(), i);
                //if ($scope.currentDateCalendar.getTime() >= d.getTime())
                    $scope.dateValues.push(new Date($scope.currentDateCalendar.getFullYear(), $scope.currentDateCalendar.getMonth(), i));
            }
            
            $scope.monthName = monthNames[$scope.currentDateCalendar.getMonth()];
            $scope.year = $scope.currentDateCalendar.getFullYear();
        }
    };
}]);

datepicker.factory('formatDateTime', [function() {
    return {
        //final structures which are bound to view
        //
        dateValues: [],
        timeValues: [],

        //generates one hour slots between minTime and maxTime
        getTimeValues: function() {
            console.log('here i am');
            var timeValues = this.timeValues;
            var minTime = 11; //vary this to change the first service slot available
            var maxTime = 19; //vary this to chage the last service slot available
            var string;
            for (var i = minTime; i < maxTime; i++) {
                if (i < 12) {
                    lowersuffix = 'AM';
                    startRange = i;
                } else if (i === 12) {
                    lowersuffix = 'PM';
                    startRange = i;
                } else {
                    lowersuffix = 'PM';
                    startRange = i - 12;
                }
                if ((i + 1) < 12) {
                    uppersuffix = 'AM';
                    endRange = (i + 1);
                } else if ((i + 1) === 12) {
                    uppersuffix = 'PM';
                    endRange = (i + 1);
                } else {
                    uppersuffix = 'PM';
                    endRange = (i + 1) - 12;
                }
                string = startRange + lowersuffix + '-' + endRange + uppersuffix;
                timeValues.push(string);
            }
        }
    };
}]);

/* Styles go here */

.frame {
    width: 100%;
    height: 400px;
    /* adjust this according to the main questions box height */
    margin-left: 0%;
    border: 1px solid #777777;
    overflow: auto;
}

.datepicker {
    width: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.datepicker li {
    cursor: pointer;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}
.datepicker li:hover {
    background: #EEE;
}
.text-center {
    text-align: center;
}

.border {
    border: 1px solid red;
}

<html ng-app="datepicker">

<head>
    <title>Date time picker</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>

<body ng-controller="dateTimePicker" ng-init="changeMonth(0);">
    <div class="container col-md-3">
        <div class="col-md-12">
            <input type="image" src="http://s15.postimg.org/utzsj55ev/icon_ios7_arrow_right_128.png" style="float:right;" ng-click="changeMonth(1);" />
            <input type="image" src="http://s7.postimg.org/mwp7xtpg7/icon_ios7_arrow_left_128.png" ng-click="changeMonth(-1);" />
            <h3 class="text-center" ng-click="changeShowType(1)"> {{monthName}} {{year}}</h3>
        </div>
        <div class="frame col-md-12">
            {{showType}}
            <ul class="datepicker text-center" ng-if="showType === 1">
                <li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
            </ul>
            <button type="button" ng-if="showType === 2" ng-click="showType=showType!=1?1:2">Back</button>
            <ul class="datepicker text-center" ng-if="showType === 2">
                <li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
            </ul>
        </div>
    </div>
</body>

</html>

这篇关于点击箭头使用Javascript AngularJS更改月份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆