Extracting datetime flatpickr for use throught website

This commit is contained in:
rockstardev 2019-05-11 14:07:13 -05:00 committed by Nicolas Dorier
parent 5358f81ce0
commit 07cb6adb69
6 changed files with 49 additions and 71 deletions

View file

@ -69,8 +69,8 @@
<label asp-for="StartDate" class="control-label"></label> <label asp-for="StartDate" class="control-label"></label>
<div class="input-group "> <div class="input-group ">
<input asp-for="StartDate" <input asp-for="StartDate"
value="@( Model.StartDate?.ToString("u", CultureInfo.InvariantCulture))" value="@(Model.StartDate?.ToString("u", CultureInfo.InvariantCulture))"
class="datetime form-control" placeholder="No start date has been set for this crowdfund"/> class="form-control flatdtpicker" placeholder="No start date has been set for this crowdfund" />
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear"> <button class="btn btn-secondary input-group-clear" type="button" title="Clear">
@ -96,10 +96,9 @@
<div class="form-group"> <div class="form-group">
<label asp-for="EndDate" class="control-label"></label> <label asp-for="EndDate" class="control-label"></label>
<div class="input-group "> <div class="input-group ">
<input type="datetime-local" asp-for="EndDate" <input type="datetime-local" asp-for="EndDate"
value="@( Model.EndDate?.ToString("u", CultureInfo.InvariantCulture))" value="@(Model.EndDate?.ToString("u", CultureInfo.InvariantCulture))"
class="datetime form-control" class="form-control flatdtpicker"
type="datetime-local"
placeholder="No end date has been set for this crowdfund" /> placeholder="No end date has been set for this crowdfund" />
<div class="input-group-append"> <div class="input-group-append">
@ -145,46 +144,46 @@
<span asp-validation-for="NotificationUrl" class="text-danger"></span> <span asp-validation-for="NotificationUrl" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="NotificationEmail" class="control-label"></label> <label asp-for="NotificationEmail" class="control-label"></label>
@if (Model.NotificationEmailWarning) @if (Model.NotificationEmailWarning)
{ {
<partial name="NotificationEmailWarning"></partial> <partial name="NotificationEmailWarning"></partial>
} }
<input type="email" asp-for="NotificationEmail" class="form-control"/> <input type="email" asp-for="NotificationEmail" class="form-control" />
<span asp-validation-for="NotificationEmail" class="text-danger"></span> <span asp-validation-for="NotificationEmail" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="Enabled"></label> <label asp-for="Enabled"></label>
<input asp-for="Enabled" type="checkbox" class="form-check"/> <input asp-for="Enabled" type="checkbox" class="form-check" />
<span asp-validation-for="Enabled" class="text-danger"></span> <span asp-validation-for="Enabled" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="SortPerksByPopularity"></label> <label asp-for="SortPerksByPopularity"></label>
<input asp-for="SortPerksByPopularity" type="checkbox" class="form-check"/> <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check" />
<span asp-validation-for="SortPerksByPopularity" class="text-danger"></span> <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="DisplayPerksRanking"></label> <label asp-for="DisplayPerksRanking"></label>
<input asp-for="DisplayPerksRanking" type="checkbox" class="form-check"/> <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check" />
<span asp-validation-for="DisplayPerksRanking" class="text-danger"></span> <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="EnforceTargetAmount"></label> <label asp-for="EnforceTargetAmount"></label>
<input asp-for="EnforceTargetAmount" type="checkbox" class="form-check"/> <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check" />
<span asp-validation-for="EnforceTargetAmount" class="text-danger"></span> <span asp-validation-for="EnforceTargetAmount" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="UseAllStoreInvoices"></label> <label asp-for="UseAllStoreInvoices"></label>
<input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check"/> <input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check" />
<span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span> <span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="SoundsEnabled"></label> <label asp-for="SoundsEnabled"></label>
<input asp-for="SoundsEnabled" type="checkbox" class="form-check"/> <input asp-for="SoundsEnabled" type="checkbox" class="form-check" />
<span asp-validation-for="SoundsEnabled" class="text-danger"></span> <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="Sounds"></label> <label asp-for="Sounds"></label>
<textarea asp-for="Sounds" class="form-control"></textarea> <textarea asp-for="Sounds" class="form-control"></textarea>
@ -192,10 +191,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="AnimationsEnabled"></label> <label asp-for="AnimationsEnabled"></label>
<input asp-for="AnimationsEnabled" type="checkbox" class="form-check"/> <input asp-for="AnimationsEnabled" type="checkbox" class="form-check" />
<span asp-validation-for="AnimationsEnabled" class="text-danger"></span> <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="AnimationColors"></label> <label asp-for="AnimationColors"></label>
<textarea asp-for="AnimationColors" class="form-control"></textarea> <textarea asp-for="AnimationColors" class="form-control"></textarea>
@ -203,7 +202,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="DisqusEnabled"></label> <label asp-for="DisqusEnabled"></label>
<input asp-for="DisqusEnabled" type="checkbox" class="form-check"/> <input asp-for="DisqusEnabled" type="checkbox" class="form-check" />
<span asp-validation-for="DisqusEnabled" class="text-danger"></span> <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -211,8 +210,8 @@
<input asp-for="DisqusShortname" class="form-control" /> <input asp-for="DisqusShortname" class="form-control" />
<span asp-validation-for="DisqusShortname" class="text-danger"></span> <span asp-validation-for="DisqusShortname" class="text-danger"></span>
</div> </div>
<input type="hidden" asp-for="NotificationEmailWarning"/> <input type="hidden" asp-for="NotificationEmailWarning" />
<div class="form-group"> <div class="form-group">
<input type="submit" class="btn btn-primary" value="Save Settings" /> <input type="submit" class="btn btn-primary" value="Save Settings" />
<a class="btn btn-secondary" target="_blank" asp-action="ListInvoices" asp-controller="Invoice" asp-route-searchterm="@Model.SearchTerm">Invoices</a> <a class="btn btn-secondary" target="_blank" asp-action="ListInvoices" asp-controller="Invoice" asp-route-searchterm="@Model.SearchTerm">Invoices</a>
@ -228,7 +227,7 @@
@section Scripts { @section Scripts {
<script src= "~/vendor/moment/moment.js"></script> <script src="~/vendor/moment/moment.js"></script>
<bundle name="wwwroot/bundles/crowdfund-admin-bundle.min.js"></bundle> <bundle name="wwwroot/bundles/crowdfund-admin-bundle.min.js"></bundle>
<bundle name="wwwroot/bundles/crowdfund-admin-bundle.min.css"></bundle> <bundle name="wwwroot/bundles/crowdfund-admin-bundle.min.css"></bundle>

View file

@ -70,7 +70,7 @@
<input asp-for="ExpiryDate" <input asp-for="ExpiryDate"
value="@( Model.ExpiryDate?.ToString("u", CultureInfo.InvariantCulture))" value="@( Model.ExpiryDate?.ToString("u", CultureInfo.InvariantCulture))"
class="form-control datetime" min="today" placeholder="No expiry date has been set for this payment request"/> class="form-control flatdtpicker" min="today" placeholder="No expiry date has been set for this payment request"/>
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear"> <button class="btn btn-secondary input-group-clear" type="button" title="Clear">

View file

@ -6,7 +6,8 @@
"wwwroot/vendor/magnific-popup/magnific-popup.css", "wwwroot/vendor/magnific-popup/magnific-popup.css",
"wwwroot/vendor/font-awesome/css/font-awesome.css", "wwwroot/vendor/font-awesome/css/font-awesome.css",
"wwwroot/main/**/*.css", "wwwroot/main/**/*.css",
"wwwroot/vendor/animatecss/animate.css" "wwwroot/vendor/animatecss/animate.css",
"wwwroot/vendor/flatpickr/flatpickr.min.css"
] ]
}, },
{ {
@ -19,6 +20,7 @@
"wwwroot/vendor/scrollreveal/scrollreveal.min.js", "wwwroot/vendor/scrollreveal/scrollreveal.min.js",
"wwwroot/vendor/magnific-popup/jquery.magnific-popup.js", "wwwroot/vendor/magnific-popup/jquery.magnific-popup.js",
"wwwroot/vendor/bootstrap4-creativestart/*.js", "wwwroot/vendor/bootstrap4-creativestart/*.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/main/**/*.js" "wwwroot/main/**/*.js"
] ]
}, },
@ -101,7 +103,6 @@
"inputFiles": [ "inputFiles": [
"wwwroot/vendor/highlightjs/highlight.min.js", "wwwroot/vendor/highlightjs/highlight.min.js",
"wwwroot/vendor/summernote/summernote-bs4.js", "wwwroot/vendor/summernote/summernote-bs4.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/crowdfund-admin/main.js", "wwwroot/crowdfund-admin/main.js",
"wwwroot/products/js/products.js", "wwwroot/products/js/products.js",
"wwwroot/products/js/products.jquery.js" "wwwroot/products/js/products.jquery.js"
@ -111,8 +112,7 @@
"outputFileName": "wwwroot/bundles/crowdfund-admin-bundle.min.css", "outputFileName": "wwwroot/bundles/crowdfund-admin-bundle.min.css",
"inputFiles": [ "inputFiles": [
"wwwroot/vendor/highlightjs/default.min.css", "wwwroot/vendor/highlightjs/default.min.css",
"wwwroot/vendor/summernote/summernote-bs4.css", "wwwroot/vendor/summernote/summernote-bs4.css"
"wwwroot/vendor/flatpickr/flatpickr.min.css"
] ]
}, },
{ {
@ -128,7 +128,6 @@
"outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.js", "outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.js",
"inputFiles": [ "inputFiles": [
"wwwroot/vendor/summernote/summernote-bs4.js", "wwwroot/vendor/summernote/summernote-bs4.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/payment-request-admin/**/*.js" "wwwroot/payment-request-admin/**/*.js"
] ]
}, },
@ -136,8 +135,7 @@
{ {
"outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.css", "outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.css",
"inputFiles": [ "inputFiles": [
"wwwroot/vendor/summernote/summernote-bs4.css", "wwwroot/vendor/summernote/summernote-bs4.css"
"wwwroot/vendor/flatpickr/flatpickr.min.css"
] ]
}, },

