基于Kalendaer的日期多選

發(fā)布時(shí)間：2020-07-23 10:37:24 來(lái)源：網(wǎng)絡(luò) 閱讀：1373 作者：Red_Ant_hoyl 欄目：web開(kāi)發(fā)

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

<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();
});

三、接下來(lái)，我們探索其能否進(jìn)行，多年份的選擇

<!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”。控件選擇模式：?jiǎn)蝹€(gè)日期選擇，多個(gè)日期選擇，選擇日期范圍。
            months：顯示月份數(shù)。
            direction：”past”|”today-past”|”any”|”today-future”|”future”?？蛇x日期范圍：今日以前，今日及今日以前，無(wú)限制，今日及今日以后，今日以后。
         -->
    </body>
</html>

基于Kalendaer的日期多選

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

向AI問(wèn)一下細(xì)節(jié)

基于Kalendaer的日期多選

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