I have to two fields type text in html, and two datepicker for those fields.
Now, when I choose the dates, they automatically populate text fields but in hidden input field those values are stored with the time also.
Like this:
value="2022-04-13T00:00:00+02:00"
Is there a way to format that input to be like this:
value="2022-04-13"
Thanks in advance...
What browser are you using?
in this code example everything works as you expected.
<input id="date" type="date" />
<input id="hidden" type="hidden" />
<script>
const date = document.querySelector("#date");
const hidden = document.querySelector("#hidden");
date.addEventListener("input", (e) => {
hidden.value = date.value;
});
</script>
Related
I can't find any solution for this anywhere. I would like to allow user to see calendar when clicking on my input, but when user will try to change the value, it shouldn't change (or immediately change back for value, what was at the beggining).
Readonly attribute removes calendar, so I was trying to do it different ways like use onchange/onclick functions to restore my value after event, but the value was changing anyway.
So for now my input looks like this:
<input class='test' type='date' value='2020-06-04' onkeydown='return false' >
So at least user can't change value of my input using keyboard. Could you help me?
You might try to set a time limit
<html>
<body>
<input type="date" value="2020-06-04">
<input type="date" value="2020-06-04" min="2020-06-04" max="2020-06-04">
</body>
</html>
If I understood correctly, this is what you want.
HTML
<input class='test' type='date' value='2020-06-04' />
JavaScript
const date = "2020-06-04";
const input = document.querySelector('.test');
input.onkeydown = function(e) {
return false;
}
input.onchange = function(e) {
this.value = date;
}
Check out this JSFiddle
EDIT
function preventInputChange(input, staticValue) {
input.onchange = function(e) {
this.value = staticValue;
}
}
I have filter/search here. But the search is when I'm insert the value and get ENTER it success. Right now, I want to change the search with button search and textarea for input the value. It is supposed to have like that. Do I need to add search button? Please see my demo below, thank you.
DEMO
I have done this
I want to change to this
HTML
<input id="text" type="text" class="k-textbox" placeholder="Search by name" />
JavaScript
$('#text').change(function(e){
var grid = $('#grid').data('kendoGrid');
var field = 'ProductName';
var operator = 'contains';
var value = this.value;
grid.dataSource.filter({
field: field,
operator: operator,
value: value
});
});
});
Add a button
<input type="button" id="btnSearch" value="Search" />
Change this
$('#text').change(function(e){
to this
$('#btnSearch').click(function(e){
i'm working in a laravel project and i would like to show a date in input field ,
i am able to show all my rows from database ,but not the date field .
i have both tried to show it in input with type="text" and type="date" but it doesn't work .
here's the button i click to get the modal:
<a type="button" class="detail-modal"
data-dateFin="{{$voiture->dateFin}}" >
<h5>DETAIL</h5>
</a>
my modal :
<div><label class="spn text-left">date</label>
<input type="text" name="em" class="txtmod" id="dateFin-voiture"></div>
my Javascript:
if(typeof $(this).data('dateFin') != 'undefined') {
$('#dateFin-
voiture').val(moment($(this).data('dateFin')).format('YYYY/MM/DD'));
} else { // It's undefined
$('#dateFin-voiture').val('Please Enter Date of Birth');
}
in my input field it gives me Please Enter Date of Birth so it is undefined ..
the dateFin type in my database is date, in format YYYY-MM--DD
instead i am able to show my field created_at of type timestamp in my input type="text" and not type="date"
thanks for the help
Try with
if(typeof $(this).data('dateFin') !== 'undefined')
Also worth mentioning that the value in your type attribute inside your anchor tag is not valid, I would suggest you use a <button type="button"> tag for doing this.
How to fill data automatically in a textfield using the info provided in the tab using javascript. And also the filled data cannot be edited.
The textfield may fill data based on calculation on the option selected in tab.
Please help.
I don't so much understand your question but try this:
HTML
<input type="text" id="t" disabled />
JS
var text = document.getElementById('t');
text.value = 658.57; // your calc result
If you use jQuery, you can do something like this:
$(document).ready(function() {
var VALUE_OF_SELECTED_TAB = this.value;
// HERE DO YOUR CALCULATIONS
$(YOUR_SELECT_ELEMENT).on('change', function() {
$(YOUR_TEXTFIELD_ELEMENT).html(
'<input type="text" value="'+ YOUR_CALCULATION_RESULT
+'" class="field left" readonly="readonly" >');
});
});
I want to implement an country-selection-input. In other words, I've got a form with a 25x25px flag, which I want to be clickable - say, german as default, first click changes it to netherlands, second to swiss or w/e.
The last chosen value needs to be in my POST-Array with the other values of the form.
I've tried to accomplish this using 3-Way checkboxes with javascript, but I'm going to need more than 3 options.
Any idea on how to do this? I've thought about an input select, hiding everything but the current value - but I don't know how to submit this to change to the next value.
Thanks in advance for any input, and please don't judge me for such a question - this is my first js/html/css project. :-)
You can do something like this:
HTML
<form method="POST">
<img src="german.png" onclick="switchCountry(this);"/>
<input id="country" name="country" type="hidden" value="german" />
<input type="submit" value="Submit" />
</form>
JavaScript
var countries = ['german', 'netherlands', 'swiss'];
var switchCountry = function(img) {
var input = document.getElementById('country'),
oldValue = input.getAttribute('value'),
newValue = countries[(countries.indexOf(oldValue) + 1) % countries.length];
// Switch input value that will be posted with form
input.setAttribute('value', newValue);
// Switch graphical representation of country
img.setAttribute('src', newValue + '.png');
};
Example here http://jsbin.com/alasip/1/edit