gillardo / bootstrap-ui-datetime-picker Goto Github PK
View Code? Open in Web Editor NEWAngularJs directive to allow use of the bootstrap UI date/time pickers in a single dropdown
License: MIT License
AngularJs directive to allow use of the bootstrap UI date/time pickers in a single dropdown
License: MIT License
Great directive, thank you so much.
I'm just using the datetime format from the demo sample in the html code:
datetime-picker="MM/dd/yyyy HH:mm"
Is there any way to display meridians in the above formatter?
I also tried adding a timepicker-options attribute and specifying the showMeridian property in the controller:
$scope.timeOpts = {showMeridian: true}
Meridians still aren't displaying (AM, PM). Any suggestions? Thanks in advance.
Setting a format such as "MM/dd/yyyy hh:mm a Z" will result in the input field displaying the text "Invalid Date" upon changing the time.
When using the options attr nothing happend.
I change this lines and it worked, the last .children[0] should be removed:
var r = angular.element(q.children()[0].children[0].children[0]);
var s = angular.element(q.children()[1].children[0].children[0]);
to:
var r = angular.element(q.children()[0].children[0]);
var s = angular.element(q.children()[1].children[0]);
thanks!
I just upgraded to boostrap 3.3.4 and the datetime pickers are not showing. Could you please look into that? Thanks.
The button groups for Today/Clear (or Now/Close) and Date/Close are not aligned in Firefox.
Screenshot here: http://i.imgur.com/FCYWaOv.png
Hello,
when i load datetime-picker, i got 700 watchers !!!!
Please use angularjs bind once or thank you optimize it in another way !
angularjs known performance losses from 1000 watchers ...
If I have two timepickers, and I click both timepicker icons, both remains open. I do not have any option to close the other one if I click outside.
This issue starts to appear in versions 1.0.11 and 1.0.12. Version 1.0.10 works fine.
I can't reproduce this in the demo. The demo correctly jumps to time picker after selecting a date in the date picker.
The only difference between my code and the demo is in the ng-model
. My code uses myEvent.date
instead of myDate3
.
With the 1.1.6 release the datepicker opens on the current month, not the month surrounding the model date. Here is a fork of the demo plunker using 1.1.6 where the behavior can be seen- the first date picker opens to August 2015 instead of March 2015.
as in ui-bootstrap datepicker :
show-weeks (Defaults: true) : Whether to display week numbers.
Could you please consider adding a MIT license to this project?
Bootstrap datetimepicker has a capability to set view mode and also min view mode, see ex. [1]
How can I make it in bootstrap-ui-datetime-picker ?
https://eonasdan.github.io/bootstrap-datetimepicker/#view-mode
Hello.
I implemented the directive on my app with this:
<input type="text"
placeholder="Fecha de publicación"
class="form-control"
datetime-picker="yyyy/MM/dd HH:mm"
is-open="open.date1"
datepicker-options="dateOptions"
enable-time="true"
ng-model="dates.date1"
show-button-bar="true"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event, 'date1')"><i class="fa fa-calendar"></i></button>
</span>
And in the controller:
//Datepickers
$scope.dates = {
date1: new Date()
};
$scope.open = {
date1: false
};
$scope.dateOptions = {
showWeeks: false,
startingDay: 1
};
$scope.openCalendar = function(e, date) {
$scope.open[date] = true;
};
When I submit the form I console.log(dates.date1) of datepicker it returns me undefined if the datetime-picker="yyyy/MM/dd HH:mm" but if is datetime-picker="mediumDate" return the ng-model well. Any suggestions please?
This is a common use case that should be easy to implement.
This should disable previous month/year arrow as well as previous days buttons.
Also should disable or at least not pass validation for past time.
In the demo, when I select a date, the dialog closes. When I open the the datetime picker again, the current date is selected instead of the date shown in the text box. It looks like a bug.
Ui bootstrap needs a uib prefix in front of everything.
PR: #62
If I have a format like 'yyyy/MM/dd HH:mm' and the input date is '2015/10/21'. The date will be validated but the date parsing will fail
The following chunk makes sure that the scope value is always set:
// default text
scope.todayText = scope.todayText || 'Today';
scope.nowText = scope.nowText || 'Now';
scope.clearText = scope.clearText || 'Clear';
scope.closeText = scope.closeText || 'Close';
scope.dateText = scope.dateText || 'Date';
scope.timeText = scope.timeText || 'Time';
Afterwards, the getText()
function never fall back to the global config, i.e. scope[key + 'Text']
is always set:
scope.getText = function (key) {
return scope[key + 'Text'] || uiDatetimePickerConfig[key + 'Text'];
};
Thoughts?
<input type="text" class="form-control"
datetime-picker="yyyy년 MM월 dd일 HH시 mm분"
datepicker-options="datePickerOptions"
timepicker-options="timePickerOptions"
ng-model="episode.air_date"
is-open="isOpenedDatePicker"
ng-change="checkAirDate()" />
It's works well in input form date and time as 'KST'.
But when I print them {{ model_name }} in markup, the time values setted as 'UTC'.
The Plunker demo has same problem.
Do I have to change timezone?
Shouldn't clicking "Clear" clear the model and close the pop-up?
As mentioned in title, see this plunker: http://plnkr.co/edit/0fDwe2HuPpFepwdNcaNz?p=preview
I've set the initial date to 1 day before today. If you click 'now', then modify the time, you'll notice the time changes are correct but the date reverts to the original.
Hi! After open timepicker an error:
Timepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
AngularJS v1.4.2
How to fix it?
Thank you
'max-date' & 'min-date' are working for the date picker, but for the time picker, the 'min' & 'max' attrs on the DOM are not working. For example,
<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm"
ng-model="ctrl.dates.date3" is-open="ctrl.open.date3" maxTime="today"/>
The parseDate
function should fall back to the native date parsing function (similar to Angular's datepicker):
var date = dateParser.parse(viewValue, dateFormat) || new Date(viewValue);
Taken from: https://github.com/angular-ui/bootstrap/blob/master/src/datepicker/datepicker.js#L591
The reason is that dateFormat
can also contain descriptive formats ("short"
, "mediumDate"
, etc.) which are not handled well by the dateParser
.
@ravishivt not sure if this directive will help. it is the datetime picker i created for angular
is there any way to make the model update only after the user press the done button?
In addition the model should revert to orig value (if there was any) if the popup is closed(canceled) in any other way.
I just went to the link from the README (http://plnkr.co/edit/S8UqwvXNGmDcPXV7a0N3?p=preview) and when I click on the date inputs they all seem to not bring up a datepicker. Am I missing something? Thanks, excited to try this out.
I tried it on a recent chrome and firefox on OS X 10.10; neither worked
Hi,
when you select date and time and you press clear button in time selection, nothing happens and this error appears:
TypeError: Cannot read property 'getHours' of null
at Scope.link.d.dateSelection (http://localhost:3000/scripts/libs/bootstrap-ui-datetime-picker/datetime-picker.min.js:4:2999)
at Scope.link.d.select (http://localhost:3000/scripts/libs/bootstrap-ui-datetime-picker/datetime-picker.min.js:4:4371)
at $parseFunctionCall (http://localhost:3000/scripts/libs/angular/angular.js:12332:18)
at ngEventDirectives.(anonymous function).compile.element.on.callback (http://localhost:3000/scripts/libs/angular/angular.js:22949:17)
at Scope.$get.Scope.$eval (http://localhost:3000/scripts/libs/angular/angular.js:14383:28)
at Scope.$get.Scope.$apply (http://localhost:3000/scripts/libs/angular/angular.js:14482:23)
at HTMLButtonElement. (http://localhost:3000/scripts/libs/angular/angular.js:22954:23)
at HTMLButtonElement.jQuery.event.dispatch (http://localhost:3000/scripts/libs/jquery/jquery.js:4409:9)
at HTMLButtonElement.jQuery.event.add.elemData.handle (http://localhost:3000/scripts/libs/jquery/jquery.js:4095:28)
I have two datetime pickers on the same page for the start and end time of an event. What I want to do is to set the end time automatically to, say 3 hours, after the start time when the start time datetime picker is closed.
The approach I have in mind now is to add a callback upon closing the datetime picker. Is it the right approach? If so, please add a callback for closing the picker. Otherwise please suggest alternatives. Thanks.
Widget's HTML is wrapped into a <ul class="dropdown-menu dropdown-menu-left" ...>
element.
It would be nice to have a custom class here (e.g. datetime-picker-dropdown
). This way it will be possible to force pop-up's min-width
through CSS, because buttons wrap when in the timepicker view (when button labels are longer than expected).
When i am trying to bind it is adding + 5:30 minitues utc time but with out utc time i have to display the same date time that is in the json . how to do this..?
I am using ui-bootstrap 0.13.0 (I also tried with 0.13.3) but I could not alter the date format for uiDatetimePickerConfig . I resorted to directly modifying the datepicker-picker code to change the default.. and it still does not alter the format in the picker.
Hello,
I have a problem with this control when validating. When the bound date is null, the first time I submit my form I get the control styled as if it was wrong. See this plunkr: http://plnkr.co/nx65o9
If I change the two undefined
in the parseDate
function to null it seems to work ok, but I don't know if this would cause other problem down the way.
The raw angular-ui datepicker has a watch on a few attrs, in particular for what I'm interested in on min-date and max-date. In this package these don't seem to have a watch; could this be added and passed through to the angular-ui watch?
I can't get this to work in Chrome, not even the listed plunker demo. Nothing happens when clicking the button that is supposed to open the date/time picker. The demo DOES work in IE and Firefox, so presumably some sort of workaround is needed in Chrome? The regular bootstrap datepicker works in Chrome as far as I've tested. I'm using Chrome Version 40.0.2214.111 m in Windows 8.1.
Im having issues using the datetime picker in a modal window ...
After opening the modal on formfield click the picker opens as usual.
Once closed a click on the formfield does not open the picker again ...
Pressing key down with the keyboard cursors opens the picker.
Do you have any hint whats the issue here ?
regards
Hi,
If there is change in time, it changes the date part also, even if the enable-date="false".
Currently datetimepicker does not work with ng-if(as datepicker at 0.13.0), but there was some fixes at this 0.13.1 commit
angular-ui/bootstrap@b72efed
(also there was some more commits for datepicker.js file since 0.13.0 https://github.com/angular-ui/bootstrap/commits/master/src/datepicker/datepicker.js)
It's important fix due to 150+ watchers by every datetime picker on page. Hope you will have time to grab it here :)
I disabled timepicker, but i would like to set some default time when i select date.
I tried with timepicker-options="{defaultTime:'01:00:00'}" but it's not working
Hi,
I have a little question. Is it possible to tweak some CSS to position the date picker over the formfield as alternative to the "dropdown" behavior.
Thx in advance
Attempts to set these values result in a parser error and the date picker failing to render.
Fork of the demo demonstrates the issue:
http://plnkr.co/edit/494sC7dJL3SFQ2lnMbVl?p=preview
I'm using version 1.2.3 of this tool and 0.13.4 of angular ui.
To replicate this error, just erase the hours or minutes when prompted to pick a time.
Angular error is: Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.0/$rootScope/inprog?p0=%24apply
Please publish the package to npm, right now we're using the direct github url which is far from ideal. Thanks!
As a usability enhancement, I would like to have a option (similar to closeOnDateSelection) so that we can switch to timepicker automatically upon selecting a date in the datepicker.
Hi,
I have a problem with feature readonlyInput in
$scope.timeOptions = {
readonlyInput: true,
showMeridian: false
};
I dont have edit timepicker, I have change readonlyInput to false
Right now Bootstrap 4 is still in alpha but it's worth noting some of the changes that will affect this project.
2 of the changes I've run into so far:
Example of how the datetimepicker looks with Bootstrap 4 Alpha (affected by both items listed):
When I try to put a version number in my bower.json:
"bootstrap-ui-datetime-picker": "~1.0.7",
I got the following error doing bower update bootstrap-ui-datetime-picker
bower bootstrap-ui-datetime-picker#~1.0.7 not-cached git://github.com/gillardo/bootstrap-ui-datetime-picker.git#~1.0.7
bower bootstrap-ui-datetime-picker#~1.0.7 resolve git://github.com/gillardo/bootstrap-ui-datetime-picker.git#~1.0.7
bower bootstrap-ui-datetime-picker#~1.0.7 ENORESTARGET No tag found that was able to satisfy ~1.0.7
Additional error details:
No versions found in git://github.com/gillardo/bootstrap-ui-datetime-picker.git
Could you please address that? Thanks @Gillardo.
In the date picker when today is in the disabled list, clicking on today is able to select today. This is incorrect behaviour.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.