admin管理员组文章数量:1364629
we tried the code for displaying date using date picker it should display two times in a single page for from and to dates,but it is displaying only for from date and not for to date
<html>
<head>
<link rel='stylesheet' id='admin-css' href='admin.css' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='colors-fresh.css' type='text/css' media='all' />
<link rel="stylesheet" href=".9.1/themes/base/jquery-ui.css" />
<script src=".8.2.js"></script>
<script src=".9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
</head>
<body>
<input type="text" id="datepicker" name='from' size='9' value="" />
<img src='images/calender.PNG' id='icon' height='25px' width='25px'/ >
</body>
</html>
we tried the code for displaying date using date picker it should display two times in a single page for from and to dates,but it is displaying only for from date and not for to date
<html>
<head>
<link rel='stylesheet' id='admin-css' href='admin.css' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css' href='colors-fresh.css' type='text/css' media='all' />
<link rel="stylesheet" href="http://code.jquery./ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.8.2.js"></script>
<script src="http://code.jquery./ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
</head>
<body>
<input type="text" id="datepicker" name='from' size='9' value="" />
<img src='images/calender.PNG' id='icon' height='25px' width='25px'/ >
</body>
</html>
- you need to have to input fields for both fromdate and todate – Arun P Johny Commented Mar 21, 2013 at 10:40
- I can see only 'from' input[=text], you need to have 'to' input[=text] to view the To. – Falaque Commented Mar 21, 2013 at 10:40
- Maybe I'm blind, but there's no "to" input in your example? – Ulrich Schwarz Commented Mar 21, 2013 at 10:40
- There's only one datepicker element in your current code... – Boaz Commented Mar 21, 2013 at 10:40
- maybe he forget adding other input? that what I was thinking ;) – scx Commented Mar 21, 2013 at 10:44
6 Answers
Reset to default 3Why dont you use input type date
<input type="date" id="datepicker" name='from' size='9' value="" />
DEMO
Your body does not contain a second <input> Tag to attach a datepicker to.
So use something like this.
<input type="text" id="datepicker_from" name='from' size='9' value="" /> <img src='images/calender.PNG' id='icon_from' height='25px' width='25px'/ >
<input type="text" id="datepicker_to" name='from' size='9' value="" /> <img src='images/calender.PNG' id='icon_to' height='25px' width='25px'/ >
And in your JS Code:
$( "#datepicker_from" ).datepicker();
$("#icon_from").click(function() { $("#datepicker_from").datepicker( "show" );})
$( "#datepicker_to" ).datepicker();
$("#icon_to").click(function() { $("#datepicker_to").datepicker( "show" );})
One advice: Prevent using IDs over IDs. It's hard to maintain. If you want to achieve the same thing on different DOM Elements, it's better to use class selectors, like @Pathik Gandhi showed in his answer: https://stackoverflow./a/15545224/735226
Some additional notes:
Wrap your own javascript around the DOM ready event to prevent that your js is executing before your DOM finished loading. You can achieve this by the following piece of code:
$(document).ready(function() {
// Place all of your JS code here, like your datepicker initializing.
});
Also load your Javascript right before the end of the <body> tag to improving loading speed:
/* ... */
<script src="http://code.jquery./jquery-1.8.2.js"></script>
<script src="http://code.jquery./ui/1.9.1/jquery-ui.js"></script>
</body>
Those are just some general advice for structured web development.
Just add two input from and to with same class and date picker has inbuilt functionality to show icon.
<script>
$(function()
{
$( ".datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<input type="text" class="datepicker" name='from' size='9' value="" />
<input type="text" class="datepicker" name='to' size='9' value="" />
</body>
</html>
You need to have two input fields if you want two datepickers
<input class="datepicker" type="text" id="fromdate" name='from' size='9' value="" />
<input class="datepicker" type="text" id="todate" name='from' size='9' value="" />
$(function(){
$('.datepicker').datepicker()
})
Demo: Fiddle
I would remend using class instead of id. ID should be unique and if its not then you will find yourself in trouble. Using class give you oportunity to work with many elements having the same class, in case of id it will process correctly for 1 id and will give not wanted results for others not mentioning it may cause other problems. Try this
$(function()
{
$( ".datepicker" ).datepicker();
$(".icon").click(function() { $(".datepicker").datepicker( "show" );})
});
<input type="text" class="datepicker" name='from' size='9' value="" /> <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ >
<input type="text" class="datepicker" name='to' size='9' value="" /> <img src='images/calender.PNG' class='icon' height='25px' width='25px'/ >
Also check html5 date and datetime type example here: http://www.w3schools./html/tryit.asp?filename=tryhtml5_input_type_date
Try like
$(function(){
$( "#from_date,$to_date" ).datepicker();
});
and your html should be
<input type="text" id="from_date">
<input type="text" id="to_date">
that's it
本文标签： phpdate picker code in htmlStack Overflow
版权声明：本文标题：php - date picker code in html - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743776088a2537007.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论