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",
|
||||
"Sortable": "~1.6.0",
|
||||
"simplemde": "~1.11.2",
|
||||
"datetimepicker": "~2.5.16",
|
||||
"SpinKit": "~1.2.5",
|
||||
"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/bootstrap-sass/assets/javascripts/bootstrap.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/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"),
|
||||
$backButton = $("#back"),
|
||||
$textInputs = $(".text-input"),
|
||||
$dateTimePickers = $(".date-time-picker"),
|
||||
$datePickers = $(".date-picker"),
|
||||
$mkdEditors = $(".mkd-editor"),
|
||||
$imgUploads = $(".image-upload"),
|
||||
$token = $("#_token"),
|
||||
|
@ -327,8 +327,8 @@ function editItemInit() {
|
|||
addFormData(column, value);
|
||||
});
|
||||
|
||||
// add values from the contents of date-time-picker class elements
|
||||
$dateTimePickers.each(function() {
|
||||
// add values from the contents of date-picker class elements
|
||||
$datePickers.each(function() {
|
||||
const $this = $(this),
|
||||
column = $this.attr("id"),
|
||||
value = $this.val() + ":00";
|
||||
|
@ -401,12 +401,12 @@ function editItemInit() {
|
|||
}
|
||||
}
|
||||
|
||||
// enable the datetimepicker for each element with the date-time-picker class
|
||||
$dateTimePickers.each(function() {
|
||||
$(this).datetimepicker({
|
||||
format: "Y-m-d H:i",
|
||||
allowTimes: allowTimes,
|
||||
step: 15
|
||||
// enable the datepicker for each element with the date-picker class
|
||||
$datePickers.each(function() {
|
||||
$(this).pickadate({
|
||||
format: "yyyy-mm-dd",
|
||||
formatSubmit: "yyyy-mm-dd",
|
||||
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 "font-awesome/scss/font-awesome.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 "SpinKit/css/spinners/11-folding-cube";
|
||||
|
||||
|
@ -338,8 +339,18 @@ body {
|
|||
|
||||
.edit-item {
|
||||
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 {
|
||||
height: 32px;
|
||||
|
@ -350,6 +361,17 @@ body {
|
|||
margin-bottom: 15px;
|
||||
display: block;
|
||||
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 {
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
@if($column['type'] == 'text')
|
||||
<input class="text-input" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}" />
|
||||
@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')
|
||||
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
|
||||
@elseif($column['type'] == 'select')
|
||||
|
|
Loading…
Reference in a new issue