bootstrap datepicker not working in textarea
Question
i am trying to implement bootstrap date and time picker in my web app using this http://tarruda.github.io/bootstrap-datetimepicker/ .I have a textArea which accepts only 160 charcters. I am using this way
<div id="datetimepicker" class="input-append date">
<!-- <input type="password"></input>-->
<textarea name="hi" ></textarea>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Even if you select some date and time then its not reflected in the textarea though it works if the input type is text.Please tell me what to modify. this is the js
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'eng'
});
</script>
3 answers
solution1
1 2013-10-24 10:08:57
Something i just made.Both autocomplete and datepicker
<html lang="en">
<head>
<title></title>
<style>
#datepicker {
display: inline-block;
width: 35px;
height: 34px;
position: relative;
left: -5px;
top: -189px;
background:url("date.png") no-repeat scroll right center transparent;
}
</style>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
$("#datepicker").datepicker({ altField: '#dtext',onSelect: function() { $("#datepicker").val(""); $("#dtext").change(); }
});
$('#dtext').change(function(){
$(".darea").val($( ".darea" ).val()+$( "#dtext" ).val());
});
});
</script>
</head>
<body>
<div class="ui-widget">
<textarea rows="9" cols="50" class="darea" id="tags"></textarea>
<input id="datepicker"></input>
<input type="text" id="dtext" style="display:none"/>
</div>
</body>
</html>
solution2
0 2013-10-24 10:05:15
I don't think it supports text areas. You need a text input like this:
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
solution3
0 2013-10-24 10:16:58
datepicker just isn't supported with a element, specifically it's supported span/div/input
go on this link : why jquery datepicker doesn't work on textarea but only on input
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.