検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jquery.datepair 日付時分秒セレクター

jquery.datepair 日付時分秒セレクター

高洛峰
高洛峰オリジナル
2016-11-02 10:28:391545ブラウズ

jquery.datepair是一个轻量级的jQuery插件,智能选择日期和时间范围，灵感来自于谷歌日历。Datepair将保持开始和结束日期/时间同步，并可以根据用户的操作设置默认值。该插件不提供任何UI小部件; 它预先配置工作的jquery-timepicker和引导DatePicker的，但你可以使用它与任何日期选择器或timepicker。

实例代码

<p id="basicExample">
    <input type="text" class="date start" />
    <input type="text" class="time start" /> to    <input type="text" class="time end" />
    <input type="text" class="date end" /></p><script type="text/javascript" src="bootstrap-datepicker.js"></script><script type="text/javascript" src="jquery.timepicker.js"></script><script type="text/javascript" src="jquery.datepair.js"></script><script>
    // initialize input widgets first
    $(&#39;#basicExample .time&#39;).timepicker({        &#39;showDuration&#39;: true,        &#39;timeFormat&#39;: &#39;g:ia&#39;
    });    $(&#39;#basicExample .date&#39;).datepicker({        &#39;format&#39;: &#39;m/d/yyyy&#39;,        &#39;autoclose&#39;: true
    });    // initialize datepair
    $(&#39;#basicExample&#39;).datepair();</script>
// HTML not shown for brevity

$(&#39;#timeOnlyExample .time&#39;).timepicker({
    &#39;showDuration&#39;: true,
    &#39;timeFormat&#39;: &#39;g:ia&#39;
});

$(&#39;#timeOnlyExample&#39;).datepair();

$(&#39;#dateOnlyExample .date&#39;).datepicker({
    &#39;format&#39;: &#39;yyyy-m-d&#39;,
    &#39;autoclose&#39;: true
});

$(&#39;#dateOnlyExample&#39;).datepair();
// HTML not shown for brevity

$(&#39;#defaultDeltaExample&#39;).datepair({
    &#39;defaultDateDelta&#39;: 1,      // days
    &#39;defaultTimeDelta&#39;: 7200000 // milliseconds
});
<script type="text/javascript" src="pikaday.js"></script><script type="text/javascript" src="jquery.ptTimeSelect.js"></script><script type="text/javascript" src="moment.js"></script><script>
    // initialize input widgets
    // ptTimeSelect doesn&#39;t trigger change event by default
    $(&#39;#alternateUiWidgetsExample .time&#39;).ptTimeSelect({        &#39;onClose&#39;: function($self) {
            $self.trigger(&#39;change&#39;);
        }
    });    $(&#39;#alternateUiWidgetsExample .date&#39;).pikaday();    var TIMEFORMAT = &#39;h:mm a&#39;;    $(&#39;#alternateUiWidgetsExample&#39;).datepair({        parseTime: function($input){            // use moment.js to parse time
            var m = moment($input.val(), TIMEFORMAT);            return m.toDate();
        },        updateTime: function($input, dateObj){            var m = moment(dateObj);
            $input.val(m.format(TIMEFORMAT));
        },        parseDate: function($input){            var picker = $input.data(&#39;pikaday&#39;);            return picker.getDate();
        },        updateDate: function($input, dateObj){            var picker = $input.data(&#39;pikaday&#39;);            return picker.setDate(dateObj);
        }
    });</script>
// HTML not shown for brevity

// initialize input widgets first
$(&#39;#eventsExample .time&#39;).timepicker({
    &#39;showDuration&#39;: true,
    &#39;timeFormat&#39;: &#39;g:ia&#39;
});

$(&#39;#eventsExample .date&#39;).datepicker({
    &#39;format&#39;: &#39;m/d/yyyy&#39;,
    &#39;autoclose&#39;: true
});

$(&#39;#eventsExample&#39;).datepair().on(&#39;rangeSelected&#39;, function(){
    $(&#39;#eventsExampleStatus&#39;).text(&#39;Valid range selected&#39;);
}).on(&#39;rangeIncomplete&#39;, function(){
    $(&#39;#eventsExampleStatus&#39;).text(&#39;Incomplete range&#39;);
}).on(&#39;rangeError&#39;, function(){
    $(&#39;#eventsExampleStatus&#39;).text(&#39;Invalid range&#39;);
});


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptで整数の型を判定する最も簡単な実装方法次の記事：JavaScriptで整数の型を判定する最も簡単な実装方法

関連記事

続きを見る