Giter Club home page Giter Club logo

angular-material-datetimepicker's People

Contributors

2ernestkg avatar abrararies avatar aroddy avatar coennijhuis avatar contmp avatar darit avatar dependabot[bot] avatar dhaval85 avatar drblue avatar emielh avatar hexadecy avatar indream avatar j-walker23 avatar jpike88 avatar logbon72 avatar lohithanand avatar mak-pun avatar nikoskalogridis avatar norkunas avatar oliversalzburg avatar preraksola avatar simonsimcity avatar sovanna avatar t00rk avatar tezqa avatar therajumandapati avatar thewisenerd avatar tw1nk avatar vidanger avatar visavis2k avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

angular-material-datetimepicker's Issues

Cant get .js.map to load

I am running a MEAN stack environment, and ran into an issue.
Granted, this is probably me doing something wrong and not a true issue with the code.

We have a PUG template acting as our main view, and are declaring all dependencies there. In it, I have these lines:

script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js")
script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js.map")
link(rel="stylesheet" href="scripts/ng-material-datetimepicker/dist/material-datetimepicker.min.css")

the scripts portion of the src is set to our node-modules folder using this line:

app.use('/scripts', express.static(path.join(__dirname, ".\\node_modules")));
With that setup, I am getting the following error in the dev console, in reference to the .js.map file only (everything else seems to work):

Uncaught SyntaxError: Unexpected token :
I have seen some answers regarding the MIME type being incorrect, or this being an issue with chrome, but as I mentioned, I'm starting to lean towards something of mine being set up incorrectly. What am I doing wrong?

Add validation for input with format

When format, for example, is M/D/YY, I can input value like 8/18/18qwerty, and there are no form validation errors, but in $ngModelValue we have undefined. I think we should provide the error in form.$error object when invalid format takes place.

Getting Invalid dates ..! pls help :)

@hexadecy i am getting date "2017-09-12T18:30:00.000Z" from the service response ...it is showing "13 sep 2017" in input field ...but if user wants to change the date...while opening ..it is showing as Invalid dates
datepicker error for 0 s date

the times also showing other times when selected

ng-model not working

angularjs version : 1.7.7
angular-material-datetimepicker version : 1.18.3
moment version : 2.24.0

angularjs ng-model attributes is not working.
<input mdc-datetime-picker="" today-text="Bugün" am-text="ÖÖ" pm-text="ÖS" cancel-text="İptal" ok-text="Tamam" date="true" time="true" type="text" placeholder="Başlangıç tarihi" show-todays-date="true" minutes="true" min-date="date" auto-ok="true" short-time="true" ng-model="RezervationModel.StartDate" name="StartDate" class="md-input" required>

Thanks.

Could not find a declaration

I'm working with angular 8 and when I try to install via npm and import it:
import { ngMaterialDatePicker } from "ng-material-datetimepicker";

it says the following

Could not find a declaration file for module 'ng-material-datetimepicker'. 'XXXXX/node_modules/ng-material-datetimepicker/js/angular-material-datetimepicker.js' implicitly has an 'any' type.
Try npm install @types/ng-material-datetimepicker if it exists or add a new declaration (.d.ts) file containing declare module 'ng-material-datetimepicker';

I tried to do this work around https://www.detroitlabs.com/blog/2018/02/28/adding-custom-type-definitions-to-a-third-party-library/

which got rid of the error, however when I ran my code, in the console i got the follow error

Uncaught ReferenceError: angular is not defined
at Object.ngMaterialDatePicker (angular-material-datetimepicker.js:92)
at angular-material-datetimepicker.js:1296
at Object../node_modules/ng-material-datetimepicker/js/angular-material-datetimepicker.js (angular-material-datetimepicker.js:1302)

Support for ng-model-options timezone

Issue: Date is always displayed in local time
Expected: ng-model should respect the ng-model-options

Code:
<input mdc-datetime-picker date="true" time="false" type="text" format="MM/DD/YYYY Z" show-todays-date ng-model="date" ng-model-options="{ timezone: 'utc' }" />

Add short days format options

Hi,
Can we have the option to define the short days format in array ?
similar to materialjs ($mdDateLocaleProvider.shortMonths = ['Mon', 'Tue', ...]) ?

Setting shortTime=true on a date picker shows AM/PM indicator

If you set shortTime to true on a date picker, you will get an AM/PM indicator in the header of the dialog.

We noticed this because we set shortTime through mdcDefaultParams after the locale has been determined.

To work around this issue, we set shortTime explicitly to false when we only want to pick a date anyway.

Delay in open modal when using with android app webview

I am using this module in my angularjs app which is load from android application webview.

all works fine when i open this app from browser, the modal is open as soon as click on input element, but when i load it from webview of android app it takes almost 3-4 seconds to open modal.

my input elements is as follows

<input
     time="false"
     date="true"
     mdc-datetime-picker=""
     type="text"
     id="from_date"
     click-outside-to-close="true"
     show-todays-date=""
     today-btn="false"
     ng-model="filter.from_date"
     format="DD-MM-YYYY"
     disable-parent-scroll="true"
     min-date="minDate"
     max-date="maxDate"
     readonly />

Any help regarding this?

Time issue AM/PM if future date is restricted

Hi,

Thanks for the great plugin, I am facing issue which I describe step by step and let me know if you need more clarity.

  1. Select the Any date expect the today date

step1

  1. Select PM from AM/PM buttons

step2

  1. Now Click on Cancel Button and Select Today’ date

step3

  1. Observe the issue that you will not able to select time and click on AM is also disabled
    This happens only in the morning time when PM time is not yet available to select

1.6.7 not working on Angular 1.5.9

Hi,

My application is on angular 1.5.9 and it is not working, I have that message :

TypeError: Cannot read property 'createChild' of null at Object.link (webpack:///./node_modules/ng-material-datetimepicker/js/angular-material-datetimepicker.js?:160:50) at eval (webpack:///./node_modules/angular/angular.js?:1259:18) at eval (webpack:///./node_modules/angular/angular.js?:10089:44) at invokeLinkFn (webpack:///./node_modules/angular/angular.js?:10095:9) at nodeLinkFn (webpack:///./node_modules/angular/angular.js?:9492:11) at compositeLinkFn (webpack:///./node_modules/angular/angular.js?:8757:13) at nodeLinkFn (webpack:///./node_modules/angular/angular.js?:9486:11) at compositeLinkFn (webpack:///./node_modules/angular/angular.js?:8757:13) at nodeLinkFn (webpack:///./node_modules/angular/angular.js?:9486:11) at compositeLinkFn (webpack:///./node_modules/angular/angular.js?:8757:13) <input mdc-datetime-picker="" date="true" time="true" type="text" format="{{$ctrl.datePickerConfig.format}}" min-date="$ctrl.datePickerConfig.minDate" ng-model="$ctrl.form.validation_at" cancel-text="{{'datepicker.cancel' | translate}}" today-text="{{'datepicker.today' | translate}}" ok-text="{{'datepicker.ok' | translate}}" week-start="$ctrl.datePickerConfig.weekStart" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">

Module 'ngMaterialDatePicker' is not available!

Module 'ngMaterialDatePicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

When i run the code in dev-mode it works fine when i try to build the app using gulp serve: dist it shows me the error like mentioned above

Month displayed is not the same as month view

Hi

Thanks alot the for library i chose this one over the others cause of the customisable minutes. Users recently started complaining about this month view issue but i could not replicate it on my side, however today i went through your demo page and i see i can replicate the issue there.

When changing the month sometimes the month view does not update and stays on the same month until you navigate an extra time in the same direction eg. twice back and then one forward then it works. In the image you can see above it shows August but the month view shows September even using the dropdown does not work. Please assist

image

Upgrade angular library

Would it be possible to upgrade this to angular (e.g. angular 7 or 8)?
It would be great if you could still give a time-zone similarly to ng-model-options="{timezone:'utc'}"

Not loading properly on small screen size

Hi,
Could you please check as I am facing issue on small screen size as picking popup is not loading properly on small screen size as well as once we have debugger window open.

small screen size

Please review and let me know if you need any clarification.

Thanks

Mysql format issue

There is now way post for mysql format.

Current post format:
Mon Dec 11 2017 23:40:51 GMT+0300 (+03)

It should be for mysql;
2017-11-03 23:40:51

Times (sometimes) change on page load

Library Versions:

  • AngularJS: 1.6.10
  • Angular Material: 1.1.10
  • Angular Material Datetimepicker: 1.17.1
  • Moment.js: 2.19.3
  • MomentTimezone.js: 0.5.13

Description of the Issue:
We store the datetime of events in our database alongside the timezone offset in hours (e.g. -0700) and the timezone name of the event's location (e.g. America/Los_Angeles). The timezone offset is used with ng-model-options on the datetimepicker to correctly set and display the time of the event, even if you aren't in the same timezone as the location of the event. When loading the edit event page, the initial value of the datetime will sometimes shift by an hour either forward or backward. This doesn't seem to have any tie to daylight savings time changing soon in the United States, either (that happens on November 4th).

For example, we have an event on Friday October 26 at 8am and loading the page has resulted in the time changing on load to 7am. It also happened with an event on Monday October 29 at 11am when it loaded to show 12pm.

Unfortunately this issue is inconsistent and, from what we've been able to find, unpredictable to reproduce. Some users don't see it at all while others see it a couple times a day (when editing, on average, a couple dozen or so events per day). I've also seen it with my own eyes in production, but have been unable to reproduce it locally or in a Plunker.

We did recently switch from version 1.12.0 to 1.17.1 to get the fix for #47; that deployment did not change any other event editing code. The deployment happened 6 days ago and this new issue did not appear until that time. As such, it seems possible that a change between those two versions is leading to this. Looking at the file changes from 1.12.0 to 1.17.1, there appears to be quite a few changes around the usage of ng-model-options that were introduced in the 1.13.0 update. Since we updated from 1.12.0 directly to 1.17.1, we haven't tested any versions in between to know if they also contain the bug or not.

I wish I had more information and a very clear example to provide you like I have with past bug reports, but we haven't been able to crack it. We're hoping the above describes the situation well enough that it may trigger a thought in your head about what could cause such an issue. In the meantime, we will continue to look at this on our end and see if we can pinpoint the exact problem.

Thanks as always for your help and continued support of this library.

EDIT for what it's worth, it does appear that this only happens to users with slower computers. All users that I've spoken to are using Chrome, too.

min time and max time

I need two inputs from user start and end dates, times..,
after selecting the start date and time I can able to disable end date to select before the start date but I am unable to disable end times which are before start time.

@ViDaNgEr @beenoteadmin Let me know how the above issue can be achieved

Timezone issue on ng-model bind

I have a web formular which loads previously saved values to a datetimepicker field.

When I bind the saved value to the ng-model of the field, for example:
2018-06-07T21:15:00.000Z
it is shown as UTC in the formular and is not calculated to my timezone which it works when I pick it over the picker dialog.

If I save this value once more, it is calculated from my current timezone to a UTC value which changes the loaded value (in my case) to:
2018-06-07T19:15:00.000Z

Implementation of the field:
<input mdc-datetime-picker date="true" time="true" type="text" id="time" short-time="true" placeholder="soon as possible" click-outside-to-close="false" auto-ok="true" min-date="StartTimeMinDate" max-date="StartTimeMaxDate" format="YYYY-MM-DD HH:mm" ng-model="MigrationData.StartTime" edit-input="false" show-icon="true" ng-model-options="{lang: 'en'}" ></input>

The issue is reproducable with
version 1.15.2
version 1.15.1

The behaviour doesn't change if I add the "timezone: 'utc'" attribute to ng-model-options.
My expectation of this option is, that the value in the field is UTC. But also with this option the value is local time.

Support for Angular >= 2

Hi, is there any chance to create the same component for Angular >= 2, or there is already implemented component similar to yours?
Thanks

RTL support is missing on month/year buttons and prev buttons is smaller than next

From the demo, you can switch to RTL and you can see the buttons to change month or year are wrongly oriented and wrongly aligned

I thought the align should be fixed, but simply adding the below css rules fixes the issue:

[dir=rtl] .dtp div.dtp-year-btn-next, [dir=rtl] .dtp div.dtp-month-btn-next,
[dir=rtl] .dtp div.dtp-year-btn-next, [dir=rtl] .dtp div.dtp-month-btn-prev {
-ms-transform: rotate(180deg); /* IE 9 /
-webkit-transform: rotate(180deg); /
Chrome, Safari, Opera */
transform: rotate(180deg);
}

It should probably be declared as another issue, but the arrows for prev and next buttons are differents.
Still from the demo, I have for prev arrows: ◀ and for next arrows: ►
Their are different type of arrows that can be represented with hexa code. The smaller one is normally an arrow inside a square.
I would suggest using the corresponding ◄ which is the arrow pointing left, but of the same size and render of the one used for next.
Unless it is by design to have prev smaller?

Regards,

Do not call ng-change method

I have been using your fork for a few months now. Everything works well, but today I found a problem with the ng-change method.

I have the following HTML:
<input mdc-datetime-picker ng-model="vm.valueModel" ng-change="vm.runOnChangeTrigger()"/>

And the following JS:
vm.runOnChangeTrigger = function() { if (vm.onChange) vm.onChange( { value: vm.valueModel } ); }

Where vm.runOnChangeTrigger() is a method in my scope. The problem is that this method does not execute when the value changes. Have you tried it? Thanks for you response.

Jalali calendar

Hi,
How to convert this datepicker to jalali persian calendar ?

edit-input="true" doesn't work as expected

When I use the option edit-input="true" I would expect that the inserted string gets converted into a date object but that doesn't happen. It seems that the model remains empty.

Current year is not available in dropdown when we have restricted user to select future date

Hi,

Firstly, we want to thankyou for this superb datepicker.

I am getting an issue and scenario is once I restricted user to not select the future date, then user can't able to select the current year from the dropdown. I am attaching screenshot what I mean to say so you can understand properly.

image

Could you please review and let me know how we can show the current year to the YEAR dropdown so we can select any past(fine now) or current year.

Thanks

ng-model-options {timezone: 'utc'} with min-date a utc moment doesn't work.

If your local timezone differs from UTC and the input is required the ng-model will be invalid.

<input required mdc-datetime-picker=""
                                date="true" time="true" type="text"
                                placeholder="Start Date/time of reschedule"
                                ng-model="vm.selectedItem.start"
                                seconds="true" minute-steps="1"
                                class="md-input" id="input_0"
                                format="YYYY-MM-DD HH:mm z"
                                min-date="vm.minDate"
                                ng-model-options="{timezone: 'utc'}"
                                >```

I'm using v1.18.2 where the ng-model actually works with setting the form status correctly.

Sure, i could update to the latest version where the ng-model doesn't work however that breaks a lot of other things as I want the form to be invalid if input to the form is invalid.

Keep bounded data type?

Hey, thanks for this awesome fork.

Just was curious if it was currently possible for the ng-model to stay a moment data type if that is the initial type given.
When i pass a object to the directive that is a moment object, then use it to change the date/time. My bound ng-model changes to a native Date. Is there anyway around that? Hoping i am just missing something.

mixing manual entry and calendar leads to invalid date format

In case we have the edit-input in the component, mixing manual entry and calendar leads to invalid date format:

To reproduce:

  • input the date and the time manually (with correct format)
  • delete the date and the time manually (not with the cross)
  • choose a date and a hour in the date-picker.

==> Component is in invalid date format state

Max date does not allow valid values to be selected

Library Versions:

  • AngularJS: 1.7.2
  • Angular Material: 1.1.10
  • Angular Material Datetimepicker: 1.17.0
  • Moment.js: 2.22.2

Reproduction Steps

  1. Set a max-date property for a datetimepicker to be 12:50pm.
  2. Try to change that datetimepicker's time to 12:00pm.
  3. You can change the hour to 12 and the minutes to 0, but the PM button is disabled, despite being a valid option.

I have reproduced the issue with a Plunker.

Picker icons cause layout issues, show-icon enables too many options

The show-icon attribute causes a calendar or clock icon to be displayed next to the input element. Clicking this icon opens the picker. This is very convenient and I'd really like to enable this for a certain use case I have.

However, this also adds a clear button to the input element, which can have unintended implications. In my case, I don't want the user to be able to remove the time value in the input. IMHO the picker icon and the clear icon should be configurable separately.

Additionally, when the picker is contained in an md-input-container, the label intersects with the picker icon, which originally lead me to try to prevent the element from being cleared by the user.

image

Additionally, there's a dtp-input CSS class being used in some places, which appears to add a margin on the left of the input element that seems like it's inteded for the above mentioned icons to fit in. However, if you don't apply the style and enable show-icon, the control still looks perfectly fine.

timezone option applied only in dialog mode

Hi!
I found issue with timezone option,
timezone applied only for dialog mode, I think it needs to be applicable also when edit-input is true.
So we need to apply utcOffset also when ngModelChange takes place

Validation not triggered when using edit-input and datepicker

For reproduce set min-date, then write one month before this date, an error is shown. Then click to Icon and open Calendar, then select min available date (picker will close (why?)), error still present, because $setValidity was not triggered.

For picker close issue maybe this fix can be applied:

              if (date) {
                if (calendar.isSelectedDay(date)) {
                  return picker.ok();
                }
                picker.selectDate(moment(date).hour(calendar.date.hour()).minute(calendar.date.minute()));
                if (picker.params.autoOk) {
                  picker.ok();
                }
              }

need to replace with:

              if (date) {
                if (!calendar.isSelectedDay(date)) {
                 picker.selectDate(moment(date).hour(calendar.date.hour()).minute(calendar.date.minute()));
                }
                if (picker.params.autoOk) {
                  picker.ok();
                }
              }

Add $watchers for min and max date

In my use case I have two related inputs, where first is start date, and second is end date. Min for end date is set as start date + 1 day, but validation triggered only if second input changed manually.
I add additional code to figure out this problem.

              if (scope.minDate) {
                  scope.$watch(function () {
                    return scope.minDate;
                  }, function (val2, val1) {
                      if (val2 !== val1) {
                          ngModel.$setValidity('min', !scope.currentDate.isBefore(scope.minDate));
                      }
                  });
              }

and for maxDate

              if (scope.maxDate) {
                  scope.$watch(function () {
                      return scope.maxDate;
                  }, function (val2, val1) {
                      if (val2 !== val1) {
                          ngModel.$setValidity('max', !scope.currentDate.isAfter(scope.maxDate));
                      }
                  });
              }

@hexadecy could you add this to package?

Add am/pm text customization

I need to customize AM and PM button for Korean project (오천 and 오후).
I already use mdcDefaultParams({lang: 'kr'}) and it's still the same.

Can you add some setting like okText or cancelText?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.