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>
<div class="input-group ">
<input asp-for="StartDate"
value="@( Model.StartDate?.ToString("u", CultureInfo.InvariantCulture))"
class="datetime form-control" placeholder="No start date has been set for this crowdfund"/>
value="@(Model.StartDate?.ToString("u", CultureInfo.InvariantCulture))"
class="form-control flatdtpicker" placeholder="No start date has been set for this crowdfund" />
<div class="input-group-append">
<button class="btn btn-secondary input-group-clear" type="button" title="Clear">
@ -96,10 +96,9 @@
<div class="form-group">
<label asp-for="EndDate" class="control-label"></label>
<div class="input-group ">
<input type="datetime-local" asp-for="EndDate"
value="@( Model.EndDate?.ToString("u", CultureInfo.InvariantCulture))"
class="datetime form-control"
type="datetime-local"
<input type="datetime-local" asp-for="EndDate"
value="@(Model.EndDate?.ToString("u", CultureInfo.InvariantCulture))"
class="form-control flatdtpicker"
placeholder="No end date has been set for this crowdfund" />
<div class="input-group-append">
@ -145,46 +144,46 @@
<span asp-validation-for="NotificationUrl" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="NotificationEmail" class="control-label"></label>
@if (Model.NotificationEmailWarning)
{
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<label asp-for="Sounds"></label>
<textarea asp-for="Sounds" class="form-control"></textarea>
@ -192,10 +191,10 @@
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
<label asp-for="AnimationColors"></label>
<textarea asp-for="AnimationColors" class="form-control"></textarea>
@ -203,7 +202,7 @@
</div>
<div class="form-group">
<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>
</div>
<div class="form-group">
@ -211,8 +210,8 @@
<input asp-for="DisqusShortname" class="form-control" />
<span asp-validation-for="DisqusShortname" class="text-danger"></span>
</div>
<input type="hidden" asp-for="NotificationEmailWarning"/>
<input type="hidden" asp-for="NotificationEmailWarning" />
<div class="form-group">
<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>
@ -228,7 +227,7 @@
@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.css"></bundle>

View file

@ -70,7 +70,7 @@
<input asp-for="ExpiryDate"
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">
<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/font-awesome/css/font-awesome.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/magnific-popup/jquery.magnific-popup.js",
"wwwroot/vendor/bootstrap4-creativestart/*.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/main/**/*.js"
]
},
@ -101,7 +103,6 @@
"inputFiles": [
"wwwroot/vendor/highlightjs/highlight.min.js",
"wwwroot/vendor/summernote/summernote-bs4.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/crowdfund-admin/main.js",
"wwwroot/products/js/products.js",
"wwwroot/products/js/products.jquery.js"
@ -111,8 +112,7 @@
"outputFileName": "wwwroot/bundles/crowdfund-admin-bundle.min.css",
"inputFiles": [
"wwwroot/vendor/highlightjs/default.min.css",
"wwwroot/vendor/summernote/summernote-bs4.css",
"wwwroot/vendor/flatpickr/flatpickr.min.css"
"wwwroot/vendor/summernote/summernote-bs4.css"
]
},
{
@ -128,7 +128,6 @@
"outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.js",
"inputFiles": [
"wwwroot/vendor/summernote/summernote-bs4.js",
"wwwroot/vendor/flatpickr/flatpickr.js",
"wwwroot/payment-request-admin/**/*.js"
]
},
@ -136,8 +135,7 @@
{
"outputFileName": "wwwroot/bundles/payment-request-admin-bundle.min.css",
"inputFiles": [
"wwwroot/vendor/summernote/summernote-bs4.css",
"wwwroot/vendor/flatpickr/flatpickr.min.css"
"wwwroot/vendor/summernote/summernote-bs4.css"
]
},

View file

@ -4,23 +4,4 @@ $(document).ready(function () {
$(".richtext").summernote({
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);
});
$(".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 () {
$(this).parents(".input-group").find("input").val(null);
@ -18,19 +38,19 @@
handleInputGroupClearButtonDisplay(inputGroupClearBtn);
$(this).parents(".input-group").find("input").on("change input", function () {
handleInputGroupClearButtonDisplay(inputGroupClearBtn);
})
});
});
$(".only-for-js").show();
function handleInputGroupClearButtonDisplay(element) {
var inputs =$(element).parents(".input-group").find("input");
var inputs = $(element).parents(".input-group").find("input");
$(element).hide();
for (var i = 0; i < inputs.length; i++) {
var el = inputs.get(i);
if($(el).val() || el.attributes.value){
if ($(el).val() || el.attributes.value) {
$(element).show();
break;
}

View file

@ -3,24 +3,4 @@ $(document).ready(function() {
$(".richtext").summernote({
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();
}
});
});
});