Change output format of Date field in HTML form - html

We have a HTML form and I have pasted the code for our Date of Birth field below. When the user enters the date, it requests it in dd/mm/yyyy format. However, once they click off the field, it changes to yyyy/mm/dd. As a result, our CRM is not accepting it because of the format. Is there a way to keep it as dd/mm/yyyy?
<label><span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="100" placeholder="Date of Birth" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" required="true" data-cip-id="00N0Y00000RWiNa"></span></label>
Thanks
James

first it would be good to make sure you have only one "id" attribute on the input field.
Here is an example that might help you.
Here I removed the first id to get rid of the error in jsfiddle.net
function formatDate() {
// select element
const date = document.querySelector('#date');
// pick up date
let currentValue = date.valueAsNumber;
// change type
date.type = "text";
// update value with prev set value from date picker
date.value = new Date(currentValue).toLocaleDateString('en-GB');
}
<label>
<span class="dateInput dateOnlyInput">
<input name="00N0Y00000RWiNa"
size="100"
placeholder="Date of Birth"
class="textbox-n"
type="text"
onfocus="(this.type='date')"
onblur="formatDate()"
required="true"
data-cip-id="00N0Y00000RWiNa"
id="date">
</span>
</label>

Related

How to fill in date in puppeteer js

I have the following on a form:
<input
type="date"
placeholder="Date of Birth"
name="11171977"
data-componentname="dateOfBirth"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
data-ddlabel="dd"
data-mmlabel="mm"
data-yyyylabel="yyyy"
/>
On all other elements I can select like this:
document.querySelector('[data-componentname="dateOfBirth"]').value = '1119189';
However on the date it doesn't work. How would I fill this out?
It seems value for date input reqires some format like "yyyy-MM-dd". You can also use .valueAsDate property with Date objects.
I ended up doing it like this:
await page.focus('[data-componentname="dateOfBirth"]');
await page.keyboard.type('11171977');

Validation of the input fields

I have two input fields as shown below
<input type="number" name="number" placeholder="Enter minimum price">
<input type="number" name="number" placeholder="Enter maximum price">
<input type="submit">
want to validate always first input value must be less than the second input value.
You can Set it manually in html by max = "" min = "" in both field
or You can validate it in your function which is better way to handle it

Asp.net MVC 4 date Input Hiding Oldest Days

I want hide oldest date in date input. How to do this ?
Model:
Public Property OrderDate As Date
View
#Html.EditorFor(Function(m) m.OrderDate, New With {.placeholder = "Set Date"})
Html Output
<input class="text-box single-line" data-val="true" data-val-date="The field Order Date must be a date." data-val-required="Order Date is Required" id="OrderDate" name="OrderDate" type="date" value="01/01/0001">
You can set it HTML5 min and max attr. For example,
<input name="somedate" type="date" min="2013-12-25">
In your example
<input name="somedate" type="date" min='#DateTime.Now.ToShortDateString()'>

Text enter in one text box gets populated in another

Here is a part of my html code for angularjs app
<input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text"
name="user_name" rel="popover" data-content="Enter your first and last name."
data-original-title="Full Name">
<input type="text" class="input-xlarge" id="user_email" ng-model="myModel.text"
name="user_email" rel="popover" data-content="What’s your email address?"
data-original-title="Email">
Here is my controller code
function MyCtrl2($scope) {
var initial = {text1: 'initial value'};
var ini = {text2: 'initialvalue'};
$scope.myModel = angular.copy(initial);
$scope.myModel = angular.copy(ini);
}
MyCtrl2.$inject = ['$scope'];
What ever I write in first text box automatically gets populated in second text box too.Why is dat happening.How to avoid it.
Because both of your fields have the same ng-model.
To avoid it, use different values for ng-model for each input field.
Because your both input field associate with same model name myModel.text

How can I make an input field read only but still have it send data back to a form?

I have an input field:
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />
I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.
Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.
Adding a hidden field with the same name will sends the data when the form is submitted.
<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />
With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.
On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).
You could also do this with JavaScript:
var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
if(inputs[i].type == 'hidden'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.setAttribute('disabled');
newInput.value = inputs[i].value;
theForm.appendChild(newInput);
}
}
Clumsy JS Fiddle demo.
alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted
<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>
<script type="text/javascript">
function myFn(event) {
event.stopPropagation(); event.preventDefault();
}
</script>
<input onkeydown="myFn(event)" >
You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />
You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.
<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />