I am using Angular. I am curious to how I can remove these arrows:
Also, if its possible to click the date picker box(Where mm/dd/yyyy is) and allow it to show the Date Selector instead of clicking the far right arrow.
I don't think it does this across all browsers; narrow down where you see this and where you don't want to see this; and then do something like the below but specific to the browser your targeting.
input::-webkit-calendar-picker-indicator{
display: none;
}
You can do this with jquery here is a demo (I couldn't get it to work in the snippet)
JsFiddle
$(document).ready(function() {
$("#datepicker").datepicker();
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<body>
<form>
<input id="datepicker" />Choose a date
</form>
</body>
You can resize the datepicker by doing something like
div.ui-datepicker{
font-size:10px;
}
Related
I'm working on jquery DatePicker here I want to select multiple dates I tried by using selectMultiple: true but not achieve. I don't want to use other plugins.
Can anyone help me out how should I get these required result.DatePicker jsfiddle here
$(function() {
$("#datepicker").datepicker();
});
.container {
width: 600px;
padding: 20px;
margin: auto;
background: #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
<p>This is a datepicker example</p>
<form>
Date:
<input id="datepicker">
</form>
</div>
jQuery must be included before the library, you need to swap the relevant lines:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
Also, try to use a more modern version, we're at 3 now ;-)
As for the question: this datepicker seems to not support date ranges so you're forced to use two input fields with two datepickers.
Mind you I've never used this particular datepicker myself, I've just read its documentation.
This pull request on GitHub gives you some hints:
Request for ranges enhancement
So yesterday I asked a question about setting the date for a calendar. I was missing some references so have since added them. Please see the HTML section below.
I believe my code to be correct for how to set the date for a calendar. However upon loading the page I get these errors,
Uncaught SyntaxError: Unexpected token datepicker.css:11
The specified value "09/01/2018" does not conform to the required format, "yyyy-MM-dd".
jquery.js:8254
Not sure why this is not working and where the date "09/01/2018" is coming from at all?
I also think in my the datepicker.css should be like below.
link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css" rel="stylesheet" type="text/css" />
When I do this the Uncaught SyntaxError message disappears but still have the other issue.
$(document).ready(function() {
$("#dtSelectorStatic").datepicker();
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<input id="dtSelectorStatic" />
Update
Below are all the references I have in my page. One thing (might be nothing) but when I type "script src=" the intelli sense picks on my folder scripts and list 3 files (image below, jQES is the file I created) but it does not list the other two files also in that folder, jquery-ui.js or jquery-ui.min.js
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>
<script src="/scripts/external/jquery/jquery.js"></script>
<script src="/scripts/jquery-ui.min.js"></script>
<script src="/scripts/jQES.js"></script>
<link href="CSS/MyCSSFile.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
update 2
This is how it looks on load up.
If I click in the area where the blue arrow is pointing to the calendar below is shown.
If I click on the big black arrow I get both calendars
I have another calendar box which is exactly the same. Which only shows the calendar shown below no matter what I do. The only difference is that on load up I do not try to set the date as I do in the calendar above.
<input id="someId" type="date"/>
jquery-ui datepicker docs (scroll at least 1 line up, there's no id on Additional Notes, that was the closest element I could link to) contains information about this issue:
Additional Notes:
...
Creating a datepicker on an <input type="date"> is not supported due to a UI conflict with the native picker.
This is default HTML5 input with attribute type="date":
<input type="date">
From MDN about HTML5 date input's value:
One thing to note is that the displayed date format differs from the actual value — the displayed date format will be chosen based on the set locale of the user's browser, whereas the date value is always formatted yyyy-mm-dd.
When you add jquery-ui datepicker, you see both of them. What's worse its default value format is yyyy-mm-dd (see more on mdn) so if you change format jquery-ui datepicker sets value formatted as in dateFormat property (or based on locales). It starts showing warning (not visible in snippet's console, propably console.warn is only visible in developer tools)
$(document).ready(function() {
$("#dtSelectorStatic").datepicker({dateFormat: "dd-M-yy"});
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input type="date" id="dtSelectorStatic" />
Possible fix: if you remove attribute type="date" or set it to "text" then you get functionality of jquery-ui datepicker (see snippet below).
$(document).ready(function() {
$("#dtSelectorStatic").datepicker({dateFormat: "yy-mm-dd"});
$("#dtSelectorStatic").datepicker("setDate", new Date(2018, 8, 1));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input id="dtSelectorStatic" />
You don't need any jquery or special date library for fixing it. Simple JS will do just fine. The problem is that the browser requires the format yyyy-mm-dd.
And toLocaleString doesn't allow the date to be in this format. So after searching I found out that this is ISO format and we can use Date().toISOString() to get the date in the required format.
I used the slice method to extract the date part only because Date().toISOString() returns date with time.
My code: date: new Date().toISOString().slice(0, 10)
Try this trick
$("#datePicker").datepicker();
var qDate = '2018-08-01';
$('.datepicker').datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", new Date(qDate));
Try this if need any help please comment.
$(document).ready(function () {
$(".datepicker").datepicker();
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<input type="text" class="datepicker" /><br/>
<style>
.ui-datepicker {font-size:60%; }
</style>
Try this
$(document).ready(function() {
$(".datepicker").datepicker({
dateFormat: "yy/mm/dd"
});
$(".datepicker").datepicker("setDate", new Date(2018, 8, 1));
});
Try below jsfiddle.
http://jsfiddle.net/Sampath_Madhuranga/3ow88r6u/291/
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<form method="post">
<p><input type="date" placeholder="" /></p>
</form>
I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...
How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.
UPDATE: Firefox 57+ supports input type=date
You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.
Here is a demo with CDN:
http://jsfiddle.net/trixta/BMEc9/
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" />
In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.
Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.
It is in Firefox since version 51 (January 26, 2017),
but it is not activated by default (yet)
To activate it:
about:config
dom.forms.datetime -> set to true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
There's a simple way to get rid of this restriction by using the datePicker component provided by jQuery.
Include jQuery and jQuery UI libraries
(I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
Use the following snip
$(function() {
$( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'});
});
See jQuery UI DatePicker - Change Date Format if needed.
The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.
http://caniuse.com/#search=date
I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?
Here is a full example with the date formatted in YYYY-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
dFormat: '-',
dateSigns: '-',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />
While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:
pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'
Ultimately I agree with #SuperUberDuper in that Mozilla is way behind on including this natively.
This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).
Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
and your input as:
<input type="text" class="datepicker" name="your-name" />
Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site.
My 2 cents...
The latest version of firefox the firefox 57(Quantum) supports date and other features it was released on November 14, 2017. You can download it by clicking this link
Sometimes you do not want use Datepicker http://jqueryui.com/datepicker/ in your project because:
You do not want use jquery
Conflict of jquery versions in your project
Choice of the year is not convenient. For example you need 120 clicks on the prev button for moving to 10 years ago.
Please see my very simple cross browser code for date input. My code apply only if your browser is not supports the date type input
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr#mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
<h1>Date field</h1>
Date:
<input type='date' id='date' />
New date: <span id="NewDate"></span>
<script>
CreateDateFilter('date', {
formatMessage: 'Please type date %s'
, onblur: function (target) {
if (target.value == target.defaultValue)
return;
document.getElementById('NewDate').innerHTML = target.value;
}
, min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
, max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
, dateLimitMessage: 'Please type date between "%min" and "%max"'
}
);
</script>
</body>
</html>
You can use this datepicker functionality in anywhere just need to call on Master.aspx or Layout page
Include jQuery and jQuery UI libraries (I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
then add this script and this is working on all platforms.
<script>
jQuery(function ($) { // wait until the DOM is ready
$(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
});`
</script>
you can add this "editorDate" on multiple pages.
#Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new {
#class = "form-control editorDate"})
Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');
Here is the proper solution.
You should use jquery datepicker everywhere
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Below is the link to get the complete code
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.
Click here to copy the JQuery datepicker code
I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:
https://bootstrap-datepicker.readthedocs.io/en/latest/
Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.
Usage:
<input class="datepicker">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});
I used Datepicker plugin for getting Calendar in HTML. But my boss ordered me not to t use any jquery plugins for date picker. He is saying that I must use native code only for date picker. It should work without Javascript also.
Is it possible to create native calendar in html ?
I know html5 supports native date picker; but that is not supported by all browsers.
Can i get native date picker as following style..?
"Native" and "without JavaScript" is where this idea will not work on older browsers. You could always create an HTML5 datepicker, and non-supportive browsers will fallback to a plain textbox. You could instruct the user to enter a date in MM/DD/YYYY format, and have this format applied by the datepicker, or by hand if the datepicker is unavailable.
This page offers some advice on the HTML5 datepicker: http://html5tutorial.info/html5-date.php
Edit: Alternatively, you could just create three dropdown menus and have the user select the month, day, and year. (Of course without JS in this case, you couldn't have the number of days in a month change with the user's choice, but you could always validate their input on the server.)
You could instruct the user to enter a date in MM/DD/YYYY format, spryno724
This, a simple html5 placeholder (you can also style css placeholder) would suffice.
<input type='text' placeholder='dd/mm/yyyy' name='form[datetime]' id='datetime' />
why not make the jquery datepicker a fallback?
pseudocode:
if (! input.supports('date'))
$(input).datepicker();
this way, you get a datepicker if your browser does not support the native one. That is exactly what jQuery's original 'unobtrusive' idea was.
Look at this simple Code.
You need to add 2 js files and 1 css file from net.. Don't worry,It is simple
Here it is
<!DOCTYPE html>
<html>
<head>
<title>Date</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
<body>
<input type="text" id="dob" name="date" placeholder="MM/DD/YYYY"/>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
</html>
I have a very annoying problem with jQuery and the datepicker from jQuery-UI.
Here is my javascript code:
<script type="text/javascript">
/*<![CDATA[*/
<!--
$(function(){
$("#startdate").datepicker({dateFormat: 'dd.mm.yyyy'});
});
// -->
/*]]>*/
</script>
And here the HTML part:
<input type="text" name="tx_cal_controller[startdate]" id="startdate" readonly="readonly">
The necessary JavaScript libraries are included in the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://foo.bar/fileadmin/res/jquery-ui-1.8.17.custom.min.js?1328657226" type="text/javascript"></script>
But there is no datepicker when I click on the input field. I would really appreciate it, if anyone could give me a hint.
Thanks in advance.
I solved it. There was a problem with the div of the datepicker. I had to include my own jQuery-UI package and modify it, so that when the input field gets clicked, the z-index of the datepicker gets higher (>1000) than the one of the other content divs and therefore visible.