Datepicker not working in safari and FireFox - javascript

I'm trying to use the default date type in HTML5, but this is not fully supported by Safari and FireFox, my workaround using jQuery is also not working.
I have this in script.js
$(document).ready(function(){
if ( $('#date1').type != 'date' ) $('#date1').datepicker();
});
In the form, I have this:
<script src="js/script.js" type="text/javascript"></script>
<input id="date1" name="date1" required="required" type="date" value="MM/DD/YY"/>
When I load the page in Safari/Firefox, I see no error, I also inspect elements, no error.
What am I doing wrong?

JQuery has a .type function, however it is not being properly used in your example, nor is it relevant. What I believe you want is the element's type property, which can be achieved like so:
$(document).ready(function(){
if ( $('#date1').prop('type') != 'date' ) $('#date1').datepicker();
});
Here is a JSFiddle comparing .type to .prop('type'): https://jsfiddle.net/hczg6uyf/1/
Here is a JSFiddle of your fixed code, supplied by Tom in the comments below: https://jsfiddle.net/51wLrxy0/1/

Well after reading that this is not supported on Safari and IE , i got a work around that im happy with.
My problem is that on Safari i could not even click on the input field. So user cant even manually add a date, and if he could there was no placeholder text to tell him its a date input field.
My Sulotion:
Add a placeholder, chrome will ignore this. Then also add a min-height to the input and then on Safari i can at least see its a date input field and the user can add a date manually.
Code:
<input placeholder="Date" id="datetimepicker" type="date" name="calender" class="form-control" />
CSS:
input#datetimepicker {
min-height: 1px;
}
This is just a quick hack that worked for me as for the browsers that doesnt support type="date" .

Related

Google Chrome Version 76.0.3809.100 (Official Build) (64-bit) Autocomplete Behaviour

I want to disable google chrome's persistent autocomplete in all browser for user experience (my Chrome version is 76).
I have tried many solution including :
1). The answers from
Chrome ignores autocomplete="off"
2). All the answers from
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
which include
1). Autocomplete="off", autocomplete="somerandomstring"
2). create another fake input above it with hidden style
3). wrap it with invisible div
It seems that the answers from both links are the solution for the outdated version of google chrome almost likely older than 76 chrome version.
<input name="number" type="text" class="form-control search" placeholder="No. Invoice" >
//this input is getting filled with persistent google chrome autocomplete
Expected Output : not filled with autocomplete
Actual Output : filled
Thank you in advance!
I just came across this same issue and none of the original answers seem to work.
As i use the placeholder text, I came up with a solution of adding the placeholder text as the value if the value is blank, as well as changing the color and then use the onfocus event to remove the value if it's equal to the placeholder and remove the color.
Here is an example:
<input type="text" class="form-control" id="search" placeholder="Search Users" value='Search Users' style="color: #6c757d;" onfocus="if (this.value == this.placeholder) {this.value=''; this.style.color=null;}">
The things that you would still have to look out for:
You need to add this to each input.
You need to check input isn't equal to placeholder on validation.
There is one other solution that i found worked:
Add a value to empty input and then remove it using a timeout, this should happen after the autocomplete has run.
html:
<input type="text" class="form-control NoAutoComplete" id="search" placeholder="Search Users" value='Search Users'>
CSS:
.NoAutoComplete {
color: #6c757d;
}
JS:
setTimeout(function () {
$(".NoAutoComplete").val("");
$(".NoAutoComplete").removeClass( "NoAutoComplete" );
}, 1000);
i haven't done to much looking in to this, but you should be able to add a class to all inputs that need not have a value and then delete all values and class at the same time.

Placeholder not working in IE 11 when set using Jquery

I have a requirement where I have 6 read only html textbox and I need to set the placeholder dynamically using JQuery . The method I have used works fine in Chrome but doesn't work on IE 11.
$(".textBox").attr("placeholder", "Please Select Items");
Above should be the default placeholder and upon selection of multiple select elements the count should be updated which I have written as below
$('.textBox').attr('placeholder',TempArray.length + " Items selected");
I have searched for the similar questions but does not seem to the relevant to my problem. Is there any alternative method in JQuery which can resolve the issue. Thanks in advance
I tried below code in IE 11. Its works fine.
<input type="text" id="add_placeholder" placeholder="please select" readonly></input>
<button id="click">Click me</button>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script>
$('#click').click(function(){
$('#add_placeholder').attr('placeholder','name is inserted');
});
</script>
https://jsfiddle.net/ev4rg8ed/

