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

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

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

$('#timeOnlyExample').datepair();

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

$('#dateOnlyExample').datepair();

// HTML not shown for brevity

$('#defaultDeltaExample').datepair({
    'defaultDateDelta': 1,      // days
    'defaultTimeDelta': 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
$('#eventsExample .time').timepicker({
    'showDuration': true,
    'timeFormat': 'g:ia'
});

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

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