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.
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 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!)
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 am using AngularJS 1.2.12 and angular-strap 2.0.0-rc.2 (mgcrea.github.io/angular-strap/) and I can't find a way to open the datepicker/timepicker widget from within the controller. I want to use an input-group with a calendar-icon-button like this:
<div class="input-group">
<input class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
I now could easily provide an ng-click function for the button and open the calendar from my controller. I just can't find a way how to do this. Any ideas?
Another solution is to change the button to a label, and use the 'for' attribute. I like it because it eliminates extra javascript to open the datepicker, and also when tabbing the cursor won't stop on the icon anymore.
<div class="input-group">
<input id="createdDate" name="createdDate" class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
<span class="input-group-btn">
<label class="btn btn-default" for="createdDate">
<i class="glyphicon glyphicon-calendar"></i></label>
</span>
</div>
The documentation talks about opening the datepicker programmatically, but it doesn't give an easy way to get a reference to a datepicker that's already bound to an element.
In a project I'm working on I have a datepicker directive that wraps almost exactly the HTML you have into a myDatepicker directive. Inside that directive the ng-click method bound to the <button> element is essentially:
scope.openDatepicker = function() {
element.children('input').focus();
}
which worked well enough for me.
Since angular-strap has been rewritten to get rid of any bootstrap.js dependencies a lot of bugs and oddities have been introduced. I'm working on upgrading my project's codebase to the newer version of angular-strap, and I feel like going with UI Bootstrap would have been a better choice, since its codebase is a bit more mature.
I've started to learn angularjs not that much time ago. And I'm about to write some form application. The thing is that when I'm trying to output default value from select and some datepicker (got it from twitter bootstrap) into the table, it doesn't appear when page is loaded. Also, when I change date on datepicker it still doesn't appear in the table but if I change select options it appears. So how can I fix it? I need to output datepicker value when I change it + output default values when page is loaded.
Here's Datetimepicker
<label> <b> * Date and Time of Incident: </b> </label>
<div id="datetimepicker" class="input-append date">
<input type="datetime" ng-model="date" name="date" required></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Here's random input:
<label> <b> * Reported By: </b> </label> <input type="text" name="report" ng- model="report" required / >
When I use: {{report}} - it shows what I've been entered, but if I use {{date}} it doesn't show anything, only If I write something manually, but I want disable this field for users so he can only choose dates\time.
You may want to check out this: https://github.com/angular-ui/ui-date. It's datepicker written as angular directive. You can find plenty of useful angular utils, modules and directives here: http://angular-ui.github.io/.
Ok. I think the problem is that Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply(function() { $()... }); But you need a controller for that.
Here are an example
Or you can use the "oficial" calendar for angular:
https://github.com/angular-ui/ui-calendar
Cheers!