首頁 > 文章 > web前端 > jquery.datepair日期時分秒選擇器

jquery.datepair日期時分秒選擇器

高洛峰原創: 2016-11-02 10:28:391518瀏覽

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中判斷整字型別最簡潔的實作方法

看更多

jquery.datepair日期時分秒選擇器

相關文章