View file

@ -4,23 +4,4 @@ $(document).ready(function () {
$(".richtext").summernote({ $(".richtext").summernote({
minHeight: 300 minHeight: 300
}); });
$(".datetime").each(function () {
var element = $(this);
var min = element.attr("min");
var max = element.attr("max");
var defaultDate = element.attr("value");
element.flatpickr({
enableTime: true,
minDate: min,
maxDate: max,
defaultDate: defaultDate,
dateFormat: 'Z',
altInput: true,
altFormat: 'J F Y H:i',
time_24hr: true,
parseDate: function (date) {
return moment(date).toDate();
}
});
});
}); });

View file

@ -7,6 +7,26 @@
$(this).text(dateString); $(this).text(dateString);
}); });
$(".flatdtpicker").each(function () {
var element = $(this);
var min = element.attr("min");
var max = element.attr("max");
var defaultDate = element.attr("value");
element.flatpickr({
enableTime: true,
minDate: min,
maxDate: max,
defaultDate: defaultDate,
dateFormat: 'Z',
altInput: true,
altFormat: 'J F Y H:i',
time_24hr: true,
parseDate: function (date) {
return moment(date).toDate();
}
});
});
$(".input-group-clear").on("click", function () { $(".input-group-clear").on("click", function () {
$(this).parents(".input-group").find("input").val(null); $(this).parents(".input-group").find("input").val(null);
@ -18,19 +38,19 @@
handleInputGroupClearButtonDisplay(inputGroupClearBtn); handleInputGroupClearButtonDisplay(inputGroupClearBtn);
$(this).parents(".input-group").find("input").on("change input", function () { $(this).parents(".input-group").find("input").on("change input", function () {
handleInputGroupClearButtonDisplay(inputGroupClearBtn); handleInputGroupClearButtonDisplay(inputGroupClearBtn);
}) });
}); });
$(".only-for-js").show(); $(".only-for-js").show();
function handleInputGroupClearButtonDisplay(element) { function handleInputGroupClearButtonDisplay(element) {
var inputs =$(element).parents(".input-group").find("input"); var inputs = $(element).parents(".input-group").find("input");
$(element).hide(); $(element).hide();
for (var i = 0; i < inputs.length; i++) { for (var i = 0; i < inputs.length; i++) {
var el = inputs.get(i); var el = inputs.get(i);
if($(el).val() || el.attributes.value){ if ($(el).val() || el.attributes.value) {
$(element).show(); $(element).show();
break; break;
} }

View file

@ -3,24 +3,4 @@ $(document).ready(function() {
$(".richtext").summernote({ $(".richtext").summernote({
minHeight: 300 minHeight: 300
}); });
$(".datetime").each(function () {
var element = $(this);
var min = element.attr("min");
var max = element.attr("max");
var defaultDate = element.attr("value");
element.flatpickr({
enableTime: true,
minDate: min,
maxDate: max,
defaultDate: defaultDate,
dateFormat: 'Z',
altInput: true,
altFormat: 'J F Y H:i',
time_24hr: true,
parseDate: function (date) {
return moment(date).toDate();
}
});
});
}); });