Click here to Skip to main content
15,845,830 members
Please Sign up or sign in to vote.
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
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?

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
 
Share this answer
 
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.
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
 
Share this answer
 
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
Hi this is the 3rd solution. Please check this.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900