Fix date time issues on crowdfund.payment requests (#808)

* fix some conditional display bugs in crowdfund

* bump flatpickr

* make clear button show up even with flatpickt fake input ui

* update uis to specify date value in specific format and use custom format for flatpickr display and use moment to parse date instead

* fix remaining public ui date issues

BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml

@@ -1,4 +1,5 @@
 @addTagHelper *, BundlerMinifier.TagHelpers
+@using System.Globalization
 @model UpdateCrowdfundViewModel
 @{
     ViewData["Title"] = "Update Crowdfund";
@@ -67,7 +68,9 @@
                     <div class="form-group">
                         <label asp-for="StartDate" class="control-label"></label>
                         <div class="input-group ">
-                            <input asp-for="StartDate" class="form-control datetime"  placeholder="No start date has been set for this crowdfund"/>
+                            <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"/>
                             <div class="input-group-append">
 
                                 <button class="btn btn-secondary input-group-clear" type="button" title="Clear">
@@ -93,7 +96,11 @@
                     <div class="form-group">
                         <label asp-for="EndDate" class="control-label"></label>
                         <div class="input-group ">
-                            <input asp-for="EndDate" class="form-control datetime"  placeholder="No end date has been set for this crowdfund" />
+                            <input  type="datetime-local"  asp-for="EndDate"  
+                                    value="@( Model.EndDate?.ToString("u", CultureInfo.InvariantCulture))"
+                                   class="datetime form-control"   
+                                   type="datetime-local"  
+                                   placeholder="No end date has been set for this crowdfund" />
                             <div class="input-group-append">
 
                                 <button class="btn btn-secondary input-group-clear" type="button" title="Clear">
@@ -221,6 +228,7 @@
 
 @section Scripts {
 
+    <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>
 

BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

@@ -12,10 +12,10 @@
                 <h1>
                     {{srvModel.title}} 
                     <span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate" id="crowdfund-header-start-date">
-                        Starts {{startDateRelativeTime}}
+                        Starts in {{startDiff}}
                     </span>
                     <span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip :title="endDate" id="crowdfund-header-end-date">
-                        Ends {{endDateRelativeTime}}
+                        Ends in {{endDiff}}
                     </span>
                     <span class="h6 text-muted" v-else-if="started && !ended && !srvModel.endDate" v-b-tooltip title="No set end date" id="crowdfund-header-active">
                         Currently Active!
@@ -58,7 +58,7 @@
             </div>
            
             <div class="card-body">
-                <div class="row py-2 text-center">
+                <div class="row py-2 text-center crowdfund-stats">
                     <div class="col-sm border-right" id="crowdfund-body-raised-amount">
                         <h5>{{ raisedAmount }} {{targetCurrency}} </h5>
                         <h5 class="text-muted">Raised</h5>
@@ -73,23 +73,7 @@
                         </h5>
                         <h5 class="text-muted">Contributors</h5>
                     </div> 
-                    <div  class="col-sm" v-if="endDiff" id="crowdfund-body-campaign-dates-started">
+                    <div  class="col-sm  border-right" v-if="startDiff" id="crowdfund-body-campaign-dates-not-started">
-                        <h5>
-                            {{endDiff}}
-                        </h5>
-                        <h5 class="text-muted">Left</h5>
-                        <b-tooltip target="crowdfund-body-campaign-dates-started" >
-                            <ul class="p-0">
-                                <li v-if="startDate" class="list-unstyled">
-                                    {{started? "Started" : "Starts"}} {{startDate}}
-                                </li>
-                                <li v-if="endDate" class="list-unstyled">
-                                    {{ended? "Ended" : "Ends"}} {{endDate}}
-                                </li>
-                            </ul>
-                        </b-tooltip>
-                    </div>
-                    <div  class="col-sm" v-if="startDiff" id="crowdfund-body-campaign-dates-not-started">
                         <h5>
                             {{startDiff}}
                         </h5>
@@ -106,7 +90,23 @@
                             </ul>
                         </b-tooltip>
                     </div>
-                    <div  class="col-sm" v-if="ended" id="crowdfund-body-campaign-dates-not-active">
+                    <div  class="col-sm  border-right" v-if="endDiff" id="crowdfund-body-campaign-dates-started">
+                        <h5>
+                            {{endDiff}}
+                        </h5>
+                        <h5 class="text-muted">Left</h5>
+                        <b-tooltip target="crowdfund-body-campaign-dates-started" >
+                            <ul class="p-0">
+                                <li v-if="startDate" class="list-unstyled">
+                                    {{started? "Started" : "Starts"}} {{startDate}}
+                                </li>
+                                <li v-if="endDate" class="list-unstyled">
+                                    {{ended? "Ended" : "Ends"}} {{endDate}}
+                                </li>
+                            </ul>
+                        </b-tooltip>
+                    </div>
+                    <div  class="col-sm border-right" v-if="ended" id="crowdfund-body-campaign-dates-not-active">
                         <h5>
                             Campaign
                         </h5>

BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml

@@ -1,4 +1,5 @@
 @using BTCPayServer.Services.PaymentRequests
+@using System.Globalization
 @model BTCPayServer.Models.PaymentRequestViewModels.UpdatePaymentRequestViewModel
 @addTagHelper *, BundlerMinifier.TagHelpers
 
@@ -66,7 +67,10 @@
                     <div class="form-group">
                         <label asp-for="ExpiryDate" class="control-label"></label>
                         <div class="input-group ">
-                            <input asp-for="ExpiryDate" class="form-control datetime" min="today" placeholder="No expiry date has been set for this payment request"/>
+                            <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"/>
                             <div class="input-group-append">
 
                                 <button class="btn btn-secondary input-group-clear" type="button" title="Clear">
@@ -116,7 +120,7 @@
 </section>
 
 @section Scripts {
-
+    <script src= "~/vendor/moment/moment.js"></script>
     <bundle name="wwwroot/bundles/payment-request-admin-bundle.min.js"></bundle>
     <bundle name="wwwroot/bundles/payment-request-admin-bundle.min.css"></bundle>
 }

BTCPayServer/wwwroot/crowdfund-admin/main.js

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

BTCPayServer/wwwroot/crowdfund/app.js

@@ -85,8 +85,6 @@ addLoadEvent(function (ev) {
                 connectionStatus: "",
                 endDate: "",
                 startDate: "",
-                startDateRelativeTime: "",
-                endDateRelativeTime: "",
                 started: false,
                 ended: false,
                 contributeModalOpen: false,
@@ -170,20 +168,20 @@ addLoadEvent(function (ev) {
                 if (this.srvModel.endDate) {
                     var endDateM = moment(this.srvModel.endDate);
                     this.endDate = endDateM.format('MMMM Do YYYY');
-                    this.endDateRelativeTime = endDateM.fromNow();
                     this.ended = endDateM.isBefore(moment());
                     
                 }else{
                     this.ended = false;
+                    this.endDate = null;
                 }
 
                 if (this.srvModel.startDate) {
                     var startDateM = moment(this.srvModel.startDate);
                     this.startDate = startDateM.format('MMMM Do YYYY');
-                    this.startDateRelativeTime = startDateM.fromNow();
                     this.started = startDateM.isBefore(moment());
                 }else{
                     this.started = true;
+                    this.startDate = null;
                 }
                 if(this.started && !this.ended && this.srvModel.endDate){
                     var mDiffD =  moment(this.srvModel.endDate).diff(moment(), "days");
@@ -191,6 +189,8 @@ addLoadEvent(function (ev) {
                     var mDiffM =  moment(this.srvModel.endDate).diff(moment(), "minutes");
                     var mDiffS =  moment(this.srvModel.endDate).diff(moment(), "seconds");
                     this.endDiff =  mDiffD > 0? mDiffD + " days" : mDiffH> 0? mDiffH + " hours" : mDiffM> 0? mDiffM+ " minutes" : mDiffS> 0? mDiffS + " seconds": "";
+                }else{
+                    this.endDiff = null;
                 }
                 if(!this.started && this.srvModel.startDate){
                     var mDiffD =  moment(this.srvModel.startDate).diff(moment(), "days");
@@ -198,6 +198,8 @@ addLoadEvent(function (ev) {
                     var mDiffM =  moment(this.srvModel.startDate).diff(moment(), "minutes");
                     var mDiffS =  moment(this.srvModel.startDate).diff(moment(), "seconds");
                     this.startDiff =  mDiffD > 0? mDiffD + " days" : mDiffH> 0? mDiffH + " hours" : mDiffM> 0? mDiffM+ " minutes" : mDiffS> 0? mDiffS + " seconds": "";
+                }else {
+                    this.startDiff = null;
                 }
                 this.lastUpdated = moment(this.srvModel.info.lastUpdated).calendar();
                 this.active = this.started && !this.ended;

BTCPayServer/wwwroot/crowdfund/styles/main.css

@@ -54,3 +54,7 @@ canvas#fireworks {
     padding-top: 5px;
     z-index: 1
 }
+
+.crowdfund-stats .col-sm:last-child{
+    border-right: none !important;
+}

BTCPayServer/wwwroot/main/site.js

@@ -25,11 +25,15 @@
     $(".only-for-js").show();
 
     function handleInputGroupClearButtonDisplay(element) {
-        var value = $(element).parents(".input-group").find("input").val();
+        var inputs =$(element).parents(".input-group").find("input");
-        if (!value) {
+
-            $(element).hide();
+        $(element).hide();
-        } else {
+        for (var i = 0; i < inputs.length; i++) {
-            $(element).show();
+            var el = inputs.get(i);
+            if($(el).val() || el.attributes.value){
+                $(element).show();
+                break;
+            }
         }
     }
 });

BTCPayServer/wwwroot/payment-request-admin/main.js

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

BTCPayServer/wwwroot/payment-request/app.js

@@ -26,7 +26,6 @@ addLoadEvent(function (ev) {
                 srvModel: window.srvModel,
                 connectionStatus: "",
                 endDate: "",
-                endDateRelativeTime: "",
                 ended: false,
                 endDiff: "",
                 active: true,
@@ -49,11 +48,12 @@ addLoadEvent(function (ev) {
                 if (this.srvModel.expiryDate) {
                     var endDateM = moment(this.srvModel.expiryDate);
                     this.endDate = endDateM.format('MMMM Do YYYY');
-                    this.endDateRelativeTime = endDateM.fromNow();
                     this.ended = endDateM.isBefore(moment());
 
                 } else {
                     this.ended = false;
+                    this.endDate = null;
+                    this.endDiff = null;
                 }
 
                 if (!this.ended && this.srvModel.expiryDate) {