I have been trying out the eternicode/bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker). I tried out the sandbox (http://eternicode.github.io/bootstrap-datepicker/) and just wanted to use the "Component" version with "Today" highlighted.
I have two problems which I think are the same thing: 1) the date doesn't show up when you click on the glyphicon only when you click in the input space and 2) I cannot get the "Today" highight working.
I am 99% sure it is the jQuery call that is wrong. I have tried all sorts to get it to fire as per Sandbox etc but my JS/jQuery is just not up to the job.
(The timepicker (https://github.com/jdewit/bootstrap-timepicker) works fine without a jQuery launch script for now).
Part of the problem is that when I download a zip from GitHub there are two .less files both of which (I think) are Bootstrap2.
Any help gratefully recieved.
<div class="form-group col-sm-3 colFlushL">
<label class="control-label" for="zaq-timeSimple">Time</label>
<div class="input-group bootstrap-timepicker timepicker colFlush ">
<input id="timepicker1" type="text" name="arse"
class="form-control">
<span class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
</div>
<div class="form-group col-sm-3 colFlush" id="zaq-startDate">
<label class="control-label" for="zaq-startDate">Start Date</label>
<div class="input-group colFlush">
<input type="text" class="form-control date" name="datepicker"
data-provide="datepicker">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
Here is the latest version of my jQuery attempt which is I am 95% sure horrendous.
<script>
$('.datepicker.date').datepicker.(
{
todayHighlight: true
}
)
</script>
NB According to phpStorm date is NOT a class defined anywhere which I presume includes the .less file
PS I should have said the two date pickers on the page ARE 100% passing the value of the dates through with the form.
OK this was a typo (or more accurately newb lack of jQuery understanding!!)
$('.datepicker.date').datepicker.(
should have been
$('.datepicker.date').datepicker(
IE I stuck in an extra period. (And that cost me at least two hours! D'oh!)
Related
I cannot understand why bootstrap color picker is not working. My code is the same as from the example I have used:
https:// itsjavi.com/bootstrap-colorpicker/
In the bundle config of my MVC app I have added
"~/Scripts/bootstrap-colorpicker.js",
"~/Scripts/bootstrap-colorpicker.min.js",
"~/css/bootstrap-colorpicker.css",
"~/css/bootstrap-colorpicker.min.css",
The code in the main.aspx
<div class="col-sm-9">
<div class="input-group demo2">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
And the code in the JS file
$(function () {
$('.demo2').colorpicker();
});
See what hapens
My app screenshot
How it should be screenshot
What I'm doing wrong ?
I had the same issue when using bootstrap-colorpicker#2.5.3
I upgraded to bootstrap-colorpicker#3.2.0 and it fixed the issue
Hope it helped...
The call to initialise the colorpicker should be against the input that it is intended to be use on... i.e. I believe your Main.aspx example is incorrect.
<div class="col-sm-9">
<div class="input-group">
<input type="text" value="#00AABB" class="form-control demo2" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
Notice that the class for .demo2 has been moved to the input for which the picker is intended to manipulate the value of the input box as you use it's controls for picking a color.
I have this piece of aspx code:
<div class="col-xs-2">
<label for="txtDateActioned" style="cursor: pointer;">Date Actioned</label>
<div id="sandbox-container">
<div class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
From my understanding (and I'm not a web developer, just struggling with maintenance) this is a bootstrap datetime picker.
My humble wish is to set the 'end date' (or 'max date') to 'Today', or any other date. I tried doing this using JS (in the $(document).ready(function()...) section):
$('#txtDateActioned').daterangepicker(
{
maxDate: "01-09-2016"
}
);
However, I can't find a way to make it work. The user can still select a future date, which is exactly what I want to prevent. I also tried different date format such as '2016-09-01', and also tried '$('#txtDateActioned').datetimepicker()'. However, nothing worked for me.
Any help is most appreciated.
Elad
You can try endDate instead of maxDate
like:- endDate:'+0d'
the example could be
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
startDate: '-30y',
endDate:'+0d',
});
here the y in startDate: '-30y' is indicating the start year of the calender and d in endDate:'+0d' is indicating the last date of the calender which is the current date.
you can try this.good luck :)
My solution:
1) I added an id for the div contains the 'input-group date' class.
<div id="dateActionedDP" class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
2) In js code (the $(document).ready(function ()...) I added the following:
$("#dateActionedDP").datepicker("setEndDate", '+0d');
This worked for me. Thanks everybody for helping.
Elad
I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.
EDIT
I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.
This image shows the output
The Bootstrap DatePicker Documentation can be found here
And the code I have in looks like this:
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
Very simple.
Here is an image of the inspector and you can see the postion top value added by the JS.
Any idea on how to bring that sucka down?
Here is a CODEPEN with my problem
You are initializing datepicker over <div class="input-group date" id="datepicker" element not over input element.
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
<!-- _______________^^ Remove class `date` from here -->
<input type="text" class="form-control date">
<!-- ____________________^^ Add class `date`here -->
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
Fiddle here
I'm working on a web app which makes use of UI-Bootstrap's datepicker and timepicker directives. For the datepicker I am using a simple popup dialog, and for the timepicker I simply have the dialog on the page next to the datepicker.
Unfortunately I am having difficulty getting these two directives to work together. When the user selects a date, everything works correctly, but when the timepicker is updated, I'm not sure how to get it to consequently update the datepicker as well.
I considered two options for getting around this, the first one was to have the timepicker simply update the ng-model of the datepicker whenever it is changed, but unfortunately this does not also retroactively change what is displayed on the datepicker, so does not work for me. The second option I thought about was having the directives interact with each other, but unfortunately I am a novice at looking at and editing directives, so would need some help with this solution.
If anyone knows of a way to achieve what I want with the dynamic updates, please give me any advice you can offer.
Here is the HTML of my schedule view from the Plunker, which is attache below:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Schedule</h2>
<!-- DatePickers -->
<div class="col-md-11" style="padding-bottom:20px">
<div class="col-md-6">
<p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
<p class="input-group">
<input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6" style="padding-top:2px">
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>
</div>
</div>
</div>
</div>
Here is a plunker with an example of what I am trying to do. If there is anything further I can provide that would help with answering this question, please let me know!
Unfortunately you can't just update the model so you have to break the reference by reassigning the model with the new value. I forked the plunker above and fixed it in this version.
vm.pickTime = function(dateTimestamp) {
var newDate = new Date(dateTimestamp);
newDate.setHours(vm.time.getHours());
newDate.setMinutes(vm.time.getMinutes());
vm.date = newDate;
};
I also introduced a form element to make things a little more clean.
I found a Plunker that may help you.
http://plnkr.co/edit/QujX5A?p=preview
<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep"
minute-step="minuteStep" ng-model="date" show-meridian="showMeridian"
date-format="dd-MMM-yyyy" date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-date="false"
readonly-time="false"></datetimepicker>
Is this what you were looking for?
Your plunker has typos in it.
You defined vm.pickTime and vm.pickDate in the controller and called vm.timePick and vm.datePick in html.
I fixed them in this plunker.
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.pickTime()" show-meridian="false"></timepicker>
I use a this datePicker : http://eonasdan.github.io/bootstrap-datetimepicker/ with AngularJS, like this :
<div class='col-md-2'>
<div class="form-group">
<label>End date</label>
<div class='input-group date' id='endDate' data-date-format="YYYY-MM-DD">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
In real world the date format is set in $socpe.dateFormat in my controller, but I don't know how to bind a $scope.dateFormat in the attribute data-date-format.
Your problem is that you're trying to combine angularjs with a jquery plugin. You could create a custom directive to wrap it, but why not use something already meant for angular? A couple choices would be angular-ui bootstrap or AngularStrap.
Finally I used angular-ui bootstrap datepicker instead of bootstrap-datepicker, it works very fine with less code.
Thank you #theJoeBiz for your hint.