Datetimepicker did not work on element that append form javascript - javascript

I have one input date, this input append from js like this
var inputdate = '<input type="text" name="date[]" class="form-control date" placeholder="Input date"';
$("form").append(inputdate);
And the html code is like this :
<form method="POST">
...
</form>
Initialize datetimepicker
$('.date').datetimepicker({
format: 'YYYY-MM-DD'
});
The input element append succesfully and the other form that have input date work with datetimepicker.
But the element that append from js is not showing datetimepicker, is there any mistakes?

I think you missed one thing here.
var inputdate = '<input type="text" name="date[]" class="form-control date" placeholder="Input date"';
It should have > at the end of string.
The initialization code should be Reexecuted after we append inputDate into $('form').
So the code should be:
var inputdate = '<input type="text" name="date[]" class="form-control date" placeholder="Input date">';
$("form").append(inputdate);
$('.date').datetimepicker({format: 'YYYY-MM-DD'});

Related

Subtract 1 day from date input box and submit using button

I'm trying to collect 2 dates using input boxes ids From and To. I would like to subtract 1 day from the date value received using "FROM" text box and pass that new value to the button click event.
The code below works to push values received from the input box. However, i wish to subtract 1 day and pass on the same.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
From : <input type="date" class="form-control" id="From" placeholder="From" aria-label="From">
To : <input type="date" class="form-control" id="To" placeholder="To" aria-label="To">
<input type="button" onclick="location.href='#SITE#/TDL-Test-code.aspx?FromTo=(Date ge datetime%27'+FD+'T00:00:00.000Z%27) and (Date le datetime%27'+ document.getElementById('To').value+'T23:59:00.000Z%27)';" value="Submit" />
Edit:
Following is my moment JS function
var oldfrom = document.getElementById('From').value;
newdate = moment(oldfrom).subtract(1, 'days').format("YYYY-MM-DD");
var FD = newdate;
Issue was fixed with solution below.
document.getElementById("From_Local").oninput = function() {
var dateLocal = document.getElementById("From_Local").value;
var dateUTC = moment.utc(dateLocal).subtract(4, 'hours').format("YYYY-MM-DD");
document.getElementById("From_UTC").value = dateUTC;
}
From:<input name="From" required type="date" id="From_Local">
<input type="hidden" id="From_UTC">
To:<input name="To" required type="date" id="To">
<input type="button" onclick="location.href='SITE_URL?FromTo=(Date%20ge%20datetime%27'+ document.getElementById('From_UTC').value+'T00:00:00.000Z%27)%20and%20(Date%20le%20datetime%27'+ document.getElementById('To').value+'T00:00:00.000Z%27)';" value="Submit" />

Insert time into a field only when selected and then click

