1

我有一个页面，其中有多个pickadate 和pickatime 输入。我怎样才能将 jquery 整合到我有一个电话pickadate和一个电话pickatime的地方？

这是标记。

<div class="container">
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">*</span> Display Start Date</label>
            <input type="text" class="form-control select-date display-start-date" required>
            <i id="trigger1" class="calendar-icon"></i>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">*</span> Display Start Time</label>
            <input type="text" class="form-control select-time display-start-time" required>
            <i id="trigger2" class="fa fa-clock-o fa-2x"></i>
        </div>
    </div>
    <div class="col=xs-6"></div>
</div>
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">*</span> Display End Date</label>
            <input type="text" class="form-control select-date display-end-date" required>
            <i id="trigger3" class="calendar-icon"></i>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">*</span> Display End Time</label>
            <input type="text" class="form-control select-time display-end-time" required>
            <i id="trigger4" class="fa fa-clock-o fa-2x"></i>
        </div>
    </div>
    <div class="col-xs-6"></div>
</div>
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">NEW!</span> Start Date</label>
            <input type="text" class="form-control select-date new-start-date">
            <i id="trigger5" class="calendar-icon"></i>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">NEW!</span> Start Time</label>
            <input type="text" class="form-control select-time new-start-time" required>
            <i id="trigger6" class="fa fa-clock-o fa-2x"></i>
        </div>
    </div>
    <div class="col-xs-6"></div>
</div>
<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">NEW!</span> End Date</label>
            <input type="text" class="form-control select-date new-end-date">
            <i id="trigger7" class="calendar-icon"></i>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label><span class="required">NEW!</span> End Time</label>
            <input type="text" class="form-control select-time new-end-time" required>
            <i id="trigger8" class="fa fa-clock-o fa-2x"></i>
        </div>
    </div>
    <div class="col-xs-6"></div>
</div>
</div>

这是jquery。

// Initialize datepicker.
        // Add Video - Display Start Date
        var $input1 = $('.display-start-date').pickadate({
            format: 'mm/dd/yyyy',
            editable: true
        });
        var picker1 = $input1.data('pickadate');

        $('#trigger1').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker1.open();
        });

        // Add Video - Display Start Time
        var $input2 = $('.display-start-time').pickatime({
            interval: 15,
            editable: true
        });
        var picker2 = $input2.data('pickatime');

        $('#trigger2').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker2.open();
        });

        // Add Video - Display End Date
        var $input3 = $('.display-end-date').pickadate({
            format: 'mm/dd/yyyy',
            editable: true
        });
        var picker3 = $input3.data('pickadate');

        $('#trigger3').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker3.open();
        });

        // Add Video - Display End Time
        var $input4 = $('.display-end-time').pickatime({
            interval: 15,
            editable: true
        });
        var picker4 = $input4.data('pickatime');

        $('#trigger4').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker4.open();
        });

        // Add Video - New! Start Date
        var $input5 = $('.new-start-date').pickadate({
            format: 'mm/dd/yyyy',
            editable: true
        });
        var picker5 = $input5.data('pickadate');

        $('#trigger5').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker5.open();
        });

        // Add Video - NEW! Start Time
        var $input6 = $('.new-start-time').pickatime({
            interval: 15,
            editable: true
        });
        var picker6 = $input6.data('pickatime');

        $('#trigger6').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker6.open();
        });

        // Add Video - New! End Date
        var $input7 = $('.new-end-date').pickadate({
            format: 'mm/dd/yyyy',
            editable: true
        });
        var picker7 = $input7.data('pickadate');

        $('#trigger7').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker7.open();
        });

        // Add Video - NEW! End Time
        var $input8 = $('.new-end-time').pickatime({
            interval: 15,
            editable: true
        });
        var picker8 = $input8.data('pickatime');

        $('#trigger8').click( function( e ) {
            e.stopPropagation();
            e.preventDefault();
            picker8.open();
        });

提前致谢！

4

1 回答 1

2

这是一个更清洁的东西。它分别处理日期选择器和时间选择器。

$('.select-date').pickadate({
    format: 'mm/dd/yyyy',
    editable: true
});

$('.calendar-icon').each( function() {
   // find the date picker element in this form-group
   $picker = $(this).closest('.form-group').find('.select-date');
   $picker.on('click', function(ev) {
       ev.stopPropagation();
       ev.preventDefault();
       picker = $picker.data('pickadate')
       picker.open();
   });

$('.select-time').pickatime({
   interval: 15,
   editable: true
});

$('.fa-clock-o').each( function() {
   // find the date picker element in this form-group
   $picker = $(this).closest('.form-group').find('.select-time');
   $picker.on('click', function(ev) {
       ev.stopPropagation();
       ev.preventDefault();
       picker = $picker.data('pickatime')
       picker.open();
   });

如果你给你所有的图标触发器一个类（比如date-triggerand time-trigger，那么你可以改变：

$('.calendar-icon').each( function() {

至

$('.date-trigger').each( function() {

时间选择器也是如此。这使得选择器更少依赖于您正在使用的特定图标。

这应该为整个页面设置内容。

于 2015-05-26T07:33:10.777 回答