<style>

.checkin-filter-panel {
    display:flex;
    flex-flow:row;
    align-content:center;
    justify-content:flex-start;
    margin:0;
    margin-bottom:10px;
}

.form-label {
    margin:0;
    margin-bottom:10px;
}

.form-control {
    margin:0;
    margin-bottom:10px;
}

.checkin-filter-column {
    margin:0;
    margin-right:10px;
    display:flex;
    flex-flow:column;
    align-content:center;
    justify-content:center;
}

.date {
    width:100px;
    text-align:center;
}

</style>


<div class="checkin-filter-panel">
    <div class="checkin-filter-column">
        <div>Дата с <input type="text" data-pmu-format="d.m.Y" name="startDate" class="date startDate" /></div>
    </div>
    <div class="checkin-filter-column">
        <div>по <input type="text" data-pmu-format="d.m.Y" name="endDate" class="date endDate" /></div>
    </div>
    <div class="checkin-filter-column">
        <div>
            <input type="checkbox"> регистрация запрошена <input type="checkbox"> регистрация выполнена <input type="checkbox"> регистрация отменена<br/>
        </div>
    </div>
    <div class="checkin-filter-column">
        <input type="button" value="Показать" name="checkin-filter-process" class="my-button"/>
    </div>
</div>
<script>
addEventListener('DOMContentLoaded', function () {
    pickmeup('.startDate', {
        locale: 'ru',
		position       : 'right',
		hide_on_select : true
	});
    pickmeup('.endDate', {
        locale: 'ru',
		position       : 'right',
		hide_on_select : true
	});
});
</script>