在日期选择器上弹出

Question

我有3个约会：Present, Start and End。

Present = today's date

Start =任何日期，但我在此处使用过去的日期来回答问题

End date =（当前或开始）+付款次数。

如果开始日期为空，则结束日期是根据当前日期计算的，否则它是根据开始日期计算的。

我对剩余的付款有以下逻辑

function PopulateEndDate() {
            var d2;
            var paymentDays;
            var stDate;
            var pDate;
        
            if (document.getElementById("startDate"))
                stDate = document.getElementById("startDate").value;
            if (document.getElementById("presentDate"))
                pDate = document.getElementById("presentDate").value;
                
                
            var futureSDate =  (pDate < stDate); //future start date
            var pastSDate = (pDate > stDate); //start date was in the past
            var sameDates = (pDate == stDate);
            
         
            
           
            if (stDate && futureSDate){
                d2 = new Date(stDate);
            }
            else if (stDate && sameDates){
                d2 = new Date(stDate);
            }
            else if (stDate && pastSDate){
                d2 = new Date(stDate);
                alert ("enter total number of payments");
            }
            else{
                d2 = new Date(pDate);
            }
            
            var dd = d2.getDate()+1000;
            var mm = d2.getMonth()+1;
            var yyyy = d2.getFullYear();
            var today = (mm+'/'+dd+'/'+yyyy);

           
             var paymentDays = document.getElementById("paymentRemaining").value;
              
            if (paymentDays && paymentDays != "")
            //   d2.setMonth(d2.getMonth() + parseInt(paymentDays));
            var n = d2.getDate();
            d2.setDate(1);
            d2.setMonth(d2.getMonth() + parseInt(paymentDays));
            d2.setDate(Math.min(n, getDaysInMonth(d2.getFullYear(), d2.getMonth())));
            if (document.getElementById("endDate"))
                document.getElementById("endDate").value = getCurrentDay(d2);
        }


  function isLeapYear(year) {
            return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0));
        }
        function getDaysInMonth(year, month) {
            return [31, (isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
        }
        
         function getCurrentDay(date) {
            var dateOfToday;
            if(date && date != "")
                dateOfToday = new Date(date);
            else dateOfToday = new Date();

            var dd = ("0" + (dateOfToday.getDate())).slice(-2);
            var mm = ("0" + (dateOfToday.getMonth() + 1)).slice(-2);
            var yyyy = dateOfToday.getFullYear();

            dateOfToday = yyyy + '-' + mm + '-' + dd;
            return dateOfToday;
        }

<label>Present Value as of date</label> <input id="presentDate" name="presentDate" onchange="PopulateEndDate()" type="date"><br/><br/>
<label>Start of Lease </label> <input  id="startDate" onchange="PopulateEndDate()"  type="date" >
<br/>
<br/>
<label>Remaining Payments</label> <input id="paymentRemaining" name = "paymentRemaining" onchange="PopulateEndDate()" type="number" class="label1" style="text-align: right; width:80px;"> <br/><br/>
<label>End of Lease</label>  <input id="endDate" onchange="PopulateRentPaymentDates()" type="date" > <br/><br/>

仅当用户选择了过去的日期时，我才想添加弹出窗口而不是警报。有没有一种方法可以实现对过去日期的点击？我认为逻辑如下。任何帮助表示赞赏。谢谢！

       function myPopUp() {
        var startDate = document.getElementById("startDate");
        var present = document.getElementById("presentDate");
        var pastLease = present > startDate;
        if(startDate && pastLease){
           //message goes here....
        }
    }

Answer 1

有多种方法可以做到这一点，这还取决于您要在何处以及如何显示弹出窗口。这是一个简单的示例，说明如何单击按钮即可添加弹出窗口。

let btn = document.getElementById("test");

btn.addEventListener( "click", function(){
	if ( document.getElementById("popup") ) {
  	document.getElementById("popup").style.display = "block";
  }
});

#popup {
  display: none; 
  width: 300px;
  height: 50px;;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 15px;
  text-align: center;
}

#popupMessage {
  font-size: 30px;
}

<div id="popup">
   <p id="popupMessage"> Your Popup Message</p>
</div>

<button id="test"> Popup</button>

在您的情况下，可以将myPopUp()函数添加到要触发该函数的日期字段。然后，一旦满足条件，您就可以动态创建DOM元素，将其用作弹出窗口，然后还可以将其附加到标记代码中的任何其他元素上。这是我上面描述的简单示例。

let condition = false;

let btn = document.getElementById("popupBtn");

btn.addEventListener("click", function(){
  //set some condition to true on button click
  condition = true;

  //if condition is true then add the popup
    if ( condition ) {
    //create container
    let popupContainer = document.createElement("DIV");
    //add popupContainer class to the container
    popupContainer.setAttribute("class", "popupContainer");

    //create popup text
    let popupText = document.createElement("P");
    popupText.setAttribute("class", "popupMessage");
    //add popup text
    popupText.appendChild( document.createTextNode("Your Popup Message") );

    //add the popupText to popupContainer
    popupContainer.appendChild( popupText );


    //add the popup above p element with id popupAboveThisElement
    if ( document.getElementById("popupAboveThisElement") ) {
      document.getElementById("popupAboveThisElement").parentNode.insertBefore( popupContainer, document.getElementById("popupAboveThisElement") );
    }
 }//end if condition true
});

.popupContainer {
  display: block; 
  width: 300px;
  height: 50px;;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 15px;
  text-align: center;
}

.popupMessage {
  font-size: 30px;
}

<h1> A title </h1>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, mollitia dolorem repellat tenetur, et eligendi, ipsam consequuntur debitis temporibus laboriosam ducimus harum fuga, quae ipsa.</p>

<p id="popupAboveThisElement"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, quis, nihil modi fuga debitis error delectus itaque est illum velit in aliquam deserunt ipsum, non cupiditate, alias consectetur. Saepe, deleniti, aliquid. Fugiat sit, iste, tempore optio nam dolorum alias maxime quam numquam autem aspernatur porro beatae. Fugiat saepe doloremque facere!</p>

<button id="popupBtn"> Display Popup</button>

希望这对您有所帮助。