日期選擇插件clndr的使用

需求是：在HTML中繪製日曆直接供用戶選擇

而不是使用datepicker之類的表單插件讓用戶點擊input後彈出datepicker讓用戶選擇

 

瀏覽了一些解決方案後，發現  CLNDR 這個jQuery插件最漂亮

這名字取得確實晦澀，實際上是「calendar」每一個相隔字符的拼湊

效果以下：

 

要想迅速使用，仍是比較困難的，文檔少，全英文，只有github上一些簡單的示例

如今就來總結概括一下，實現上方這個簡單的日曆方法。（貌似簡單，配置仍是不少的）

 

首先去github上下載最新版本的 CLNDR

src文件夾中有clndr.js，可是咱們不要用，用根目錄下的clndr.min.js壓縮版，畢竟咱們只想敏捷開發，暫時不須要看源代碼，輪子怎麼造的我一點不關心啊。

另外咱們還要準備兩個爲clndr服務的js文件，分別是 moment.js 和 underscore.js 固然jQuery你是必需要有的，我就不發鏈接了，這貨畢竟是個jQuery插件。

 

在body的最後面引入這三個js，順序是：（jQuery須要提早引入）

<script src="js/underscore.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/clndr.min.js"></script>

 

 

好了下面開始要顯示日曆了

HTML以下：（我用的amaze-ui作的響應佈局）

<div class="am-u-lg-6 am-u-md-6 am-u-sm-12" style="height: 320px;">
		<div id="full-clndr">
			<script type="text/template" id="id_clndr_template">
            <div class="clndr-controls">
              <div class="clndr-previous-button"><<</div>
              <div class="clndr-next-button">>></div>
              <div class="month"><%= month %> <%= year %></div>
            </div>
			<div class="clndr-grid">
              <div class="days-of-the-week">
                <% _.each(daysOfTheWeek, function(day) { %><div class="header-day"><%= day %></div><% }); %>
              </div>
              <div class="days">
                <% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div><% }); %>
              </div>
            </div>
			</script>
		</div>
	</div>

　　

中間一段是template模板，根據CLNDR的demo和文檔設計的，感興趣的話仍是去讀英文吧，若是沒什麼特別的要求就可根據我這個來。

值得注意的是each語法是 underscore.js 提供的，可是千萬中間不要加換行或者空格，不然div會亂，這是由於display：inline-block有個默認空白，有這樣的左右空白的話，子div的寬度加起來會超過父div，致使日曆排版混亂，原版的clndr是使用float來解決的，可是我很討厭float，就從新設計了clndr的樣式表，我把個人精簡後的樣式表貼出來：

 

#full-clndr {
  width: 100%;
  max-width: 600px;
  margin: 10px auto;
  background-color: #CCC;
}
#full-clndr .clndr-controls {
  color: white;
  text-align: center;
  background-color: #414141;
  border: 1px solid #6A6A6A;
  /* 日曆標題樣式 */
}
#full-clndr .clndr-controls .clndr-previous-button {
  float: left;
  text-align: left;
  margin-left: 50px;
}
#full-clndr .clndr-controls .clndr-next-button {
  float: right;
  text-align: right;
  margin-right: 50px;
}
#full-clndr .clndr-controls .clndr-previous-button,
#full-clndr .clndr-controls .clndr-next-button {
  width: 30px;
  cursor: pointer;
}
#full-clndr .clndr-controls .clndr-previous-button:hover,
#full-clndr .clndr-controls .clndr-next-button:hover {
  opacity: 0.5;
}
#full-clndr .clndr-grid {
  width: 100%;
}
#full-clndr .clndr-grid .days-of-the-week {
  width: 100%;
  background-color: #0D70A6;
}
#full-clndr .clndr-grid .days-of-the-week .header-day {
  width: 14.28%;
  padding: 0px;
  margin:0px;
  text-align: center;
  color: white;
  display: inline-block;    /* 日期頭樣式 */
}
#full-clndr .clndr-grid .days {
  width: 100%;
}
#full-clndr .clndr-grid .days .day,
#full-clndr .clndr-grid .days .empty {
  width: 14.28%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #000;
  background-color: #CCC;
  display: inline-block;
  /* 日期樣式 */
}
#full-clndr .clndr-grid .days .day.event .day-number,
#full-clndr .clndr-grid .days .empty.event .day-number {
  padding-bottom: 4px;
  border-bottom: 2px solid #3883a3;
}
#full-clndr .clndr-grid .days .day.adjacent-month .day-number,
#full-clndr .clndr-grid .days .empty.adjacent-month .day-number {
  opacity: 0.3;
}
#full-clndr .clndr-grid .days .today {
  background-color: #AAA;
}
#full-clndr .clndr-grid .days .past:hover{
    background-color: #999;
}
#full-clndr .clndr-grid .days .today:hover{
    background-color: #999;
}
.focusIn{
    background-color:#0D70A6 !important;
}

 

 

這樣在HTML頭部引入這個樣式表後，就可使用js函數讓指定的那個div顯示成日曆了

代碼以下：

 $("#full-clndr").clndr({
        template: $('#id_clndr_template').html(),
        clickEvents: {
            onMonthChange: function(month) {
                // TODO: 這邊寫月份改變事件，控制底部線條圖的變化
            },
            click: function(target){
                var dateDom = $(target.element);
                if((!dateDom.hasClass("focusIn")) && (dateDom.hasClass("past") || dateDom.hasClass("today"))){
                    $(".focusIn").removeClass("focusIn");
                    dateDom.addClass("focusIn");
                    // TODO: 這邊寫日期改變的事件，控制右邊環形圖的變化
                    
                }
            },
        },
        daysOfTheWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
        forceSixRows : true,
        adjacentDaysChangeMonth : true,
    });