How can I consolidate pickadate initializer for mu

Question

I have a page that has multiple inputs for pickadate and pickatime. How can I consilidate the jquery to where I have one call for pickadate and one call for pickatime?

Here is the markup.

<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>

And here is the 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();
        });

Thanks in advance!

Answer 1

Here's something that is a little cleaner. It deals with the date pickers and the time pickers separately.

$('.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();
   });

And if you gave all your icon triggers a class (like date-trigger and time-trigger, then you could change:

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

to

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

and the same for the timepickers. This makes the selector less dependent on the particular icon you are using.

And this should set things up for the whole page.