基于Kalendaer的日期多選

筆者，最近遇到一個需求，年份的多選事件。筆者之前見到的大多是月份多選，日子多選，時間多選，但是年份多選還是頭回遇到。但是呢，有需求就說明有他存在的可然性。對于強大的代碼來說，你覺得他能實現(xiàn)的那么他就一定能實現(xiàn)，還有你覺得他不一定的實現(xiàn)的，他有可能可以實現(xiàn)。
My97DatePicker插件，不能多選；
Kalendae插件，不兼容IE，且也沒有關(guān)于能支持年份多選的介紹啊。
雖然，沒有介紹年份的選擇，但是呢，筆者想調(diào)試一下使其兼容IE，然后像碰運氣一樣（修手機的，淘了一臺低價進水的手機，修修看）看看能否實現(xiàn)多年份選擇。
一、引入Kalendae插件

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了密云免費建站歡迎大家使用！

<script type="text/javascript" src="build/kalendae.standalone.js" ></script>
<link rel="stylesheet" href="build/kalendae.css" />

二、修改使其兼容IE8，就夠了。
將kalendae.standalone.js中的這段注釋

this._events.inputFocus = util.addEvent($input, 'focus', function () {
        changing = true; // prevent setSelected from altering the input contents.
        self.setSelected(this.value);
        changing = false;
        self.show();
    });

    this._events.inputBlur = util.addEvent($input, 'blur', function () {
        if (noclose && util.isIE8()) {
            noclose = false;
            $input.focus();
        }
        else self.hide();
    });

在其后插入這段：

var DEFAULT_VERSION = 8;
var isIE8 = false;
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie")>-1;
var safariVersion;
if(isIE){
    safariVersion =  ua.match(/msie ([\d.]+)/)[1];
    if(parseInt(safariVersion) <= DEFAULT_VERSION ){
        isIE8 = true;
    }
}
this._events.inputFocus = util.addEvent($input, 'focus', function () {
    changing = true; // prevent setSelected from altering the input contents.
    if(!isIE8){
        self.setSelected(this.value);
    }
    isIE8 = false;
    changing = false;
    self.show();
});
this._events.inputBlur = util.addEvent($input, 'blur', function () {
    if (noclose && util.isIE8()) {
        noclose = false;
        isIE8 = true;
        $input.focus();
    }
    else self.hide();
});

三、接下來，我們探索其能否進行，多年份的選擇

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>年份多選器</title>
        <script type="text/javascript" src="build/kalendae.standalone.js" ></script>
        <link rel="stylesheet" href="build/kalendae.css" />
    </head>
    <body>
        <controls:Calendar DisplayMode="Month"></controls:Calendar>
         <input class="auto-kal" data-kal="mode:'multiple'"></input>

         <!--
            mode：”single”|”multiple”|”range”?？丶x擇模式：單個日期選擇，多個日期選擇，選擇日期范圍。
            months：顯示月份數(shù)。
            direction：”past”|”today-past”|”any”|”today-future”|”future”。可選日期范圍：今日以前，今日及今日以前，無限制，今日及今日以后，今日以后。
         -->
    </body>
</html>

基于Kalendaer的日期多選

好吧，筆者仔細讀了一下官方文檔（全英文的，都不認得），這貨好像只能實現(xiàn)日期的多選，連月份的多選都不能實現(xiàn)，更別說是年份的多選了?？磥砉P者還得再找找或者自己做做看了（修手機的，淘了個廢品）。

網(wǎng)頁標題：基于Kalendaer的日期多選
URL標題：http://bm7419.com/article4/gipeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、、App開發(fā)、軟件開發(fā)、微信公眾號、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容