katemihalikova / ion-datetime-picker Goto Github PK

Hi,

I have an issue with the framework, when I run in ionic serve everything is good, but if I run it on phonegap I have the picker who increment my step twice.

Do you have any idea why I have this issue ?

Thanks in adance for your answer

On my Samsung S4 running Android 5.0.1, when I set my system font size to "Large", the calendar view wraps the text for Monday and Wednesday such that the "M" appears on one line and "o" appears on the next.

Could the overall width be increased slightly to avoid this odd result?

Thanks

For some reasons I'm having some difficulties to get text values inside the directive scope. Once I have changed the binding method from bidirectional "=" to one-way text binding "@" it works as expected.

I want to set startTime and add a callBack.How can i do?

I tried
div class="item" ion-datetime-picker title='my title' ng-model='mymodel'
{{myDate | date: 'yyy-MM-dd'}}
/div
and doesn't work for the title and the other atributes.

Everything works fine in browser, but when run it on Android device, I can see the value is changed in chrome://inspect/#devices but not the ui (the input in android device).

Any idea, please?

It seems it always shows the current time when the picker popup, is it possible to assign it with a specific date? Thanks.

In ion-datetime-picker we can validate Date selection but we are not able to set validations for Time selection i.e. the user should not be able to select passed time.

Hi,
I always get this error when I navigate to the page that used this plugin:
Error: [$compile:nonassign] Expression 'undefined' used with directive 'ionDatetimePicker' is non-assignable!