"Interner Explore has stop working" Getting a issue in IE 11 When user tab on html number input

I have one issue regarding IE 11 when i tab on html number input internet Explorer get close.I am using input type="number" and also using a angular directive "string-to-number".
I am writing my code and also displaying a error.
My Html code
<input type="number" string-to-number name="txtNum" autocomplete="off" ng-model="NumModel" ng-min="0.00" ng-max="999.99" />
Error Message while tab to control
Any Help would be greatly appreciated
Adding to comment by #Abhitalks, try also adding some attributes. Like adding placeholder. Sounds silly but sometimes it may works! :)

IE8 issue in displaying CSS stylesheet

H, I am new to browser compatibility issue debugging.
I have following html segment:
<div class="settings_content">
...
...
<div class="field">
<input name="name" maxlength="256" type="text" size="32" value="" class="noBdr" disabled="">
</div>
and I have a corresponding CSS for the input field:
.settings_content input
{
color: #505050;
}
in browser Chrome, IE10, IE9, the text indicated by that "input" tag will all be rendered correctly as black. However, if I test it in IE8, the text will still be shown, but the color will turn into grey.
I don't think this is a CSS issue but more of a cross-browser issue. Could experts give me some hints on where to debug? Thanks!
Unfortunately, you can't change the color of a disabled input in Internet Explorer 7, 8 or 9. If it were a regular input, your styles would have applied even without the !important part suggested in the previous answer.
For more info on the topic consider reading another thread.
EDIT:
It works in IE10 though.
You can open this fiddle in IE to check.
Try using !important
Like this:
.settings_content input
{
color: #505050 !important;
}
This might solve your problem...
OR
Use inline css like:-
<input /**********/ style="color: #505050 !important;" />
OR
Use some Browser Hacks for this...

jquery setting hidden input value not working as expected in IE7 and IE8

Continuing adopting my code to work with IE...
I have a hidden div containing a form to edit some information. When the user selects the item to edit, this div is shown and the fields are populated with the information for the item. That divs (in simplified terms) looks like this:
<div id="editform">
<form action="" method="post" id="qform" name="qform">
First param: <input name="field1" id="field1"/> <br/>
Second param: <input name="field2" id="field2"/> <br/>
...
<input type="hidden" name="qid" id="qid" value=""/>
<img id="submit" src="..." alt="..." title="..." />
</form>
I use jquery to set the values into the fields. My function for opening up the editing div looks something like this:
function edit_item(item_id) {
item = get_item(item_id); //this will return a JS object
$('#field1').val(item.property1);
$('#field2').val(item.property2);
...
$('#qid').val(item_id);
$('#submit').click(function() {
alert($('#qid').val());
$('#qform').ajaxSubmit();
});
}
All of this works fine in FF, Opera, Webkit and IE 9, however in IE7 and IE8, I'm having a strange problem. I can see the item_id being set correctly in the edit_item function, however as soon as that function completes, the hidden input value (qid) gets reset to the empty string. When the form is being ajax-submitted, the alert shows the value to be an empty string despite it being set correctly. Interestingly, all other fields are fine. And it works correctly in IE 9.
What am I missing here? Many thanks in advance.
This is totally stupid, and it shouldn't be the case, however:
$('#field1').val(item.property1);
did not work. Yet
$('#field1').attr("value", item.property1);
worked fine. I'm leaving it at that.
Solution for IE without JQuery in pure JavaScript does not look too complicated:
document.getElementById(id).setAttribute('value', value);
In addition to Aleks G's answer, I found out that value attribute must not be defined implicitly in the hidden element in order to jQuery .setAttr() and .val() work without issue in IE8.
See here for more details:
jQuery .val() setter not working?
I know i am late but i used following workaround since it did not work for me after trying all solutions
var id=$(this).data('id');
$('#update_entery_div').append(
"<input type='hidden' name='id' value="+id+" >"
);

Categories