how do i insert a date time into a field (military time) on the click of a button.
I found this, similar code, but I was unable to make it work:
$(function() {
$('#time').click(function() {
var time = new Date();
$('#time-holder').val(time.toDateString());
});
});
<input type="text" value="" id="time-holder">
<input type="button" value="time" name="timer" id="time">
Why does it not show the date when i click the button?
This will insert the time instead of the date:
$(
function(){
$('#time').click(function(){
var time = new Date();
$('#time-holder').val(time.toTimeString());
});
}
);
Use time.toString() to get both the date and the time.
More info at https://www.w3schools.com/jsref/jsref_totimestring.asp
Update:
JSFiddle: https://jsfiddle.net/cuva5y4z/
Related
I am creating a form and not finding how to populate a date field with the calendar date. The form should populate the date when a new form is created. I have the following code:
<div>
<label><b>Request Initiation Date</b></label><br />
<input type="date" id="RequestDate">
<script>
(function() {
var date = new Date().toISOString().substring(0, 10);
var field = document.querySelector('#Requestate');
field.value = date;
console.log(field.value);
});
</script>
</div>
You have two issues. Firstly, in
document.querySelector('#Requestate')
you have mistyped the element ID, it should be
document.querySelector('#RequestDate')
--------------------------------^
Secondly, you aren't calling the function, so the last line should be:
}());
-----^^
The full code:
<div>
<label><b>Request Initiation Date</b></label><br />
<input type="date" id="RequestDate">
<script>
(function() {
var date = new Date().toISOString().substring(0, 10);
var field = document.querySelector('#RequestDate');
field.value = date;
console.log(field.value);
}());
</script>
</div>
Of course you can write it in less code, but you should consider readability and maintainability before doing that.
You can use the below-given js -
document.getElementById("RequestDate").valueAsDate = new Date()
The new Date() fn will get the current date and assign it to the target input[type=date] control.
I have form which contain Add more field button ,which dynamically adds new datepicker's whenever i click Add More field button.
The problem is ,Currently date field in the datepicker display the current date.
But when i add new Datepicker by clicking on the Add more Field Button , it adds one more Datepicker but this time it resets the previous value of Datepicker which i had set manually.
Below is my code:
html
<div id="container">
<input class="datepick" type="text"></input><button class="add">Add</button>
<input
</div>
javascript
$(".datepick").datepicker();
$(".datepick").datepicker().datepicker("setDate", new Date());
$(document).on('click', '.add', function() {
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
$("#container").append(appendTxt);
$(".datepick").datepicker();
$(".datepick`enter code here`").datepicker().datepicker("setDate", new Date());
});
Because of this line:
$(".datepick").datepicker();
All inputs which have the class .datepick will reinitialize. You should do something like this:
$(".datepick").last().datepicker();
or
$(".datepick:last").datepicker();
after you add the new input.datepick. This was the simple solution.
If you have any other .datepick's in another container after this container, this won't work too. You should be very specific about the appended datepicker element.
You should do this :
var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>';
var newInput = $(appendTxt).appendTo("#container");
newInput.datepicker();
newInput.datepicker().datepicker("setDate", new Date());
I am using Bootstrap datetimepicker in a form insider my Meteor.JS app in order to have two time picker elements. Below is the code I have so far which detect the onChange event for each of the two time picker elements in my form but I can't figure out how to get the selected time? So can someone please tell me how to do so? Thanks
$('.set-start-time').datetimepicker({
pickDate: false
});
$('.set-end-time').datetimepicker({
pickDate: false
});
$('.set-end-time').on("dp.change",function (e) {
var now = $('.set-start-time').data("DateTimePicker").getDate();
var then = $('.set-end-time').data("DateTimePicker").getDate();
//Above code won't return time...
});
I hope this helps some one.
HTML
<div name="startTime" class="input-group time">
<input class="form-control" type="text" value="" >
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
JS
$('.time').datetimepicker({
format: 'LT'
}).on("dp.change",function(e){
var date = e.date;//e.date is a moment object
var target = $(e.target).attr('name');
console.log(date.format("HH:mm:ss"))//get time by using format
})
e.date is a moment object thus time can derived by using format("HH:mm:ss")
I am giving two dates manually in the form after that one more empty box is there date difference should get calculated in terms of days in third box dynamically using java script
for me its working when i am clicking submit button and using submit button property but i want it should get calculated after entering second date into second box and it should display in third box here is my code....
please help me out here..
Script
function dateDiff() {
date1 = new Date();
date2 = new Date();
diff = new Date();
date1temp = new Date(dateform.firstdate.value);
date1.setTime(date1temp.getTime());
date2temp = new Date(dateform.seconddate.value);
date2.setTime(date2temp.getTime());
diff.setTime(Math.abs(date1.getTime() - date2.getTime()));
timediff = diff.getTime();
days = Math.floor(timediff / (1000 * 60 * 60 * 24));
dateform.difference.value = days;
return false;
}
html
<form>
<fieldset>
<label for="Enter leave starting date">Enter leave starting date
<input type="text" name="firstdate" />
</label>
<label for="Enter leave ending date">Enter leave ending date
<input type="text" name="seconddate" onkeyup="return dateDiff();" />
</label>
<label>
Date Difference (in days): <input type=text name=difference>
</label>
</fieldset>
</form>
Actually, the code works...the only thing you need is to give the form the name you use in the script
<form name="dateform">
....i tested it on your fiddle, it works like a charm: http://jsfiddle.net/byJKg/5/
...tough you might want to check if the datediff is not NaN
if(!isNaN(days)){
dateform.difference.value = days;
}
[edit] ...i just saw it wasn't your fiddle....but the fiddle posted by Felix Lahmer, with your source code
I have an HTML code like this one:
<form action="#" method="get">
<input type="date">
</form>
I want to have an event or something that will check when the date is changed, and get the date in JS Date object?
Demo
Try change event handler on the input,
$(document).ready(function(){
$('input[type="date"]').change(function(){
alert(this.value); //Date in full format alert(new Date(this.value));
var inputDate = new Date(this.value);
});
});
Attach the change event handler and convert the value into Date:
$("input").on("change", function () {
var myDate = new Date($(this).val());
console.log(myDate, myDate.getTime());
});
JSFIDDLE
You need to use a .change() jquery handler it will look something like this:
$(document).ready(function(){
$('#dateInput').change(function(){
console.log('Updated Date');
});
});
<form>
<input id="dateInput" type="date" />
</form>