I implement this in my html page:
`

Is there anything I need to change? Thanks.

if this directive run in modal view, can't monitor click event.
it should be in $scope.on('modal.shown', function()
{
$element.on("click", $scope.showPopup);
});

Hi. I'm trying to set a value for hours but when I send that info to my API I always store 2 hours less than I want.

This is the piece of code:
<ion-list> <div class="padding" ion-datetime-picker ng-model="new.date_trip"> Fecha de salida <strong>{{new.date_trip| date: 'd MMM y @ HH:mm' : 'UTC + 2'}}</strong> <span ng-if="!new.date_trip">(click aquí para selecionar)</span> </div> </ion-list>

In the Ionic App it sees ok, but the in the Database is not stored as I want.

Thanks in advance

Hello! First of all, I want to be grateful with all of you for this work and help, it's quite useful for developers.

I'm using ion-datetime-picker and I don't have any problems in Firefox and Chrome, but when I use it IE10, I'm able to open the calendar but the year is not displayed. If I click inside the box the year appears but a little bit cut.

I include a screen capture with the appearance.

Do you know how to fix this error? Thanks a lot!

Hi, I want to show the text value of {{DOB| date: "yyyy-MM-dd"}} in my form after clicking the dates on the calendar, so when I press submit, my controller will be able to get the string format to sent to backend servlets for processing. However the current the value does not show in the UI after selecting the date on the calendar. Any idea how to solve it?

How can i display the value in form to submit?

<<---register.html---->>
<label class="item item-input " id="register-input19"> <span class="input-label">DOB</span> <input type="tel" ion-datetime-picker date ng-model="DOB" value="{{DOB| date: 'yyyy MM-dd'}}" > </label>

<<---controller.js---->>`.controller('registerCtrl', function($scope, $http, $state, $ionicPickerI18n) {

    $scope.DOB = new Date();
    $ionicPickerI18n.weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    $ionicPickerI18n.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    $ionicPickerI18n.ok = "Select";
    $ionicPickerI18n.cancel = "Cancel";

datetime picker not show popup if date is empty, is anyone has this problem?

I am using the time portion of the plugin and it is great. An enhancement, for the time dialog is to use input type=tel, instead of input type=text. This way, when a user taps into the box (tested on android), only the number pad appears (not the letters)

See ionic doc:
http://ionicframework.com/html5-input-types/#tel

Thanks

Hi,
First, I want to thank you for your plugin, it is very cool.
My problem: I want to open the datetime popup with the date, I have already set and not the current date and hour.

For example, my ng-model is 2016-04-09T15:27:47+02:00. When I open the popup, I still have the current date info selected.
Is there a way to set the correct date if the ng-model is contains a date ?
Thx

Input Elements are not being filled with the time /date that is being set by the datetime picker.
Increasing the Date and Time works its just not showing up in the input elements of the popup

On android 5.0 Webview 37 (HUAWEI ALE-L21) i found a problem with refreshing month name in month drop down list. You can trigger this problem using steps bellow:

1. Open datetime-picker
2. Click on month drop down list
3. Chose month from list (for instance December)
4. App will change its calendar view to chosen month(December) but in select label you still see previous month name
5. Chose different day in new month
6. Calendar will mark chosen day with blue background and update month name in select label to current one (December)

I also checked it on other device (Samsung GT-I9060I, android 4.4 with webview 32) and there everything works fine...

As I am trying to select date from particular Interval of days , It is working with hard coded value to only-valid attribute And not with the value in variable. My code is as follows

woking==>

<div class="col" ion-datetime-picker date  ng-model="date" placeholder="dd/mm/yyyy" only-valid="{'between': {'initial': '2016-7-01', 'final': '2016-10-30' }, 'inclusive': true}" ng-change="setTime()"></div>

Not working==>

<div class="col" ion-datetime-picker date  ng-model="date" placeholder="dd/mm/yyyy" only-valid="{'between': {'initial': '{{date1}}', 'final': 'date2' }, 'inclusive': true}" ng-change="setTime()"></div>

Hi! First of all my compliments for your awesome directive!
How can i change the text "Pick a date and a time"?
I Would to change it in Italian Language.
I tried with $ionicPickerI18N but it does not work. I tried to add an attribute title in the directive ion-datetime-picker but still nothing!
Any suggestion for this issue? Thanks!

Hi im trying to get the selected time so for e.g.:
The user changes time to 05:10 in the popup and clicks ok, i want to be able to get the 05:10.
I tried testing with simple ionic popup in the ion-datetime-picker.min.js file so that i can know which line of code handles the ok onclick event. However i still cant find it after several attempts.

Does anyone know how to do it?
Any help is much appreciated. Thank you.

I'm trying to use your excellent component within a custom template in Angular-Formly but I can't do it. I'm not sure what I should call on the "onclick" event to show your component. Any suggestions?
(seasoned developer but very new to both Ionic and Angular-Formly :) )

Thanks !

Hi,

Thanks for developing a very useful plugin. It working fine with ionic server and even its working properly in my android but not working with ios.

I am too much confused how to solve this issues.

In ios date picker model is appear but when i am clicking on Ok button date time value didnt fill in my input.

Kindly help me and thanks in advance.

Here is my code
<input type="text" placeholder="e.g 25-12-2016 14:00" ion-datetime-picker id="interview_date_time" name="interview_date_time" ng-model="datetimeValue" readonly="readonly" value="{{datetimeValue| date: 'yyyy-MM-dd H:mm'}}" required="required" />

Hi,

using between how can I set a calculated max date ($scope.maxDate calculated and set in the controller) for the final value? 'final': 'maxDate' or 'final': '{{maxDate}}' is not working.

e.g.
<div class='item' ion-datetime-picker am-pm only-valid="{'between': {'initial': 'today', 'final': 'maxDate'}, 'inclusive': true}" title="'From Date/Time'" ng-model="event.fromDate">

controller.js

//maxDate set to 180 days from today
  $scope.maxDate = new Date(new Date().setDate(new Date().getDate()+180));

There should be events such as onChange and inter operability with forms so that form validations can be performed where date time picker is used.
Suggested event types: on-change, on-tap

http://localhost:2480/function/Insta/createEvent/12:6/ddd/ddd/Thu%20Apr%2021%202016%2018:03:00%20GMT+0100%20(Paris,%20Madrid) 500 (Internal Server Error)

and all whta i want to have is : 2016-04-09 00:55:00
how can i do it or fix it please?
thank you

Picker should allow setting min and max value

My project is built upon ionic, and the code in html is as follows:

<button class="button button-small button-light" time ion-datetime-picker ng-model="s"> text:{{s}} </button>

When I select a time via datetime-picker, it outputs "text:"1899-12-31T14:13:00.000Z"", which should be "2016-08-09T15:13.00.000Z". The date picker has the same problem. Could anyone help me out with this sort-of locale problem? Thanks.

Order of months in the month list displayed in the select box is wrong.
November and December come in between February and March.

Error: [$compile:multidir] Multiple directives [ionDatetimePicker (module: ion-datetime-picker), ionItem] asking for new/isolated scope on:

Hi, is there a way to get a callback when ok is pressed?

I need to call a custom function to update a view. I can do a watch for the ng-model, but its more expensive

Hey guys, thanks for the awesome project.
I try it by the instructions , but i keep getting this error, "Cannot GET /picker-popup.html?",
so why my project keep to fetch template /picker-popup.html while your demo not?

After entering a value of 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, or 12 into the hour field, focus should automatically move to the minute field so that the user doesn't have to click "Next" or manually select the minute field. The only value that would require pressing "Next" or manually selecting the minute field is a value of "1". The user could avoid this by entering a zero before the 1.

Similarly entering a value in the minute or second field, after entering any value 7 thru 59 the next field should automatically gain focus. Entering a value of 1 thru 6 would require the user to press "Next" or manually select the next field. The user could avoid this by entering a zero before the 1 thru 6.

Is it possible to have in the same popup a date picker, a time picker to get an initial time and another time picker to get the final time?

Can I have 2 directives in same page and second picker's start date should be greater than the date that has been selected from first picker. How can I achieve this

Hey,

I have an issue in my app, i have 2 inputs in which i'm getting the values of your datepickers but when i pick a date too quickly and then try to click on the other input field then it causes my current modal to close itself.

I've checked online for a quick fix but nothing seems to match my current problem. Maybe adding some setTimeOut on the Ok button validation will fix the problem but that is not the best way to handle things in my opinion.

Looking forward to hear if you got the same problem at some point

First of all, Thanks for this awesome plugin.

The issue i am facing is easily understandable as below. I have not tested this issue on iOS yet. But on android i am facing this issue each time and on different devices with different android versions. I am also not facing this issue on desktop browser when running app through 'ionic serve' command.

1. I opened time picker and tap on minute input field, My cursor is in last position.
   
2. I typed number 7 as in below screenshot

1. Then i typed number 8 and suddenly before i can see '078' it changed to some garbage value as in below screenshot and stays as it is and after focus out it changed to '07'. It behaves similar if i try to type number below '60' and doesn't work at all as expected.

I have tried your demo on multiple devices and also on ionic view app and demo works perfectly.
But It doesn't work on my android devices and tablet.

The one major and main thing that is different in my android build is webview.

I am neither using default 'webview' nor 'crosswalk'. Instead i am using' webview+' provided by Cocoon.io and is only avaiable through Cloud Build and not as open source plugin.

What could be reason 'webview+' or some timing related issues in plugin code(less likely for me) or something else?

Can you pls provide your valuable feedback or solution for this issue?

the date in the field from which the picker is triggered is the 31st of may - when we open the picker, and click on the arrow to go to the next month, we end up in july instead of june :) reproduced on 2 different codebase

