mirror of https://github.com/snachodog/mybuddy.git
Style datetime picker inputs
This commit is contained in:
parent
e587ddeccd
commit
e168babd86
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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" }}
|
||||||
|
|
Binary file not shown.
|
@ -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.
|
@ -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.
Binary file not shown.
|
@ -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.
|
@ -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
Loading…
Reference in New Issue