I'm new with this field. However, I'm having a trouble displaying the dates on my table. Can someone help me on how can I display the date today on the first row and the first day of the following months on the next rows?
function load_assessment() {
let formatter = new Intl.NumberFormat('en-US');
var tf_amount=parseFloat($("#tf_amount_hide").val());
var amount_percent=parseFloat($("#amount_percent").val());
var mf_amount=parseFloat($("#mf_amount").val())
var cal_tf_amount = tf_amount - amount_percent;
$("#tf_amount").val(cal_tf_amount);
$("#mf_amount").val(mf_amount);
var tot_assessed = cal_tf_amount + mf_amount;
$("#tot_assessed").val(tot_assessed);
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
var no_pay=parseFloat($("#no_pay").val());
var quo_total = tot_assessed / no_pay;
if(no_pay > 0) {
for($i = 1; $i <= no_pay; $i++) {
if ($i == 1) {
$('#payment_plan_tab').append('\
<tr>\
<td>\PAYMENT '+$i+' (D/P)</td>\
<td>'+today+'</td>\
<td>'+quo_total+'</td>\
</tr>');
} else {
$('#payment_plan_tab').append('\
<tr>\
<td>\PAYMENT '+$i+'</td>\
<td>'+nextMonth+'</td>\
<td>'+quo_total+'</td>\
</tr>');
}
}
}
}
The picture below is the sample of the table that I'm currently doing. The AMOUNT column is where I used the tot_assessed and no_pay.
Related
I am trying to apply the minimum and maximun for two dates inputs, namely:
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />
<script type="text/javascript">
var proposal_from = document.getElementById("proposal_from");
var proposal_to = document.getElementById("proposal_to");
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function(){
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd;
if(from_dd < 9){
min_to_dd = "0" + from_dd;
} else {
min_to_dd = from_dd;
}
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd;
if(from_dd < 9){
max_to_dd = "0" + from_dd;
} else {
max_to_dd = from_dd;
}
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
console.log(minimum);
console.log(maximum);
proposal_to.min = minimum;
proposal_to.max = maximum;
});
</script>
the event listener seems working now, the minimum and maximun dates get set as the date printed in the console should be and date values are completely correct. Before it was or example if I choose date 2021-10-04 I get minimum 2021-10-5 and 2022-10-5 instead of 2021-10-05 and 2022-10-05, is there anyway to do this with .padStart()?
You have to use the same logic that you used to pad zeros in setFromDate in your change event aswell.
Why this is needed?
You are performing incremental operation on from_dd using from_dd++ this will convert its type from String to Number. So convert it back to string again and perform you number padding logic.
function setFromDate() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var minY = today.getFullYear();
var maxY = today.getFullYear() + 1;
var minimum = minY + '-' + mm + '-' + dd;
var maximum = maxY + '-' + mm + '-' + dd;
console.log(minimum)
proposal_from.min = minimum;
proposal_from.max = maximum;
}
setFromDate();
proposal_from.addEventListener("change", function () {
var date = proposal_from.value.split("-");
var from_dd = date[2];
var from_mm = date[1];
var from_Y = date[0];
from_dd++;
var min_to_dd = String(from_dd).padStart(2, '0')
var min_to_mm = from_mm;
var min_to_Y = from_Y;
from_Y++;
var max_to_dd = String(from_dd).padStart(2, '0')
var max_to_mm = from_mm;
var max_to_Y = from_Y;
var minimum = min_to_Y + '-' + min_to_mm + '-' + min_to_dd;
var maximum = max_to_Y + '-' + max_to_mm + '-' + max_to_dd;
proposal_to.min = minimum;
proposal_to.max = maximum;
});
<input type="date" name="proposal_from" id="proposal_from" />
<input type="date" name="proposal_to" id="proposal_to" />
I have a script that for every click of the button takes the time, applies #gmail.com to the end and appends it to a defined div tag.
where the problem lies is that every time i hit the button, the first line changes to the current time, an additional line is appended each time with the correct details and they don't update it is just the first line.
can someone suggest a way to stop the first line from updating each time?
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = document.getElementById("demo").innerHTML = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$(document).ready(function() {
$("button").click(function() {
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
});
});
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
What I expect to happen each time i press the button is for it to append the following:
2591695115#gmail.com
2591695116#gmail.com
2591695117#gmail.com
2591695118#gmail.com
...etc
You are calling Time() onclick in your HTML. You do not need to say $("button").click again in your jquery.
Also, you do not need document.getElementById("demo").innerHTML when assiging the string to var j.
See the following code:
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
$("#demo").append(j);
return j;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button onclick="Time()">Generate</button>
<div id="demo"></div>
You just need to append the result from Time function.
$(document).ready(function () {
$("button").click(function () {
$("#demo").append(Time());
});
});
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
return j;
}
This should work. The problem was the structure of your function. I took the button click outside of the Time() function and also changed var j to only declare the time instead of also already adding it to the HTML.
Also, by declaring var j after your if statements the date now displays correctly.
function Time() {
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1; //January is 0!
var yy = d.getFullYear().toString().substr(2, 2);
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
var j = dd + "" + mm + "" + yy + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "#gmail.com<br />";
$("#demo").append(j);
}
$("button").click(function() {
Time();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<h2>Click to generate time</h2>
<button>Generate</button>
<div id="demo"></div>
I am having great difficulty getting the current date to be inputted into a text box within a form i am creating as a default value. at the moment i have the following code, which i believe creates the current date, followed by the text box code which i am unsure on how to modify in order for the date to be displayed inside.
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring();
}
<input type="text" name="frmDateReg" required id="frmDate" value="getDate()">
if anyone could suggest how to create todays date and input it into the textbox as default it would be greatly appreciated. (Please excuse any format issues as i am new to stack overflow) Thanks
You've got the right idea. It's just out of order:
<input type="text" name="frmDateReg" required id="frmDate" value="">
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring;
}
getDate();
Your code is correct, except that adding the function call in the value doesn't do anything. You need something else to trigger the function. The way I have it there, it will execute automatically when the page loads.
Aslo, datestring is not a function. It's just a variable. So you can leave off the ()
Try this Jquery code, this will work
$(document).ready(function () {
var dateNewFormat, onlyDate, today = new Date();
dateNewFormat = today.getFullYear() + '-';
if (today.getMonth().length == 2) {
dateNewFormat += (today.getMonth() + 1);
}
else {
dateNewFormat += '0' + (today.getMonth() + 1);
}
onlyDate = today.getDate();
if (onlyDate.toString().length == 2) {
dateNewFormat += "-" + onlyDate;
}
else {
dateNewFormat += '-0' + onlyDate;
}
$('#mydate').val(dateNewFormat);
});
razor view for this
#Html.TextBoxFor(m => m.StartedDate, new { #id = "mydate", #type = "date", #class = "form-control" })
This simple solution worked out for me. You can show the current date using window.onload function of javascript. See the output.
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
window.onload = function(){
document.getElementById("date").value = datestring;
}
<input type="text" id="date"/ >
<html>
<body onload="myFunction()">
Date: <input type="text" id="demo"/>
<script>
function myFunction() {
document.getElementById('demo').value= Date();
}
</script>
</body>
</html>
Use this code. this will helpful
<input type="text" name="frmDateReg" required id="frmDate" >
<script>
function getDate(){
var todaydate = new Date();
var day = todaydate.getDate();
var month = todaydate.getMonth() + 1;
var year = todaydate.getFullYear();
var datestring = day + "/" + month + "/" + year;
document.getElementById("frmDate").value = datestring; //don't need ()
}
document.getElementById("frmDate").onload = getDate();
</script>
html
<input type="text" id="frmDate"></input>
JavaScript
var date = new Date();
document.getElementById("frmDate").value = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
Jsfiddle Demo
<script TYPE="text/javascript" LANGUAGE=JAVASCRIPT>
var currentDate = new Date();
var date1 = currentDate.getMonth()+1;
var mon = currentDate.getDate();
if (mon<10)
mon="0"+mon
var year = currentDate.getYear();
var hour = currentDate.getHours();
var dn="pm"
if (hour<12)
dn="am"
if (hour>12)
hour=hour-12
if (hour==0)
hour=12
var minute = currentDate.getMinutes();
if (minute < 10){
minute = "0" + minute
}
var second = currentDate.getSeconds();
if (second < 10){
second = "0" + second
}
var today = date1+"/"+mon+"/"+year+" Time: "+hour+":"+minute+":"+second+" "+dn
var filePath = "\\\\servername\\maindirectory\\somedirectory\\filenametopostto.xlsx";
function setDate()
{
f1.tDate.value=today;
}
</script>
Result in your text box is:
5/28/2019 Time: 3:03:01 pm
If you want to show the current date on the input field date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
// today = yyyy + '/' + mm + '/' + dd;
today = `${yyyy}-${mm}-${dd}`;
document.getElementById('dateto1').value = today;
<div class="col-lg-4">
<label>Date</label>
<input type="date" name="dateto1" id="dateto1" class="form-control">
</div>
I made this fiddle http://jsfiddle.net/cyrtx7qw/1/ and I cant figure out how to make these two dates write on page load. I need them to check if the boxes are empty and then I want to write the today's date and today-7 respectively.
if ($('#datePickersAppearance').is(':empty')) {
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
document.getElementById("to").innerHTML = curr_date + "." + curr_month + "." + curr_year;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
document.getElementById("from").innerHTML = new_date + "." + new_month + "." + new_year;
}
Also, is there a way keep another date after page reload in case I change the default ones? I need the if statement to not trigger then...
filddle
if ($('#datePickersAppearance').is(':empty'))
to
if ($('.datePickersAppearance').val() == '')
document.getElementById("from").innerHTML
should be
document.getElementById("from").value
The biggest problem is that <input> elements do not have a .innerHTML property. It is instead .value.
Your jQuery was traded for JavaScript.
Code was truncated for readability.
Use this instead:
(function loadDates(element){
var from = document.getElementById('from')
var to = document.getElementById('to')
if(!from.value.length && !to.value.length ){
var my_date = new Date()
to.value = my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()
// Redefine date object
my_date.setDate(my_date.getDate() - 7)
from.value = my_date.getDate() + "." + my_date.getMonth() + "." + my_date.getFullYear()
}//endif
})();
Updated, you can use sessionStorage to save your dates for page reloads. Also .blur() event handler is used to save data for sessionStorage, so that it's available when the page loads :-) Some other event handlers like .change() could be use as well. Fiddle
var today = new Date();
var curr_date = today.getDate();
var curr_month = today.getMonth();
curr_month++;
var curr_year = today.getFullYear();
var toDate = "";
//check if there's a to Date in sessionStorage
if (sessionStorage.getItem("toDate")) {
toDate = sessionStorage.getItem("toDate");
sessionStorage.setItem("toDate", toDate);
} else {
toDate = curr_date + "." + curr_month + "." + curr_year;
sessionStorage.setItem("toDate", toDate);
}
document.getElementById("to").value = toDate;
today.setDate(today.getDate() - 7);
var new_date = today.getDate();
var new_month = today.getMonth();
new_month++;
var new_year = today.getFullYear();
var fromDate = "";
//check if there's a from Date in sessionStorage
if (sessionStorage.getItem("fromDate")) {
console.log("if");
fromDate = sessionStorage.getItem("fromDate");
sessionStorage.setItem("fromDate", fromDate);
} else {
// actually else part of the code never runs because there's toDate in sessionStorage.
console.log("else");
fromDate = new_date + "." + new_month + "." + new_year;
sessionStorage.setItem("fromDate", fromDate);
}
document.getElementById("from").value = fromDate;
$("#from").blur(function() {
//check that there is data before saving into sessionStorage
if (this.value.length >= 8)
sessionStorage.setItem("fromDate", this.value)
});
$("#to").blur(function() {
//check that there is data before saving into sessionStorage
if (this.value.length >= 8)
sessionStorage.setItem("toDate", this.value)
})
I'm looking to create a dynamic javascript countdown timer, I want to pass it a datetime variable from my SQL server database and have it count down to this date then display a message, I've tried nearly every JQuery plugin I can find and Havent been able to edit them to do what I need, I also need to be able to have multiple countdown timers on the same page,
Any help would be much appriciated
Cheers
Scott
=======EDIT=======
After much Trial and Error I was able to modify this js http://andrewu.co.uk/clj/countdown/pro/
to do what I needed
try this:
function Thick(startin) {
startin--;
document.getElementById('timer').innerHTML = startin;
if(startin > 0) setTimeout('Thick(' + startin + ')', 1000);
}
call thus function in body onLoad like:
<body onLoad="Thick(20);">
hope this help :)
//TODAY'S DATE
$today = time();
//FETCHES DATE AND TIME FOR THE EVENT FROM DATABASE
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$Row = (mysqli_fetch_assoc($result));
$th = $Row['endtime'];
}
echo $th
first of all put it into a variable then use your javascript to call the variable
//let get todays date here
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $th; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
the javascript call in the variable with '<?php echo $th; ?>'; then the javascript does the count down with out refreshing the page