mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 11:16:39 -05:00
Use pickadate instead of the jquery datetimepicker to select dates in the dashboard, initialize new dates with the current date, and tweak input styles a bit
This commit is contained in:
parent
b0a5a55c9a
commit
0b3a322bf3
5 changed files with 39 additions and 16 deletions
|
@ -11,9 +11,9 @@
|
||||||
"awesome-bootstrap-checkbox": "~0.3.7",
|
"awesome-bootstrap-checkbox": "~0.3.7",
|
||||||
"Sortable": "~1.6.0",
|
"Sortable": "~1.6.0",
|
||||||
"simplemde": "~1.11.2",
|
"simplemde": "~1.11.2",
|
||||||
"datetimepicker": "~2.5.16",
|
|
||||||
"SpinKit": "~1.2.5",
|
"SpinKit": "~1.2.5",
|
||||||
"bootstrap-sass": "^3.3.7",
|
"bootstrap-sass": "^3.3.7",
|
||||||
"list.js": "^1.5.0"
|
"list.js": "^1.5.0",
|
||||||
|
"pickadate": "^3.5.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
3
gulpfile.js
vendored
3
gulpfile.js
vendored
|
@ -61,7 +61,8 @@ const jsDashboardLibs = [
|
||||||
"bower_components/jquery/dist/jquery.js",
|
"bower_components/jquery/dist/jquery.js",
|
||||||
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
||||||
"bower_components/Sortable/Sortable.js",
|
"bower_components/Sortable/Sortable.js",
|
||||||
"bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
|
"bower_components/pickadate/lib/picker.js",
|
||||||
|
"bower_components/pickadate/lib/picker.date.js",
|
||||||
"bower_components/list.js/dist/list.js",
|
"bower_components/list.js/dist/list.js",
|
||||||
"bower_components/simplemde/dist/simplemde.min.js"
|
"bower_components/simplemde/dist/simplemde.min.js"
|
||||||
];
|
];
|
||||||
|
|
18
resources/assets/js/dashboard.js
vendored
18
resources/assets/js/dashboard.js
vendored
|
@ -263,7 +263,7 @@ function editItemInit() {
|
||||||
$submit = $("#submit"),
|
$submit = $("#submit"),
|
||||||
$backButton = $("#back"),
|
$backButton = $("#back"),
|
||||||
$textInputs = $(".text-input"),
|
$textInputs = $(".text-input"),
|
||||||
$dateTimePickers = $(".date-time-picker"),
|
$datePickers = $(".date-picker"),
|
||||||
$mkdEditors = $(".mkd-editor"),
|
$mkdEditors = $(".mkd-editor"),
|
||||||
$imgUploads = $(".image-upload"),
|
$imgUploads = $(".image-upload"),
|
||||||
$token = $("#_token"),
|
$token = $("#_token"),
|
||||||
|
@ -327,8 +327,8 @@ function editItemInit() {
|
||||||
addFormData(column, value);
|
addFormData(column, value);
|
||||||
});
|
});
|
||||||
|
|
||||||
// add values from the contents of date-time-picker class elements
|
// add values from the contents of date-picker class elements
|
||||||
$dateTimePickers.each(function() {
|
$datePickers.each(function() {
|
||||||
const $this = $(this),
|
const $this = $(this),
|
||||||
column = $this.attr("id"),
|
column = $this.attr("id"),
|
||||||
value = $this.val() + ":00";
|
value = $this.val() + ":00";
|
||||||
|
@ -401,12 +401,12 @@ function editItemInit() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// enable the datetimepicker for each element with the date-time-picker class
|
// enable the datepicker for each element with the date-picker class
|
||||||
$dateTimePickers.each(function() {
|
$datePickers.each(function() {
|
||||||
$(this).datetimepicker({
|
$(this).pickadate({
|
||||||
format: "Y-m-d H:i",
|
format: "yyyy-mm-dd",
|
||||||
allowTimes: allowTimes,
|
formatSubmit: "yyyy-mm-dd",
|
||||||
step: 15
|
clear: false
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
28
resources/assets/sass/dashboard.scss
vendored
28
resources/assets/sass/dashboard.scss
vendored
|
@ -2,7 +2,8 @@
|
||||||
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
||||||
@import "font-awesome/scss/font-awesome.scss";
|
@import "font-awesome/scss/font-awesome.scss";
|
||||||
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
|
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
|
||||||
@import "datetimepicker/jquery.datetimepicker";
|
@import "pickadate/lib/themes/default";
|
||||||
|
@import "pickadate/lib/themes/default.date";
|
||||||
@import "simplemde/dist/simplemde.min";
|
@import "simplemde/dist/simplemde.min";
|
||||||
@import "SpinKit/css/spinners/11-folding-cube";
|
@import "SpinKit/css/spinners/11-folding-cube";
|
||||||
|
|
||||||
|
@ -338,8 +339,18 @@ body {
|
||||||
|
|
||||||
.edit-item {
|
.edit-item {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
.CodeMirror, .CodeMirror-scroll { min-height: 100px; }
|
|
||||||
.date-time-picker { cursor: pointer; }
|
.CodeMirror, .CodeMirror-scroll {
|
||||||
|
min-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CodeMirror {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker__holder {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
@ -350,6 +361,17 @@ body {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&:not([type=file]) {
|
||||||
|
padding: 5px 8px;
|
||||||
|
border: 1px solid darken($c-dashboard-light, 10%);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: border-color 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.date-picker {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-image {
|
.current-image {
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
@if($column['type'] == 'text')
|
@if($column['type'] == 'text')
|
||||||
<input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" />
|
<input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" />
|
||||||
@elseif($column['type'] == 'date')
|
@elseif($column['type'] == 'date')
|
||||||
<input class="date-time-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
|
<input class="date-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value == '' ? date('Y-m-d', time()) : preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
|
||||||
@elseif($column['type'] == 'mkd')
|
@elseif($column['type'] == 'mkd')
|
||||||
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
|
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
|
||||||
@elseif($column['type'] == 'select')
|
@elseif($column['type'] == 'select')
|
||||||
|
|
Loading…
Reference in a new issue