I use bootstrap-datepicker and want to have a second addon with a checkbox.
I don't want trigger the show of datepicker when i click in the checkbox addon.
I tested the stopPropagation, return false on the onclick event of the second addon but it doesn't work :(
<div class="container">
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<span class="input-group-addon test"><input type="checkbox"/></span>
</div>
</div>
</div>
with this javascript :
$(document).ready(function() {
$('#ARDT').datepicker();
$('.date .test').click(function(e){
e.stopPropagation();
});
});
you can view live on this jsfiddle : http://jsfiddle.net/5a5xzz10/4/
Can you help me ?
Thanks
Whiletrue
EDIT : Found a solution :
<div class ="form-group">
<label class="control-label" >Received Date OK</label>
<div class="input-group">
<div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<span class="input-group-addon"><input type="checkbox"/></span>
</div>
</div>
embbed the input-group for the datepicker inside another and put the second input-group-addon just after
like here : http://jsfiddle.net/5a5xzz10/6
I have an answer but it doesn't seems very elegant.
I added the checkbox after started the datepicker generation.
$(document).ready(function() {
$('#ARDT').datepicker();
$("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>'));
});
Related
How can I add an icon of font awesome to the end of my input element?
<input id="someId" type="text" class="some-class" data-bind="textInput: myVariable">
Is it possible to keep the icon also when there is text inside?
I am using knockoutJS. Thanks guys!
here is a sample code :
<div class="input-container">
<input class="input-field" type="text" placeholder="Username" name="usrnm">
<i class="fa fa-user icon"></i>
</div>
And a working jsfiddle link : http://jsfiddle.net/newzy08/aq9Laaew/77753/
You can try using Bootstrap or any other CSS library like Semantic UI, Materialise etc.
In Bootstrap, this can look like this:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-at"></i> <!-- Use of font awesome icon -->
</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
</form>
To add icon at the end of input field:
<form class="form-inline">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-at"></i>
</div>
</div>
</div>
</form>
See an example at Codepen
i just want make some added text next to my input.
im using code igniter, here is my view code.
<div class="form-group" >
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<span ><input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" value="<?=#$registration->tinggi_badan?>" > cm</span>
</div>
</div>
the top code result "cm" is below the input text.
it will be good if just using additional inline code.
the result i want is like this |---input text---|cm
Try using input-addon with input-group
<div class="form-group">
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<div class="input-group">
<input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" placeHolder="input text" ><span class="input-group-addon"> cm</span>
</div>
</div>
</div>
DEMO: https://jsfiddle.net/michaelyuen/crvzn2Lq/
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
The Problem I am facing is that, once I open the widget and select it, it is not closing but if I click on the body it will close.
I work around by subscribe event 'dp.change' to close it:
$('#datetimepicker1').datetimepicker()
.on('dp.change', function(){
$('#datetimepicker1').data("DateTimePicker").hide();
});
$('#datetimepicker2').datetimepicker()
.on('dp.change', function(){
$('#datetimepicker2').data("DateTimePicker").hide();
$('#datetimepicker2').blur(); // blur its focus
});
Refer: https://jsfiddle.net/hungndv/0Ltv25o8/1439/
I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual
I've implemented this datetimepicker for Bootstrap: http://www.malot.fr/bootstrap-datetimepicker/
It works fine on my PC, but when I open it from a phone browser, the picker doesn't show up under the field. I have to scroll all the way to the bottom of the page to see it.
Also, the input field is not disabled. Tapping on it brings up the keyboard, and it's possible to enter text manually (I don't want that to be possible). I guess I can disable it in code, but in the examples it looks like it should be disabled by default?
I'll post more code soon, but if anyone already know what may be the problem let me know. Thanks :)
<div class="form-group">
<label for="startpicker" class="col-sm-1 control-label">Start:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="start" class="form-control datepicker" id="startpicker"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label for="sluttpicker" class="col-sm-1 control-label">Slutt:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="slutt" class="form-control datepicker" id="sluttpicker" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: "dd.mm kl.hh:ii",
autoclose: "true",
todayBtn: "true",
minuteStep: 15,
pickerPosition: "bottom-left"
}
);
$('.selectpicker').selectpicker({
style: "btn-primary"
});
});
</script>
Perhaps, you should try substituting class col-sm-3 with class col-xs-3 on the div inside <div class="form-group">
I know this is quite late but a good option would be to use data-date-container="#datepicker-container" and then create a empty div with an id to match the name of the data-date-container so in this case its id will be datepicker-container