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>
Related
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>
I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
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 want end date should not be greater then start date. Eg: start date is 24/4/2017 and end date is 23/4/2017 in such scenario it should not allow to search it should be disable the calendar date 23/4/2017. Only End date 24/4/2017 onwards it should be enable
//this are the code in controller
$scope.formats = ['dd/MM/yyyy', 'dd-mm-yyyy', 'yyyy/mm/dd', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.dateOptions = {
datepickerMode: "'year'",
startingDay: 1
};
$scope.max_date = new Date();
//HTML code
<div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
From<input type="text" class="form-control" name="dob" uib- datepicker-popup="{{format}}" ng-model="ordersearch.startDateFrom"
is-open="opened" ng-click="open()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" required/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-6" style="padding-left: 5px;">
<p class="input-group margin_zero calGroup">
To<input type="text" class="form-control" name="dob" uib-datepicker-popup="{{format}}" ng-model="ordersearch.startDateTo" is-open="opened1" ng-click="open1()" datepicker-options="dateOptions" close-text="Close" max-date="{{max_date}}" min-date="{{min_date}}"/>
<span class="input-group-btn newCalIcon">
<button type="button" class="btn btn-default calendarIcon" ng-click="open1()" >
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
This is the code. I need to validate end date
You should make use of max-date and min-date directive provided by bootstrap datepicker.
<input type="text" readonly="" uib-datepicker-popup="dd-MM-yyyy" min-date="minEndDate" max-date="maxEndDate" ng-model=""placeholder="DD-MM-YYYY"></input>
You can bind any dates from your $scope to these fields and the calendar automatically restricts the date after and before them respectively. For ex:
$scope.minDate = new Date(); //this restrict any older date from today
$scope.maxDate = new Date ( someFutureDateObject);
EDIT: If you are not concerned about max-date you can just skip it. Its not mandatory to have a max-date.
Hope this helps
I'm not able to bind time which I'm setting in the controller like this
$scope.info.startTime="12:10:03";
This is my time picker control in HTML
<span class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" tabindex="5"
ng-model="info.startTime" placeholder="hh:mm"
is-open="datepickerOpened1"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="openStartTime($event, 'time')">
<i class="glyphicon glyphicon-time"></i>
</button>
<div dropdown is-open="timepickerOpened1">
<span class="dropdown-menu" role="menu">
<timepicker ng-model="info.startTime" show-meridian="true"></timepicker>
</span>
</div>
</span>
</span>
Reference:Angular Bootstrap
You need to set date object in ng-model instead of string.
Change
$scope.info.startTime="12:10:03";
To
var d = new Date();
d.setHours(12);
d.setMinutes(10);
$scope.info.startTime=d;