Input date don't work on safari - javascript

Date calendar doesn't work on safari browser but work correctly on other browser.
This is my code for the input date :
<div class="col-lg-4 col-xs-6">
<label for="exampleInputEmail1">Date de :</label>
<input type="date" required class="form-control" ng-model="date_debutOP">
</div>

According to MDN,
input[type=date] is recognized but there is no UI.
Meaning, the browser doesn't have a calendar-like display for such input controls.
You could also refer to caniuse.com to check for compatibility for such features.

The input-type Date is n newer one which isn´t supported on each browser. It´s just a field-validation and in some browsers there is a datepicker.
First only Chrome and now Firefox/..., too.
You could use this instead and it´s very simple:
JavaScript Datepicker

Maybe a bit late, but better late then never ;-)
This works for me:
Add this to your functions.php:
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
Then add this to your custom css:
div#ui-datepicker-div { z-index:1000!important; }
The inputfield still looks empty, but when you click on it, it will open the datepicker.

Related

Why i can not set date iinput type date in ipad

I am trying to set date in input type date using angular.js
js:
$scope.fromDate=new Date("1995-12-12");
html:
<input class="{{direction}}" type="date" name="fromDate" ng-model="fromDate" value="{{fromDate}}">
It works fine in desktop but doesn't work in ipad. Does somebody know why?
Safari doesn't understand new Date("1995-12-12");
See: Invalid date in safari
also:
http://biostall.com/javascript-new-date-returning-nan-in-ie-or-invalid-date-in-safari for formats that do work

Datepicker Bug : Using Datepicker seams to mess up with the jQuery on my page

I've built a form in which I use at some point Datepicker :
<div class="col-lg-5">
<div class="form-group">
<label class="control-label" for="datepicker" style="padding-bottom:10px;">Deadline pour l'étudiant</label>
<div class="controls with-icon-over-input">
<div class="input-group">
<input class="form-control hasdatepicker" id="datepicker" name="offer[end_date]" placeholder="31/12/2020" style="border-radius:5px" type="text">
</div>
</div>
</div>
</div>
On the CSS part, I've downloaded bootstrap-datetimepicker.js, version 4.0.0.
My problem is : every time I start using Datepicker on my footer_application.js file, all the jQuery features stop functioning.
I mean, as soon as I write on my footer_application.js file:
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
The Javascript effect that shows "Sans expliciter le nom, présentez votre entreprise (...)" stops functioning.
And the Datepicker doesn't seem to apply neither. I'm new to Javascript and jQuery so any help or clue is more than welcome.
And if you need any more information, I'll be more than pleased to add it to this post.
Good afternoon,
I don't know what language that is, but I'm not familiar with it so I don't know what error you are getting. However, I can tell you that typically this sort of stuff happens when you are doing something syntactically wrong, or that completely breaks the JavaScript. Once this line is attempted to be executed (and, again, this line of code is probably not correct for its purpose), JavaScript stops executing and everything after it does not get ran. I'd recommend double-checking the syntax for exactly what you are trying to do.
Regards,

Unwanted ngClick gets fired in IE11 browser

We have written customised checkbox which has divs for square and label.
Issue:Checkbox div has ng-click which should only be fired when clicked on square box but it also get fired if I click on Text next to it in IE11 Version 11.0.9600.16428.
Our implementation is working fine in Chrome and Mozilla but gives above issue when executed in IE11.
Sample Code link: (Please run this code in Chrome & IE11)
http://jsbin.com/luzogucasi/5/edit?html,js,output
Please help.
I have also raised issue in github
That is only expected behavior, because you used for="k".
The for attribute will target the id="k", and whenever you clicked on label it will focus element with id="k" which you mention in for attribute.
Remove attribute for="k" from label will work proper on each browser.
HTML
<div>
<div id="k" ng-click="userClicked()" class="disp">
<div class="check-no"></div>
<div class="check-yes" ng-show="checked"></div>
</div>
<label class="disp label">
{{checkText}}
</label>
</div>
NOTE
This is not angular related issue
JS BIN
Hope this could help you, Thanks.

bootstrap 3 datepicker (eonasdan version) provides a datetime object with getDate(). not a string

I am using the following bootstrap 3 datepicker.
http://eonasdan.github.io/bootstrap-datetimepicker/
it works fine but there is an issue . during the change event
the output thrown out is a js object. i want a string. is taht possible.
there is another question asked along the same lines. but current version of datepicker has been updated and the old code does not run in jsfiddle.
html code is as follows:
<div class="form-group">
<div class='input-group date' id='datetimepicker5' data-date-format="YYYY/MM/DD">
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
my jquery code is as follows ;
$(function () {
$('#datetimepicker5').datetimepicker({
pickTime: false,
useCurrent: true,
showToday: true,
language : 'en'
});
$('#datetimepicker5').data('DateTimePicker').show();
});
//.... on change event
$('#datetimepicker5').on('dp.change', function() {
var t3= $('#datetimepicker5').data("DateTimePicker").getDate();
alert (t3.format('YYYY-MM-DD)); // this is the new change and works perfect
});
any help is really appreciated
If I interpret the installation instruction correctly, Eonasdan already has moment.js as a dependency. This answer from a related question provides some sample code on using moment.js to format a date in JavaScript.
If for some reason moment.js is not available, you can fall back to the native JavaScript functions. See this answer from the same question as I previously referred to.

How to change the displayed date format in Datepicker?

I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​,
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?
refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});
What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.

Categories

Resources