Style datetime picker inputs

This commit is contained in:
Christopher C. Wells 2020-01-27 21:03:55 -08:00 committed by Christopher Charbonneau Wells
parent e587ddeccd
commit e168babd86
13 changed files with 58 additions and 57 deletions

View File

@ -35,9 +35,28 @@
color: $gray-400; color: $gray-400;
} }
.datetimepicker-input[readonly] { // Datetime picker input styles.
background: none; .input-group {
border: 0; &.datetimepicker {
color: $white;
font-weight: bold; // Make calendar icon large and use the primary theme color.
} .input-group-text {
background: none;
border: 0;
color: theme-color('primary');
padding-left: 0;
padding-right: 0;
}
// Style readonly input to look less like an input element.
.datetimepicker-input {
&[readonly] {
background: none;
border: 0;
color: $white;
cursor: pointer;
font-weight: bold;
}
}
}
}

View File

@ -18,9 +18,9 @@
</label> </label>
</div> </div>
{% elif field|field_type == "datetimefield" or field|field_type == "datefield" %} {% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
<div class="input-group input-group-lg date" id="datetimepicker_{{ field.name }}" data-target-input="nearest"> <div class="input-group input-group-lg datetimepicker" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
<div class="input-group-prepend" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker"> <div class="input-group-prepend" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span> <span class="input-group-text"><i class="fa fa-lg fa-calendar"></i></span>
</div> </div>
{% if field.errors %} {% if field.errors %}
{{ field|add_class:"datetimepicker-input form-control form-control-lg is-invalid" }} {{ field|add_class:"datetimepicker-input form-control form-control-lg is-invalid" }}

View File

@ -1,28 +1,4 @@
@charset "UTF-8"; @charset "UTF-8";
.breadcrumb {
margin-bottom: 0; }
.btn-xs {
padding: 0.2rem 0.12rem;
font-size: 0.75rem;
line-height: 1;
border-radius: 0.2rem; }
.dropdown-menu-right {
right: 0;
left: auto; }
.invalid-feedback {
display: block; }
.btn-no-hover:hover {
color: inherit;
background-color: inherit;
border-color: inherit; }
.bootstrap-datetimepicker-widget {
color: #ced4da; }
/*! /*!
* Bootstrap v4.4.1 (https://getbootstrap.com/) * Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
@ -7626,6 +7602,20 @@ a.text-error:hover, a.text-error:focus {
.bootstrap-datetimepicker-widget { .bootstrap-datetimepicker-widget {
color: #ced4da; } color: #ced4da; }
.input-group.datetimepicker .input-group-text {
background: none;
border: 0;
color: #226f97;
padding-left: 0;
padding-right: 0; }
.input-group.datetimepicker .datetimepicker-input[readonly] {
background: none;
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold; }
/*! /*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

Binary file not shown.

View File

@ -1,28 +1,4 @@
@charset "UTF-8"; @charset "UTF-8";
.breadcrumb {
margin-bottom: 0; }
.btn-xs {
padding: 0.2rem 0.12rem;
font-size: 0.75rem;
line-height: 1;
border-radius: 0.2rem; }
.dropdown-menu-right {
right: 0;
left: auto; }
.invalid-feedback {
display: block; }
.btn-no-hover:hover {
color: inherit;
background-color: inherit;
border-color: inherit; }
.bootstrap-datetimepicker-widget {
color: #ced4da; }
/*! /*!
* Bootstrap v4.4.1 (https://getbootstrap.com/) * Bootstrap v4.4.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors * Copyright 2011-2019 The Bootstrap Authors
@ -7626,6 +7602,20 @@ a.text-error:hover, a.text-error:focus {
.bootstrap-datetimepicker-widget { .bootstrap-datetimepicker-widget {
color: #ced4da; } color: #ced4da; }
.input-group.datetimepicker .input-group-text {
background: none;
border: 0;
color: #226f97;
padding-left: 0;
padding-right: 0; }
.input-group.datetimepicker .datetimepicker-input[readonly] {
background: none;
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold; }
/*! /*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

Binary file not shown.

View File

@ -23,6 +23,7 @@ BabyBuddy.DatetimePicker = function ($, moment) {
return { return {
init: function (element, options) { init: function (element, options) {
var defaultOptions = { var defaultOptions = {
allowInputToggle: true,
buttons: { showToday: true, showClose: true }, buttons: { showToday: true, showClose: true },
defaultDate: 'now', defaultDate: 'now',
format: 'L LT', format: 'L LT',

Binary file not shown.

View File

@ -23,6 +23,7 @@ BabyBuddy.DatetimePicker = function ($, moment) {
return { return {
init: function (element, options) { init: function (element, options) {
var defaultOptions = { var defaultOptions = {
allowInputToggle: true,
buttons: { showToday: true, showClose: true }, buttons: { showToday: true, showClose: true },
defaultDate: 'now', defaultDate: 'now',
format: 'L LT', format: 'L LT',

Binary file not shown.

File diff suppressed because one or more lines are too long