I'd like to put today's date into a textbox using javascript; Here is my code:
function add_event() {
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var day1 = day + "." + month + "." + year
var html = '<tr><td class="date"><input type="text" name="date_evnt" value="?"></td> <td class="title"><input type="text" value="New Event"></td> <td class="delete"><input type="button" value="-"></td></tr>';
$('#events-table').append(html);
events_table_events();
}
I'm not sure how to set the date into textbox name date_evnt.
If you just want to put the day1 value in date_evnt you can do this:
var html = '<tr><td class="date"><input type="text" name="date_evnt" value="' + day1 + '"></td> <td class="title"><input type="text" value="New Event"></td> <td class="delete"><input type="button" value="-"></td></tr>';
You may try this
function add_event() {
var currentDate = new Date(), day = currentDate.getDate(),
month = currentDate.getMonth() + 1, year = currentDate.getFullYear(),
day1 = day + "." + month + "." + year;
var txt1 = $('<input/>', { 'name':'date_evnt', 'value':day1 }),
tr = $("<tr/>"), td = $('<td/>');
tr.append(td.attr('class','title').html('New Event '))
.append(td.append(txt1))
.append(td.append($('<button/>', {'html':'-'})));
$('#events-table').append(tr);
}
add_event();
DEMO.
Related
function check(){
var d = new Date();
var date = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var state = document.form1.state.value;
if(state==1){
document.getElementById("expDate").innerHTML = (date + 4) + "/" + month + "/" + year;
}
else if(state==2){
document.getElementById("expDate").innerHTML = (date + 7) + "/" + month + "/" + year;
}
}
<form name="form1" >
<table width="20%">
<tr>
<td>Select State: </td>
<td>
<select name="state">
<option value=1>CANSAS</option>
<option value=2>NEW YORK</option>
</select>
</td>
</tr>
<tr>
<td>Expected Delivered:</td>
<td><p id="expDate"></p>
</td>
</tr>
<td>
</td>
<td>
<input type="submit" name="submit" value="submit" onClick="return check()">
</td>
</tr>
</table>
</form>
I'm creating a postage calculator using HTML and JavaScript. The calculator will calculate the expected delivery date when users select the state option and submit. After the submit, the selected value will be caught by JavaScript and used as to recognize which area of the state is (south, west, else). Eg: cansas, which is west, duration will be 5 days. Then in the same page the expected delivery date will be shown after it calculate by adding the 5 with current date.
You are almost there. Your code actually sets the innerHTML for 'extDate' as well but after that it submits the form and value disappears as form resets.
Only thing that you have to do is to prevent the form to be submitted by returning false.
function check(e) {
// e.preventDefault();
var d = new Date();
var date = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
// document.getElementById("date").innerHTML = date + "/" + month + "/" + year;
var state = document.form1.state.value;
if (state == 1) {
document.getElementById("expDate").innerHTML = (date + 4) + "/" + month + "/" + year;
}
else if (state == 2) {
document.getElementById("expDate").innerHTML = (date + 7) + "/" + month + "/" + year;
}
return false;
}
I have checked the following the code and for 'New York', it returns Expected Delivered:
26/10/2018
I have a date object which I am setting based on the value selected by the user, from the drop down calendar.I want to add 3 days to the selected one. Its working perfectly fine for all months, except December. If I select a particular date from December and add 3 days, the month value returned is "00" instead of "12".
Here is my code.
var dateinput= document.getElementById("date_picker").value;
console.log(dateinput);
var timeinput= document.getElementById("time_picker").value;
var dateobj = dateinput + ' ' +timeinput;
var parts = dateobj.split(/[-\s:]/);
var date = new Date(parts[0],parts[1],parts[2],parts[3],parts[4]);
console.log(parts[1])
date.setDate( date.getDate() + 3);
console.log(date)
var dateobj2 = [date.getMonth(), date.getDate(), date.getFullYear()].map(pad).join('/') +
' ' + [date.getHours(),date.getMinutes()].map(pad).join(':');
Basically months will start from 00 (Jan) to 11 (Dec). So when user enters 12 for December, it should be subtracted by 1 to get 11 when you assign the components to new Date(year, month, day, hours, minutes, seconds, milliseconds).
So your code will become,
var date = new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4]);
You can check the below snippet,
function getDate() {
var dateinput= document.getElementById("date_picker").value;
var timeinput= document.getElementById("time_picker").value;
var dateobj = dateinput + ' ' +timeinput;
var parts = dateobj.split(/[-\s:]/);
var date = new Date(parts[0], parts[1]-1, parts[2], parts[3], parts[4]);
date.setDate( date.getDate() + 3);
console.log(date);
}
<input type="date" id="date_picker" />
<input type="text" id="time_picker" />
<input type="button" value="Get Date" onclick="getDate()" />
<br/>
Below code output http://prntscr.com/ddyjy3
<!doctype html>
<html>
<head>
<title>Date Demo</title>
<style>
ol {
display: inline-block;
list-style-type: none;
}
li {
display: block;
border: 1px solid green;
padding: 5px;
}
</style>
</head>
<body>
<ul id="demo"></ul>
<script>
// set start date from your date picker
// set daysToAdd to 3 to return next 3days from the selected date
function showDates(startDate, daysToAdd) {
var aryDates = [];
for (var i = 0; i < daysToAdd; i++) {
var currentDate = new Date();
currentDate.setDate(startDate.getDate() + i);
var fullDate = currentDate.getDate() + "/" + (currentDate.getMonth() + 1) + "/" + currentDate.getFullYear();
aryDates.push('<li class="pick-date" data-date="' + fullDate + '"> ' + currentDate.getDate() + ' <span class="day">' + DayAsString(currentDate.getDay()) + '</span> ('+ fullDate +')</li>');
}
return aryDates;
}
function DayAsString(dayIndex) {
var weekdays = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
return weekdays[dayIndex];
}
var startDate = new Date();// document.getElementById('date_picker').value
var aryDates = showDates(startDate, 7);
document.getElementById("demo").innerHTML = aryDates.join(" ");
</script>
</body>
</html>
from date selected by the datepicker in dd-mm--yy format after this i need next year date with -1 day..i.e From:29-07-2016 then To:28-07-2016 like this...please guyz help me..i m sharing my source code
$('#oldDate').on('change', function(e){
var oldDate = new Date(this.value);
$('.datepicker').datepicker({dateFormat:'dd-mm-yy'});
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate()-1);
oldDate.setFullYear(oldDate.getFullYear()+1);
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = oldDate.getFullYear()+"-"+(month)+"-"+(day);
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
<p class="left">
<label for="from">FROM:</label>
<input type="text" name="from" id="oldDate" class="datepicker"/>
</p>
<p class="pull-right">
<label for="to">TO:</label>
<input type="text" name="to" id="new">
</p>
To achieve expected result, use datepicker and then use on change function to make work
JS:
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", "0");
$('#oldDate').click(function() {
$('#oldDate').datepicker('setDate', new Date());
});
$('#oldDate').on('change', function(e) {
console.log(this.value)
var x = this.value;
var from = x.split("-");
var f = new Date(from[2], from[1] - 1, from[0]);
var oldDate = new Date(f);
$('#old').html(new Date(oldDate));
oldDate.setDate(oldDate.getDate() - 1);
oldDate.setFullYear(oldDate.getFullYear() + 1);
console.log(oldDate)
var day = ("0" + oldDate.getDate()).slice(-2);
var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);
var today = (day) + "-" + (month) + "-" + oldDate.getFullYear();
// var today = oldDate.(day)+"-"+(month)+"-"+getFullYear();
// alert(today);
$('#new').val(today);
});
Codepen-http://codepen.io/nagasai/pen/XKBZmN
Check this :
<script type="text/javascript">
var dt = new Date('2016/12/10');
var month = dt.getMonth()+1;
var day = dt.getDate()-1;
var year = dt.getFullYear()+1;
alert(month + '-' + day + '-' + year);
</script>
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>
<tr>
<td class="tr9 td0"><p class="p1 ft8">Mr. / Mrs. : </p></td>
<td class="tr9 td1"><p class="p3 ft8"><nobr>Telefon: </nobr></p></td>
<td class="tr9 td2"><p class="p4 ft6">DATE</p></td>
</tr>
How can I become the actual Date in Javascript on the Placeholder "DATE" in this table?
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
document.write("<b>" + day + "/" + month + "/" + year + "</b>")
Doesnt work.
It's because you are writing value directly to HTML. Pass it to element
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].innerHtml = "<b>" + day + "/" + month + "/" + year + "</b>";
Or if you are using jQuery:
$('.p4').text("<b>" + day + "/" + month + "/" + year + "</b>");
JSFiddle with pure js and jQuery
The javascript code is working fine but the problem with document.write. it write text on entire document.
so use.
document.getElementsByClassName('p4').innerHTML= "<b>" + day + "/" + month + "/" + year + "</b>";
I tried to debug in firebug and it's seems textcontent property still filled by "DATE", so i set the textContent property become date today, code below maybe can answer your question :
<script>
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementsByClassName('p4')[0].textContent = day + "/" + month + "/" + year;
</script>