This code will show you how to display a new date based on the initial date plus n days in PHPMaker 2021. We will use Javascript to calculate the result of new date in client side.
As a result, after we chosen the initial date, enter the number of days, and then system will display the new date based on calculating initial date + n days. You may also later change the initial date after entering the number of days in order to display the new date.Please do all the following steps carefully and sequentially.
- Create a new database and a new table named datetime as follows:
CREATE TABLE `datetime` (
`Code` char(3) NOT NULL,
`First_Date` datetime NOT NULL,
`Number_of_Days` int(11) NOT NULL,
`Last_Date` datetime NOT NULL,
PRIMARY KEY (`Code`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
- Create a new project and connect to that database and table above, and make sure DateTimePicker extension has been already enabled from Tools → Extensions.
- Go to Fields setup, click on First_Date field → Edit Tag pane, then make sure, from Validation → Validate the Date has been chosen. Make sure also Use date/time picker and Required have been already enabled. Then, go to View Tag pane, then make sure from Format section, the Date/Time has been chosen, and then YmdHis also has already been chosen from Date/Time named format.
- Do the same step #3 above for Last_Date field.
- Go to the following location: Code (Server Events, Client Scripts and Custom Templates) → Client Scripts → Global → Pages with header/footer → Global Code and then copy/paste the following Javascript code:
function addDays(date, days) {
var tt = date;
var time = "";
if (tt.toString().length > 8) {
time = tt.substring(11);
} else {
time = "";
}
var begin_date = new Date(date);
var newdate = new Date(begin_date);
newdate.setDate(newdate.getDate() + days);
var dd = newdate.getDate();
if (dd.toString().length == 1) dd = "0" + dd;
var mm = newdate.getMonth() + 1;
if (mm.toString().length == 1) mm = "0" + mm;
var y = newdate.getFullYear();
var sFormattedDate = "";
sFormattedDate = y + ew.DATE_SEPARATOR + mm + ew.DATE_SEPARATOR + dd;
return sFormattedDate + ' ' + time;
}
- Copy the following code in Client Scripts → Table-Specific → Add/Copy Page → Startup Script:
$("#x_First_Date").change(function() {
var sDate = $("#x_First_Date").val();
var iVal = parseInt($("#x_Number_of_Days").val());
if ($("#x_Number_of_Days").val() != "")
$("#x_Last_Date").val(addDays(sDate, iVal));
});
$("#x_Number_of_Days").keyup(function(event) {
var sDate = $("#x_First_Date").val();
var iVal = parseInt($("#x_Number_of_Days").val());
if (iVal > 0) {
$("#x_Last_Date").val(addDays(sDate, iVal));
} else {
$("#x_Last_Date").val("");
}
});
- Re-generate ALL the script files.
Tested in v2021.0.13 and it works properly.
Enjoy the result, everyone!