работал над чем-то в jsfiddle: https://jsfiddle.net/JoeEarly/cgqugebe/23/
HTML:
<form class="form-inline">
<div class="col-md-4 form-group" id="riversCol">
<input name="rivers" id="rivers" placeholder="Where" ng-model="selected" typeahead="river for river in states | filter:$viewValue | limitTo:8" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false"
aria-owns="typhead-3-3802" type="text">
<i class="fa fa-map-marker icon" aria-hidden="true"></i>
</div>
<div class="col-md-3 form-group" id="whenCol">
<input type="text" class="form-control" id='weeklyDatePicker' placeholder="Select Week">
<i class="fa fa-calendar icon" aria-hidden="true"></i>
</div>
<div class="col-md-3 form-group" id="whatCol">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="whatBtn"> <span class="text" id="whatTotal"><span class="day-count">0</span> days, <span class="rod-count">0</span> rod/s</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<div class="selector"> <strong class="">Days</strong>
<div class="selection days" data-count="0" data-id="day">
<button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button> <span class="count">0</span>
<button type="button" class="btn btn-default btn-sm plus" id="what"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="selector"> <strong class="">Rods</strong>
<div class="selection days" data-count="0" data-id="rod">
<button type="button" class="btn btn-default btn-sm minus"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button> <span class="count">0</span>
<button type="button" class="btn btn-default btn-sm plus"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-2" id="searchBtnCol">
<button type="submit" class="btn btn-primary" id="searchBtn">Search</button>
</div>
</form>
CSS
.bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover
{
background-color: #eee;
}
/* CSS used here will be applied after bootstrap.css */
#rivers {
width: 500px;
border-radius: 0 !important;
}
#whatBtn {
border-radius: 0 !important;
}
#weeklyDatePicker {
width: 100%;
border-radius: 0 !important;
}
#riversCol {
padding-right: 0px;
}
#whenCol {
padding-left: 0px;
padding-right: 0px
}
#whatCol {
padding-left: 0px;
padding-right: 0px;
width: inherit;
}
#whatTotal {
color: gray;
}
#searchBtnCol {
padding-left: 0px;
}
#searchBtn {
border-radius: 0 !important;
}
.input-group-btn>* {
border-radius: 0 !important;
}
.dropdown-toggle .text {
margin-right: 20px;
}
.dropdown-menu>.selector {
padding: 5px 20px;
strong {
line-height: 30px;
}
.selection {
float: right;
margin-left: 40px;
height: 30px;
.count {
display: inline-block;
width: 20px;
text-align: center;
}
}
}
.icon {
float: right;
margin-right: 8px;
margin-top: -24px;
position: relative;
z-index: 1;
color: #337ab7;
}
.form-control:focus,
.dropdown-toggle:focus {
border-bottom-color: #337ab7;
border-bottom-width: thick;
}
#searchForm {
position: absolute;
top: 10%;
left: 10%;
}
#whatCol > div {
min-width: inherit;
border-bottom-color: #337ab7;
border-bottom-width: thick;
}
.open>.dropdown-toggle.btn-default:hover {
border-color: #337ab7;
}
JS
// Prevent dropdown menu from closing on clicks inside it
var dropdown = $('.dropdown-toggle').parent();
dropdown.on('show.bs.dropdown', function() {
dropdown.data('closeable', true);
}).on('click', function(event) {
if ($(event.target).closest('.dropdown-toggle').length) {
dropdown.data('closeable', true);
} else {
dropdown.data('closeable', false);
}
}).on('hide.bs.dropdown', function(event) {
var closeable = dropdown.data('closeable');
dropdown.data('closeable', true);
return closeable;
});
$('.selection').each(function() {
var $this = $(this);
var dropdownCount = $('.dropdown-toggle').find('.' +
$this.data('id') +
'-count')
var count = $this.data('count')
$this.find('.minus').on('click', function(event) {
if (count === 0) {
//do nothing
return;
} else {
count--;
$this.data('count', count);
dropdownCount.text(count);
$this.find('.count').text(count);
}
});
$this.find('.plus').on('click', function(event) {
count++;
$this.data('count', count);
dropdownCount.text(count);
$this.find('.count').text(count);
});
});
/*--------------END--------------*/
$(document).ready(function() {
moment.locale('en', {
week: {
dow: 1
} // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you
can
//have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'DD-MM-YYYY'
});
//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function(e) {
var value = $("#weeklyDatePicker").val();
var firstDate = moment(value, "DD-MM-YYYY").day(1).format("DD-MM-
YYYY");
$("#weeklyDatePicker").val(firstDate);
});
});
Теперь в поле «Когда» в jsfiddle все работает нормально. средство выбора даты и времени появляется ниже и так далее.
Поэтому я добавил его на свою основную html-страницу, где он должен был появиться, и все прошло хорошо, за исключением того, что datetimepicker перестал появляться в соответствии с демонстрацией jsfiddle. Основной HTML: h//p://new.fishpal.com
Появляется, если я применяю display: block к меню datetimepicker с помощью инструментов chrome dev, он появится, но он должен делать это по умолчанию, поэтому что-то пропущено.