The time only inserts on the first field https://jsfiddle.net/cjy28u1o/. I want to insert the time based on the field that is selected.
$('#time').click(function(){
var time = new Date();
$('#time-holder').val(time.toTimeString());
});
You can store the focused element using .focusin() in a variable and then set it's value when click. Also using the attribute class instead of id is more meaningful in this case:
$(function(){
var $focused;
$('.time-holder').focusin(function(){
$focused = $(this);
});
$('#time').click(function(){
var time = new Date();
if($focused != undefined)
$focused.val(time.toTimeString());
else
alert('Not focused any element');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" class="time-holder">
<input type="text" value="" class="time-holder">
<input type="text" value="" class="time-holder">
<input type="button" value="time" name="timer" id="time">
In HTML DOM, id is unique.
If you put same id for multiple elements, DOM and jQuery will fire event on first matched element with the specified id.
Rest of the elements will be simply ignored.
You need to add class to all elements as multiple elements can have same class.
This way, you will get time for all text fields.
So, your code corrected now:
<input type="text" value="" id="time-holder" class="time-text">
<input type="text" value="" id="time-holder2" class="time-text">
<input type="text" value="" id="time-holder3" class="time-text">
<input type="button" value="time" name="timer" id="time">
And Javascript:
$(function(){
$('#time').click(function(){
var time = new Date();
$('.time-text').val(time.toTimeString());
});
}
);
Try
$(
function(){
let lastFocusEl=null;
$('#time').click(function(){
var time = new Date();
if(lastFocusEl) lastFocusEl.value = time.toTimeString();
});
let f = function() { lastFocusEl=this};
$('#time-holder').focus(f);
$('#time-holder2').focus(f);
$('#time-holder3').focus(f);
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="" id="time-holder">
<input type="text" value="" id="time-holder2">
<input type="text" value="" id="time-holder3">
<input type="button" value="time" name="timer" id="time">
the time is only insert on first field
It is happening because, You have given the diffrent IDs to all the three elements.You are only targeting the first element. You should use class instead. Try this,
<input type="text" value="" class="time-holder"> <input type="text" value="" class="time-holder"> <input type="text" value="" class="time-holder">
<input type="button" value="time" name="timer" id="time">
JS CODE:
$(
function(){
$('#time').click(function(){
var time = new Date();
$('.time-holder').val(time.toTimeString());
});
}
);
I would listen to the focus event, and then set the time to the last focused element.
$('input[type="text"]').focus(function(){
this.dataset.selected = true;
});
$('#time').click(function(){
var time = new Date();
var selectInput = $('[data-selected="true"]');
selectInput.val(time.toTimeString());
});

How to get the timestamp of data input in an HTML form

I have form like below:
<div id="form">
<form>
First Name: <input type="text" name="firstname" id="firstname">
Last Name: <input type="text" name="lastname">
Start Time: <input type="hidden" name="starttime" id="starttime">
<input type="submit" value="Submit">
</form>
</div>
I want to store a timestamp in a local storage when data is entered for the first time in firstname input. When the form is submitted, I will insert that timestamp as Start Time and form submit time as End Time in database.
Here is what I have so far:
<script>
$(document).ready(function(){
var startTime = '';
$('#firstname').change(function (){
if (startTime) == ''
{
var timeStamp = new Date();
sessionStorage.setItem("startTime",timeStamp);
}
});
});
</script>
Now, how do I send the startTime value from javascript to the starttime html input? Any help will be much appreciated.
You can use step attribute in your input tag:
<input type="time" name="timestamp" step="1">
W3C: input: type=time

datepicker min date change dynamically in angular js

I have a min date taken dynamically. I get the value from my controller as 'setmax'.
I need to give this value to my datepicker mindate.
I ahev tried this by setting
$scope.minDate = $scope.setmax;
inside my controller. But it is not taking this value.
Is it possible to give like this
<input type="text" class="form-control"
datepicker-popup="dd/MM/yyyy"
ng-model="myModel.vdate"
placeholder="Amount valid date"
is-open="startOpened"
ng-init="startOpened = false"
min-date="{{secmax}}"
max-date="end"
required
close-text="Close"
ng-click="startOpen($event)"
name="datevalidity"/>
Did you try this?
<input type="text" class="form-control"
datepicker-popup="dd/MM/yyyy"
ng-model="myModel.vdate"
placeholder="Amount valid date"
is-open="startOpened"
ng-init="startOpened = false"
min-date="setmax"
max-date="end"
required
close-text="Close"
ng-click="startOpen($event)"
name="datevalidity"/>

Select all input tag in without certain attribute in Jquery

How to select all input tag in without certain attribute and checks each input value not empty in Jquery
Html
<input type="text" maxlength="255" value="" id="UserName" class="form-error" >
<input type="text" maxlength="255" value="" id="Password" class="form-error">
<input type="text" maxlength="255" value="" id="Group" class="form-error" inputname="test" >
<input type="text" maxlength="255" value="" id="Aka" class="form-error" inputname="money" >
I want to select all inputs from the current page which dont have attribute as 'inputname'.
Something like
In javascript
var inputs = $('input:not(:has(>[inputname]))');
jQuery.each(inputs, function(input) {
if (input.value == '') {
$(input).next().removeClass('displayNone');
return false;
}
});
I believe you want
var inputs = $('input:not([inputname])');
Live example
$('input:not([inputname])') should do the trick?
Use this
var input = $(":input");

Categories

Resources