jquery.datepair日期时分秒选择器-js教程-PHP中文网

jquery.datepair日期时分秒选择器

高洛峰

发布： 2016-11-02 10:28:39

原创

1734人浏览过

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
    $('#basicExample .time').timepicker({        'showDuration': true,        'timeFormat': 'g:ia'
    });    $('#basicExample .date').datepicker({        'format': 'm/d/yyyy',        'autoclose': true
    });    // initialize datepair
    $('#basicExample').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't trigger change event by default
    $('#alternateUiWidgetsExample .time').ptTimeSelect({        'onClose': function($self) {
            $self.trigger('change');
        }
    });    $('#alternateUiWidgetsExample .date').pikaday();    var TIMEFORMAT = 'h:mm a';    $('#alternateUiWidgetsExample').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('pikaday');            return picker.getDate();
        },        updateDate: function($input, dateObj){            var picker = $input.data('pikaday');            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');
});

登录后复制