Nice plugin, love it.

I have a question. How to set minimal stop time based on the selected start time if I have two timepicker? Can you help me, please.

Start Time: 12:30
then Stop Time must be from 12:31

I use only-valid="{'after': '12:30'}", but it doesn't help.

Hey looks like the current bower.json isn't playing nice with wiredep using gulp as the task runner.
I had a quick look and the main and dependencies are there so I'm not sure how to fix this one with overrides.

Could be a problem with my task here's the code anyways

gulp.task('wire-vendor', function() {
gulp.src('./www/index.html')
.pipe(wiredep())
.pipe(gulp.dest('./www'));
});

gulp.task('wire-app', function() {
var target = gulp.src('./www/index.html');
var sources = gulp.src(['./www/js//*.js', './www/resources//*.css'], {read: false});
return target.pipe(inject(sources, {relative: true})).pipe(gulp.dest('./www'));
});

gulp.task('wiredep', ['wire-vendor','wire-app']);

After installing the "0.2.1" version with bower install, i had a path error : "localhost:3000/lib/ion-datetime-picker/src/picker-popup.html not found", so i modified "ion-datetime-picker.min.js" file where i changed templateUrl from "lib/ion-datetime-picker/src/picker-popup.html" to "picker-popup.html" and i worked perfectly.
Please make sure to solve this issue.
e.showPopup=function(){t.show({templateUrl:"picker-popup.html",title:e.title||"Pick "+(e.dateEnabled?"a date":"")+(e.dateEnabled&&e.timeEnabled?" and ":"")+(e.timeEnabled?"a time":"")

Hello! Thanks for the great work.

I use the plugin and get some error.
here's my code.

`

when I click the "Date:" ,It pops the picker box, but I also get these error:

need help , thank you very much.

According to my pull request on android input types for hours, minutes and seconds doesn't show numerical keyboard. I tested this problem on android 5.0.1 with webview 37.0.0.0, android 4.4.4 with webview 32 and emulated android 6.0 with webview 44.0.0.0
Google says that android doesn't use pattern tag for providing keyboard so it would be nice to find other solution to show proper keyboard on all platforms.

Hello,

I am using ion-datetime-picker and it's nice. But It is not working for Text Box in my android mobile.
Please help me to solve this issue.

Thank You

Able to let user select only the hours in the Day? for example, they can only choose from 0900 - 2100 (9AM - 9PM), so hours from 2200 - 0800 is not allowed.
Do I need to change anything in the plugin file? Thank you.

when ion-datetime-picker is used inside a ng-repeat loop the directive does not fire the element clcik event. Is it possible to make it working? (i'm new to angular)

In the time fields, it would be nice if the existing numbers would be selected when the field gains focus. This would allow the user to immediately start typing the new value without having to delete or select the old value.

Is there a way to disable past dates???

Hi ,

I can't get the value in a controller while using $scope.datetimeValue .
Can you tell me how to do ?

<label class="item item-icon-right" ion-datetime-picker ng-model="datetimeValue">
                        <i class="icon ion-ios-grid-view-outline positive"></i>
                        Departure Date/Time
                        <strong>{{datetimeValue| date: "yyyy-MM-dd H:mm"}}</strong>
                     </label>

Thank you very much !

This is my issue
https://docs.angularjs.org/error/$compile/multidir?p0=ionDatetimePicker&p1=%20(module: