bootstrap 3 datepicker с пользовательской темой - неприятный вид

Я купил одну из пользовательских тем Metro, которая была частью курсов John Papa AngularJS/Breeze на Pluralsight. Все идет хорошо, пока я не попытался добавить в набор микс выбора Bootstrap 3. Прямо из коробки, это выглядит противно.bootstrap 3 datepicker с пользовательской темой - неприятный вид

enter image description here

Обратите внимание, что значок шрифта удивительным является несколько пикселей меньше, чем в поле ввода и что выпрыгивающее различной ширины столбцов и эти странные границы и отсутствие фона и т.д., и т.д.

 <div class="col-xs-6"> 
     <div class="input-group"> 
      <input type="text" class="form-control" 
        datepicker-popup="{{vm.dateFormat}}" 
        ng-model="vm.startDate" 
        is-open="vm.openedStart" 
        max-date="{{vm.endDate | date: 'yyyy-MM-dd'}}" 
        datepicker-options="{{vm.dateOptions}}" 
        ng-required="true" 
        show-button-bar="false" 
        show-weeks="false" /> 
      <span class="input-group-btn"> 
        <button type="button" class="btn btn-default" ng-click="vm.openStart($event)"><i class="fa fa-calendar"></i></button> 
      </span> 
     </div> 
    </div>

У меня, кажется, есть эта проблема, когда я пытаюсь использовать пользовательский стиль загрузочного стиля, который я загрузил, поэтому я, очевидно, пропустил что-то принципиальное в том, как работают настраиваемые наборы стилей.

Так что, учитывая, что у меня есть собственный стиль, как мне переустановить стиль datepicker, чтобы он выглядел намного более «по умолчанию»? Очевидно, что я должен искать CSS для него, и у меня есть файл customtheme.css, но там не так много для класса .ui-datepicker, и, безусловно, ничего, что когда-либо объясняло бы, почему это строки через календарь.

Может ли кто-нибудь дать мне совет или какие-то указания и как его очистить (значок и макет календаря) или, в общем, как очистить гремлины при использовании пользовательских тем?

источник

2014-12-05 cardinalPilot

показать значения 'vm.dateOptions' – Saqueib

var dateFormat = 'yyyy-MM-dd'; vm.dateOptions = { formatYear: 'yy', startDay: 1, showWeeks: false }; – cardinalPilot

Просто наблюдение, что большинство из этих «Bootstrap datepickers» очень трудно справиться с сенсорными устройствами, жирными пальцами и всеми остальными. Даже на планшетах и на небольших видовых экранах вам нужно прокрутить вниз. Это жидкий и большой: http://amsul.ca/pickadate.js/ - достаточно легко использовать вместо этого. Размер по умолчанию имеет довольно неплохую до 240px наименьшую ширину устройства, возможно, делает немного меньший размер шрифта при максимальной ширине, и вам хорошо идти. – Christina

я была аналогичная проблема, и она фиксируется путем добавления этого класса в dateOptions

vm.dateOptions = { 
    class: 'datepicker' 
};

CSS

.datepicker .btn-default { 
    border-width: 0; 
    box-shadow: none; 
}

это отключит shadow кнопки и избавиться от границ

источник

2014-12-05 04:33:13 Saqueib

Спасибо за ответ. Не имело никакого значения. – cardinalPilot

добавьте css, и он очистит проблему форматирования – Saqueib

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Bootstrap datepicket demo</title> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
 
    <script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css"> 
 
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script> 
 
<style> 
 
.datepicker-dropdown { 
 
    top: 0; 
 
    left: 0; 
 
    padding: 4px; 
 
    background-color: #2C6E8E; 
 
    border-radius: 10px; 
 
} 
 
.datepicker table { 
 
    margin: 0; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
} 
 

 
.datepicker table tr td, 
 
.datepicker table tr th { 
 
    text-align: center; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 4px; 
 
    border: none; 
 
    color: #FFFFFF; 
 
} 
 

 
.datepicker table tr td.day:hover, 
 
.datepicker table tr td.focused { 
 
    background: #555555; 
 
    cursor: pointer; 
 
} 
 
.datepicker table tr td.old, 
 
.datepicker table tr td.new { 
 
    color: #FF8000; 
 
} 
 

 
.datepicker table tr td.today { 
 
    color: #000000; 
 
    background-color: #FFA953; 
 
    border-color: #FFB76F; 
 
} 
 
.datepicker table tr td.today:hover { 
 
    color: #FFFFFF; 
 
    background-color: #884400; 
 
    border-color: #f59e00; 
 
} 
 
.datepicker table tr td.active:active, 
 
.datepicker table tr td.active.highlighted:active, 
 
.datepicker table tr td.active.active, 
 
.datepicker table tr td.active.highlighted.active, 
 
.open > .dropdown-toggle.datepicker table tr td.active, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted { 
 
    color: #ffffff; 
 
    background-color: #419841; 
 
    border-color: #285e8e; 
 
} 
 

 

 
.datepicker table tr td.active:active:hover, 
 
.datepicker table tr td.active.highlighted:active:hover, 
 
.datepicker table tr td.active.active:hover, 
 
.datepicker table tr td.active.highlighted.active:hover, 
 
.open > .dropdown-toggle.datepicker table tr td.active:hover, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover, 
 
.datepicker table tr td.active:active:focus, 
 
.datepicker table tr td.active.highlighted:active:focus, 
 
.datepicker table tr td.active.active:focus, 
 
.datepicker table tr td.active.highlighted.active:focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active:focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus, 
 
.datepicker table tr td.active:active.focus, 
 
.datepicker table tr td.active.highlighted:active.focus, 
 
.datepicker table tr td.active.active.focus, 
 
.datepicker table tr td.active.highlighted.active.focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus { 
 
    color: #ffffff; 
 
    background-color: #285e8e; 
 
    border-color: #193c5a; 
 
} 
 
.datepicker table tr td.active:active, 
 
.datepicker table tr td.active.highlighted:active, 
 
.datepicker table tr td.active.active, 
 
.datepicker table tr td.active.highlighted.active, 
 
.open > .dropdown-toggle.datepicker table tr td.active, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted { 
 
    color: #ffffff; 
 
    background-color: #3071a9; 
 
    border-color: #285e8e; 
 
} 
 
.datepicker table tr td.active:active:hover, 
 
.datepicker table tr td.active.highlighted:active:hover, 
 
.datepicker table tr td.active.active:hover, 
 
.datepicker table tr td.active.highlighted.active:hover, 
 
.open > .dropdown-toggle.datepicker table tr td.active:hover, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover, 
 
.datepicker table tr td.active:active:focus, 
 
.datepicker table tr td.active.highlighted:active:focus, 
 
.datepicker table tr td.active.active:focus, 
 
.datepicker table tr td.active.highlighted.active:focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active:focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus, 
 
.datepicker table tr td.active:active.focus, 
 
.datepicker table tr td.active.highlighted:active.focus, 
 
.datepicker table tr td.active.active.focus, 
 
.datepicker table tr td.active.highlighted.active.focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.focus, 
 
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus { 
 
    color: #ffffff; 
 
    background-color: #285e8e; 
 
    border-color: #193c5a; 
 
} 
 
.datepicker .datepicker-switch { 
 
    width: 145px; 
 
    
 
} 
 
.datepicker .datepicker-switch:hover, 
 
.datepicker .prev:hover, 
 
.datepicker .next:hover, 
 
.datepicker tfoot tr th:hover { 
 
    background: #50A2C9; 
 
} 
 
</style> 
 

 
<script type='text/javascript'> 
 
$(function(){ 
 
$('.input-group.date').datepicker({ 
 
    orientation: "auto left", 
 
    forceParse: false, 
 
    autoclose: true, 
 
    todayHighlight: true, 
 
    toggleActive: true 
 
}); 
 
}); 
 

 
</script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<h1>Custom datepicker</h1> 
 
<div class="input-group date"> 
 
    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

Надеюсь, что это поможет вам, а также проверьте это Link для справки.

источник

2018-02-06 04:49:58 Phoenix

bootstrap 3 datepicker с пользовательской темой - неприятный вид

ответ

Смежные вопросы