How can I consolidate pickadate initializer for multiple inputs on one page? - pickadate

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.