Question

我有一个页面有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();
        });

提前致谢！

Answer 1

这里有点清洁的东西。它分别处理日期选择器和时间选择器。

$('.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-trigger和time-trigger，那么您可以更改：

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

到

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

和时间选择器相同。这使得选择器更少依赖于您正在使用的特定图标。

这应该为整个页面设置。

如何在一个页面上为多个输入合并pickadate初始化程序？

1 个答案: