This sample code is not working:
<button id="idbtn">
$('#idbtn').datetimepicker();
This is my current working solution:
<div id="choose_date_group" data-target-input="nearest">
<input type="hidden" id="choose_date_hidden" class="form-control datetimepicker-input" data-target="#choose_date_group">
<span id="choose_date" data-target="#choose_date_group" class="btn">
<i class="fa fa-calendar"></i>
</span>
</div>
<script>
$("#choose_date_group" ).datetimepicker();
$("#choose_date").click(function(){
$("#choose_date_group").datetimepicker('toggle');
});
</script>
Related
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.
I'm using http://www.malot.fr/bootstrap-datetimepicker/ and I have this snippet:
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
Please notice that the input[type=text] and the input[type=hidden] fields have the same id, but the latter with a _mirror suffix
Since I have a couple of datepickers in a page (i.e. also endDateTime and endDateTime_mirror), I can't use a 'fixed' mirror field id as in datetimepicker's demo page
EDIT: an example of two datetimepickers
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
I tried this, but it doesn't work (even if the 'generated' name is right, startDateTime_mirror (I can see it in console.log()):
$(".form_datetime").datetimepicker({
autoclose: true,
format: "dd MM yyyy hh:ii",
linkField: ($(this).find('.form-control').prop('id')) + '_mirror',
linkFormat: "yyyy-mm-dd hh:ii"
})
Any help, please? Thanks
Why don't you try to put each couple of datepicker in a separate div that you would describe with an id:
<div class="input-group date form_datetime" id="startBlock">
<input type="text" class="form-control" name="startDateTime" id="startDateTime">
<input type="hidden" id="startDateTime_mirror" name="startDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date form_datetime" id="endBlock">
<input type="text" class="form-control" name="endDateTime" id="endDateTime">
<input type="hidden" id="endDateTime_mirror" name="endDateTime_mirror">
<span class="input-group-btn">
<button class="btn btn-default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<script type="text/javascript">
$("#startBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "startDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
$("#endBlock").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "endDateTime_mirror",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>
I'm trying to select the input element but it doesn't seem to work.
HTML:
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
jQuery:
$("#c1").find("input");
I'm trying to select this:
<input type="text" readonly class="form-control"/>
It works fine for me :
When I use this HTML...
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" readonly class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">GPS</button>
</span>
</div>
</section>
... and this JS...
var $InputElement = $("#c1").find("input");
console.log($InputElement);
... the console returns precisely the input element you're looking for.
Well, actually, it returns a jQuery object that contains the element you're looking for.
If you want the DOM element itself instead of a jQuery object, just do this :
var InputElement = $("#c1").find("input")[0];
console.log(InputElement);
You can try it yourself in this Fiddle.
I need an alert to pop up when the value of the input is changed by jQuery.
Currently it only pops an alert dialog when I type into the textbox but not when I press CLICK.
$("#c1").on('input', function() {
alert("value changed");
});
$("#c1").find("button").click(function() {
$("#c1").find('input').val("hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">CLICK</button>
</span>
</div>
</section>
Add .trigger('input') to your button click handler:
$("#c1").find("button").click(function(){
$("#c1").find('input').val("hello").trigger('input');
});
jsFiddle example
$("#c1").on('input', function() {
alert("value changed");
});
$("#c1").find("button").click(function(){
$("#c1").find('input').val("hello").trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">CLICK</button>
</span>
</div>
</section>
If I'm understanding right try this:
$("input.form-control").keyup(function(){
$(this).trigger('change');
});
$("input.form-control").change(function() {
alert("value changed");
});
Or you can shorten a little to this:
$("input.form-control").keyup(function(){
$(this).trigger('change');
}).change(function() {
alert("value changed.\r\nNew Value: "+$(this).val());
});
JSFiddle is here
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click"
data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</button>
<div id="popover-content" class="hide">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Start Date time of event"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="End Date time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>
</div>
JS
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
http://jsfiddle.net/J7nDz/43/
Can someone spot the error?
You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error
SyntaxError: unreachable code after return statement
Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
data-content='
<div id="popover-content">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" placeholder="Start Date time of event" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" placeholder="End Date time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>'>Date</button>
</div>
With Callback Function
$(document).ready(function () {
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$("#PopS").popover({
html: true,
showCallback: function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
}
});
});
Fiddle with callback function
With popover event listener
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
Fiddle with event listener