使用Javascript AngularJS日期选取器 [英] Date picker using Javascript AngularJS

问题描述

我要创建一个日历，在那里它将从本月开始，将通过展示未来12个月结束。随着左，右箭头的帮助下，我可以改变的月份。在当前月，它也将从当前日期开始。假设，今天是19月日历显示将在标题中显示2015年10月和日期，将开始从10月19日至10月31我看不到previous日期进不去。但是，如果我去2015年11月通过单击右箭头，然后它会显示所有日期十一月，因为这些都是将来的日期，但过去的日期都受到限制。这将继续未来12个月的电流。像10月2015年2016年10月。
我有两个小提琴在哪里，我可以轻松地更改一个月，但有我显示所有接下来的365天。但是，当我选择十月应该只显示十月日期。
我还有一个小提琴，在那里呈现出一个月的所有日期。
我想结合这部分工作的上述条件。
这是code从本月呈现出单元： -

\r

\r

VAR日期=新的日期（）;\r
  VAR个月= []，\r
    即monthNames =一月，二月，月，月，月，君，\r
      七月，月，月，月，月，月\r
    ];\r
  对于（VAR I = 0;我LT＆= 12;我++）{\r
    months.push（即monthNames [date.getMonth（）] +''+ date.getFullYear（））;\r
    date.setMonth（date.getMonth（）+ 1）;\r
  }\r
\r
  $ scope.changeMonth =功能（步骤）{\r
    如果（$ scope.monthIndex +步骤：GT; = 0＆放大器;＆放大器;\r
      $ scope.monthIndex +步骤：= 12\r
    ）{\r
      $ scope.monthIndex = $ scope.monthIndex +步骤;\r
      $ scope.monthName = $ scope.months [$ scope.monthIndex];\r
    }\r
\r
  };\r
\r
  $ scope.monthIndex = 0;\r
  $ scope.months =月;\r
  $ scope.monthName =月[0];\r
 \r
\r
}]）;\r
\r
datepicker.factory（'FORMATDATETIME'，[功能（）{\r
返回{\r
这必将查看//最终结构\r
//\r
dateValues​​：[]，\r
\r
//中间结构\r
//\r
 \r
getDateValues​​：功能（）{\r
VAR dateValues​​ = this.dateValues​​;\r
            对于（i = 0; I＆LT; = 366;我++）{\r
                变种D =新的日期（）;\r
                dateValues​​.push（d.setDate（d.getDate（）+ I））;\r
            }\r
\r
}，\r
\r
\r
}

\r

\r

\r

小提琴链接1安培; 2： -

  https://jsfiddle.net/abhijitloco/fxbmpetu/1/
    http://jsfiddle.net/2cpc3gp3/27/
 

解决方案

下面是你的code的固定版本（的 https://jsfiddle.net/fxbmpetu/9/ ）。我做了这样每次重新创建的对象dateValues​​你点击下一步，

  $ scope.changeMonth =功能（步骤）{
如果（$ scope.monthIndex +步骤：GT; = 0＆放大器;＆放大器;
  $ scope.monthIndex +步骤：= 12
）{
  $ scope.dateValues​​ = [];
  $ scope.monthIndex = $ scope.monthIndex +步骤;
  $ scope.monthName = $ scope.months [$ scope.monthIndex];
   VAR日期=新的日期（）;
   VAR偏移量= date.getMonth（）
   VAR offsetDate =偏移+ $ scope.monthIndex;
  $ scope.nDays =新的日期（$ scope.year，offsetDate，0）.getDate（）;  对于（i = 1; I＆LT; = $ scope.nDays;我++）{
    变种D =新的日期（）;
    $ scope.dateValues​​.push（新日期（$ scope.year，offsetDate，I））;
  }}
 

};

这样的观点被渲染通过角更新为选择的月份。我还增加了从当前日期的日期偏移正在显示，这是因为你正在使用从选定的指数，总是从0开始，而不是当前月份的日期显示。希望这有助于。

I want to create a calendar, where it will start from current month and will end up by showing next 12 months. With the help of right and left arrow, I can change the months. In the current month, it will also start from current date. Suppose, today is Oct 19. Show calendar will show October 2015 in the heading and in the dates it will start from Oct 19 to Oct 31. I can not see previous dates anyhow. But, if I go to Nov 2015 by clicking right arrow, then it will show all the Nov dates, because those are future dates, but past dates are restricted. This will continue next 12 months from current. Like, Oct 2015 to Oct 2016. I have two fiddle where, I am can change the month easily but there I am showing all the next 365 days. But, when I select Oct it should show only Oct dates. I have another fiddle, where it is showing the all the dates of a month. I want to bind the above condition in this part work. This is a snap of code from Month showing :-

var date = new Date();
  var months = [],
    monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];
  for (var i = 0; i <= 12; i++) {
    months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
    date.setMonth(date.getMonth() + 1);
  }

  $scope.changeMonth = function(steps) {
    if ($scope.monthIndex + steps >= 0 &&
      $scope.monthIndex + steps <= 12
    ) {
      $scope.monthIndex = $scope.monthIndex + steps;
      $scope.monthName = $scope.months[$scope.monthIndex];
    }

  };

  $scope.monthIndex = 0;
  $scope.months = months;
  $scope.monthName = months[0];
 

}]);

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

		//intermediate structures
		//
 
		getDateValues: function() {
			var dateValues = this.dateValues;
            for (i = 0; i <= 366; i++) {
                var d = new Date();
                dateValues.push(d.setDate(d.getDate() + i));
            }

		},


	}

Fiddle Link 1 & 2 :-

    https://jsfiddle.net/abhijitloco/fxbmpetu/1/
    http://jsfiddle.net/2cpc3gp3/27/

解决方案

Here is a fixed version of your code (https://jsfiddle.net/fxbmpetu/9/). I made it so that the dateValues object is recreated each time you click next,

 $scope.changeMonth = function(steps) {
if ($scope.monthIndex + steps >= 0 &&
  $scope.monthIndex + steps <= 12
) {
  $scope.dateValues = [];
  $scope.monthIndex = $scope.monthIndex + steps;
  $scope.monthName = $scope.months[$scope.monthIndex];
   var date = new Date();
   var offset = date.getMonth()
   var offsetDate = offset + $scope.monthIndex;
  $scope.nDays = new Date( $scope.year,  offsetDate, 0).getDate();

  for (i = 1; i <= $scope.nDays; i++) {  
    var d = new Date();
    $scope.dateValues.push(new Date($scope.year,  offsetDate, i));
  }

}

};

this way the view being rendered is updated via angular to the selected month. I also added an offset from the current date to the date being shown, this is because you were using the date from the selected index which was always starting at 0 instead of the current month being displayed. Hope this helps.

这篇关于使用Javascript AngularJS日期选取器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！