如何制作一行中的所有日历

时间:2016-01-26 15:25:30

标签: javascript calendar typescript

How can i make a calendar with all days in one row

我已经搜索了很多这个答案,但我仍然没有找到一个合适的答案或解决这个问题....

我相信很多人已经这样做了,但是有人仍然没有解释他们是如何做到的,这真的很奇怪。

你们中的任何人都知道答案吗,请在javaScript或TypeScript中做到这一点!

How can i make a calendar with all days in one row

我们在JQuery库或其他资源中看到的大多数表都是7 days in 1 row table

我希望在日历中看到30天,而不是7天!

示例---

enter image description here

2 个答案:

答案 0 :(得分:1)

简单而缓慢的方式:

var
   startDate = new Date( 2015, 0, 1 )
   , numOfDays = 30
   , days = []
   ;

function addDay( date ) {
   date.setDate( date.getDate() + 1 );
}

while ( numOfDays-- ) {
   days.push( startDate.getDate() + '/' + ( startDate.getMonth() + 1 )
                                         + '/' + startDate.getFullYear() );
   addDay( startDate );
}
console.log( days.join() );

控制台中的结果:

1/1/2015,2/1/2015,3/1/2015,4/1/2015,5/1/2015,6/1/2015,7/1/2015,8/1/2015,9/1/2015,10/1/2015,11/1/2015,12/1/2015,13/1/2015,14/1/2015,15/1/2015,16/1/2015,17/1/2015,18/1/2015,19/1/2015,20/1/2015,21/1/2015,22/1/2015,23/1/2015,24/1/2015,25/1/2015,26/1/2015,27/1/2015,28/1/2015,29/1/2015,30/1/2015

我使用计数器进行了30次迭代。您可以将条件更改为在一个月内生成日期。 但我更喜欢使用朱利安时代,因为它比上面更快。

答案 1 :(得分:1)

好的,事实是你只需要一个具有特定格式的数组。让我们来了解如何生成这个数组。

首先,请允许我介绍一个库:Moment.js,用于说明。您也可以使用纯JavaScript替换它。

var moment = require('moment');
var resultArray = [];

var util = {};

/** 
 * input:
 *   month [Number]
 * output:
 *   totalDays [String]
 */
util.getDaysOfMonth = function(month){
  month = +month;
  var totalDays = '31';

  if( /[469]|(11)/.test(month) ){
    totalDays = '30';
  } else if (month === 2) {
    totalDays = moment().isLeapYear() ? '29' : '28';
  }

  return totalDays;
}

// Get current month of the year
var month = moment().get('month') + 1;

// current year
var year  = moment().get('year');
var days  = util.getDaysOfMonth(month);
for(var i = 1; i <= days; i++) {
  var str = month + '/' + i + '/' + year;
  resultArray.push(str);
}

现在你可以用这个数组做格式化了。