Input Type Date is not working properly.

Question

3.00/5 (1 vote)

See more:

I am using input type date in one of my html5 form.

When i click on that it opens datepicker window and if i select date then it should select the date and close that datepicker window. But it not closing that window.

Please help me out.

Posted 2-Feb-14 20:19pm

dharmegh

Add a Solution

Comments

Member 10434230 3-Feb-14 2:22am

which browser you are using? Please do mention the version.

dharmegh 3-Feb-14 2:26am

google chrome -
32.0.1700.102 m

Member 10434230 3-Feb-14 2:33am

Thanks for replying, with this version of Chrome it must work.
Can you quickly create a jsfiddle and share the link?

dharmegh 3-Feb-14 2:46am

Check the code :

<input type="date" id="birthDate" name="birthDate" value="Birth Date" />

♥…ЯҠ…♥ 3-Feb-14 2:54am

I think I can repro your issue, date picker is not hiding even after selecting date, need to click some other place to make it hide.am right?

♥…ЯҠ…♥ 3-Feb-14 3:59am

just refer my solution

3 solutions

Solution 3

Hi this is the 3rd solution. Please check this.

Posted 6-Feb-14 3:15am

dharmegh

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Fredrik Bornander · Accepted Answer · 2014-02-02T21:08:00

Solution 1

The spec for the date input type does not go into enough detail to dictate that sort of behavior so it's likely to be different across different browsers.

The JQuery datepicker does what you want and is consistent across browsers, maybe you can use that instead.

http://jqueryui.com/datepicker/[^]

Hope this helps,
Fredrik

Posted 2-Feb-14 21:08pm

Fredrik Bornander

Comments

dharmegh 3-Feb-14 3:13am

its working fine but i have one requirement in that..... if i want to select birth date then i have to go back many times .... if year is also there then it would be easy to select birth date

Fredrik Bornander 3-Feb-14 3:29am

The JQuery datepicker is capable of that as well; http://jqueryui.com/datepicker/#dropdown-month-year
Just read the documentation for the full info on what the control can do.

dharmegh 3-Feb-14 5:02am

yes it is working .... but let me check this type='date' ... if that does not work fine then i will use your idea .... thanks dear ... and if you have any solutions for type='date. then pls help me out.

♥…ЯҠ…♥ · Accepted Answer · 2014-02-02T21:34:00

Solution 2

Hi,

Here is the code snippet you can make use of

<input type="date" id="birthDate" name="birthDate" value="Birth Date" />

C#

<script type="text/javascript">
var dt = document.getElementById('birthDate');
if (dt) dt.onchange = function () {
   dt.setAttribute('type', 'text');
   dt.setAttribute('type', 'date');
}
</script>

Its Just a trick,so do not fully rely on it because it might not escape from Code review I think

But I would always prefer to use Jquery for it.

JavaScript

$(document).ready(function (){	
    $('#birthDate').datepicker({clickInput:true});
});

You can find some reference from here - Jquery DatePicker [^]
My solution in JSFiddle[^]

Updated solution:

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(window).load(function(){
var dt= document.getElementById('birthDate');
if (dt) {
dt.onchange = function () {
   dt.setAttribute('type', 'text');
   dt.setAttribute('type', 'date');
}
}
});
</script>
</head>
<body>
<input type="date" name="birthDate" value="Select date" id= "birthDate"/>
</body>
</html>

Hope this helps you a bit.

Regards,
RK

Posted 2-Feb-14 21:34pm

♥…ЯҠ…♥

Updated 4-Feb-14 20:08pm

v10

Comments

dharmegh 3-Feb-14 4:50am

this is still not working .... i tried both code ... it is not closing ....

u also check below code ... :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var dt = document.getElementById('birthDate');
if (dt) dt.onchange = function () {
dt.setAttribute('type', 'text');
dt.setAttribute('type', 'date');
}
</script>
</head>
<body>
<input type="date" id="birthDate" name="birthDate" value="Birth Date" />

</body>
</html>

♥…ЯҠ…♥ 3-Feb-14 6:12am

what doesnt work for you?

dharmegh 3-Feb-14 6:30am

it is still not closing datepicker while selecting date

♥…ЯҠ…♥ 3-Feb-14 6:57am

you forgot to mention script type, add script type text/javascript and try it.

dharmegh 3-Feb-14 8:40am

that also i have tried .... but still not working

dharmegh 3-Feb-14 8:40am

check my code :

<script type="text/javascript">

$(document).ready(function () {
$('#birthDate').datepicker({ clickInput: true });
});

</script>

<input type="date" id="birthDate" name="birthDate" value="Birth Date" />

♥…ЯҠ…♥ 3-Feb-14 9:07am

added jsfiddle link, try it there and integrate to your application

dharmegh 4-Feb-14 0:54am

its working on fiddle but it is bit complicated in integration and complicated to decide what code to take for work out .... so will try some other option. If you can create one html file for this then it will be helpful.

♥…ЯҠ…♥ 5-Feb-14 2:09am

added HTML file as per your request, save it as html file and try it in your browser. It will work now for you because it worked for me in Google Chrome

dharmegh 5-Feb-14 6:34am

thanks .... its working properly ....

dharmegh 6-Feb-14 6:57am

thanks