gillardo / bootstrap-ui-datetime-picker Goto Github PK

<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?

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,

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 ...

Shouldn't clicking "Clear" clear the model and close the pop-up?

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.

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 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

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!

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

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?

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?

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.

as in ui-bootstrap datepicker :

show-weeks (Defaults: true) : Whether to display week numbers.

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

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'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

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.

Could you please consider adding a MIT license to this project?

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

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.

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.

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

In the date picker when today is in the disabled list, clicking on today is able to select today. This is incorrect behaviour.

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

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

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

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.

Ui bootstrap needs a uib prefix in front of everything.
PR: #62

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).

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

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.

@ravishivt not sure if this directive will help. it is the datetime picker i created for angular

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 :)

'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"/>

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.

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.

Hi,
If there is change in time, it changes the date part also, even if the enable-date="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:

• Glyphicons are no longer included with Bootstrap (documented)
• .btn-default has been dropped, replaced with .btn-secondary (?, undocumented)

Example of how the datetimepicker looks with Bootstrap 4 Alpha (affected by both items listed):

Please publish the package to npm, right now we're using the direct github url which is far from ideal. Thanks!

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.

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.

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

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.

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?

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.

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.

I just upgraded to boostrap 3.3.4 and the datetime pickers are not showing. Could you please look into that? Thanks.

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.