search

g1eb / angular-datetime-range

📅 Angular directive for datetime range input
https://rawgit.com/g1eb/angular-datetime-range/master/
MIT License
25 stars 14 forks source link

is it possible to use UTC time and provide gmt offset #14

Closed ShankzPatil closed 6 years ago

ShankzPatil commented 6 years ago

is it possible to use UTC time and provide gmt offset so particular zone can able to extract data on basis of gmt offset rather than he is in another gmt offset.

programmatically i can handle but i want feature in daterange picker and input configurable.

please refer angular-clock https://github.com/deepu105/angular-clock

g1eb commented 6 years ago

I'm not quite sure I completely understand your request..

Would you like the users to be able to select a timezone offset? Can you provide an example to illustrate this feature request?

ShankzPatil commented 6 years ago

user is working in spain timezone but i want to use timezone of asian country for that datepicker on my web page. so user has idea to choose date on basis of asian country. Mainly issue arise when time format differences.

ShankzPatil commented 6 years ago

gmt-offset : shows time for the given GMT offset in clock, (default: false, shows local time) example: India -> 5.30, Singapore -> 8 , venezula -> -4.30, Nepal -> 5.45

g1eb commented 6 years ago

That's interesting, if I understand you correctly this feature consists of two parts:

  1. Display the currently selected timezone in the directive
  2. Allow user to change timezone for input

Is this a correct analysis? Do you have anything to add to this?

ShankzPatil commented 6 years ago

yes provide directive tag gmt-offset.

g1eb commented 6 years ago

Hm, I'm guessing this would have to be optional (in order to not be a breaking change).

I also need to think of how to fit this new feature into the existing design. And use a sensible default if none was set by the user.. Do you want this feature in the other input directives as well?

ShankzPatil commented 6 years ago
  1. make it optional and use local gmt if not mentioned.
  2. Sync your both range and input with above feature.
  3. Don't provide UI to display GMT details.
dementic commented 6 years ago

I would guess he is looking for something like this: https://www.npmjs.com/package/@senzil/angular-datetime-range I do not like the version in this link, since it adds two more dependencies.

g1eb commented 6 years ago

Interesting, thanks for the link @dementic

@ShankzPatil Based on your point 3, do you mean you don't want the users to be able to select a different gmt offset? In other words, the gmt offset is set as a property on the directive and the user can't change it when entering time?

As I initially thought you would set a default timezone as a property and allow users to change it later. Not being able to change timezone makes this issue much easier to implement :)

dementic commented 6 years ago

If i may answer that, I dont see the need to allow the user to change it. If you make it as a property as you suggested, Whenever this feature is needed, a dropdown could be added to change the property value.

g1eb commented 6 years ago

Good idea, we can iterate and improve to add the dropdown or something like that when we need one.

Thanks for helping think this through! :)

ShankzPatil commented 6 years ago

Yes.

g1eb commented 6 years ago

Hi there, I've added an optional utcOffset attribute which can be used to pass an offset in minutes, for example:

<datetime-range start="start" end="end" utc-offset="offset"></datetime-range>

See index.html for an example where utc offset is used in the component

For now I pushed this change to the feature/utc-offset branch. Please take a look and let me know if that is an adequate fix for the issue.

g1eb commented 6 years ago

Hi again, were you able to review the utc-offset feature branch and did it solve your issue?

Since the change is not breaking I can also merge and publish it as it is right now or I can leave it for any improvements and/or additions you might have. Let me know what option would have your preference :)

nexeh commented 5 years ago

@g1eb Is this feature still present? I was looking for support for this same thing and gave it a try and didnt seem to work. I dont think it ever got merged. If you could get it so i can bower install with this feature that would be great! im currently using version "angular-datetime-range": "^0.4.0",. I do need this pretty quick so if you could let me know if this is posible id really appreciate it.

My Use case: I have a client that explores data streamed from a number of distributed devices. I have the next wave of devices coming online in another timezone. When i explore that data i need to see it in thier local time and my client does that automatically. I use this date range selector to filter my data but the problem is that it will display in my local time. So im looking at data in one timezone and filtering with another one and that just hurt peoples brains to do that all day.

Feed back on current design: I found it odd that you choose to comunicate the offset in minutes. It not a show stopper for me i can translate from timezone to minutes as needed. Historically what i have used and would have expected the same would have been what date filter uses:

Timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.

https://code.angularjs.org/1.5.11/docs/api/ng/filter/date

g1eb commented 5 years ago

Hi @nexeh, sorry about the late reply! I think you're right it never got merged..

I think I was holding back to see if it actually is what people want, if it's something you could use we can definitely merge it upstream. Please check out the feature/utc-offset branch :)

nexeh commented 5 years ago

No problem @g1eb , I would really appreciate the merge and i can us it today. I delayed making any changes in hopes i would hear from you. Unfortunately, if i dont get the change i will have to move away from the widget and i really dont want to do that. i move it it because it solved so many of my issues. I didn't think of this use case till it happened.

g1eb commented 5 years ago

Okay, I've merged develop into utc-offset branch to bring it up to speed. You can either test is locally and see if it works, or install with bower like you mentioned earlier, change your bower.json entry to "angular-scroll-events": "git://github.com/g1eb/angular-datetime-range#feature/utc-offset"

Let me know if the feature works for you, I can then merge it into master.

nexeh commented 5 years ago

Trying now . Stand by :)

nexeh commented 5 years ago

Doesnt seem to work. i am getting this error message on page load

TypeError: Cannot read property 'utcOffset' of undefined
    at Object.post (http://localhost:3000/scripts/vendor-3822473e0b.js:654:17771)
    at http://localhost:3000/scripts/vendor-3822473e0b.js:36:5665
    at http://localhost:3000/scripts/vendor-3822473e0b.js:37:11024
    at Se (http://localhost:3000/scripts/vendor-3822473e0b.js:37:11081)
    at m (http://localhost:3000/scripts/vendor-3822473e0b.js:37:3488)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31123)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31140)
    at m (http://localhost:3000/scripts/vendor-3822473e0b.js:37:3432)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31123)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31140) <div class="col-sm-12 datetime-range datetime ng-isolate-scope" start="filterData.startDate" end="filterData.endDate" on-change-start="onDateRangeChange('startDate')" on-change-end="onDateRangeChange('endDate')" utc-offset="offset">

HTML

          <datetime-range 
            start="filterData.startDate" 
            end="filterData.endDate" 
            on-change-start="onDateRangeChange('startDate')" 
            on-change-end="onDateRangeChange('endDate')"
            utc-offset="offset"
            class="col-sm-12">
          </datetime-range>

controller

      $scope.offset = 420;

bower

"angular-datetime-range": "git://github.com/g1eb/angular-datetime-range#feature/utc-offset",
g1eb commented 5 years ago

That's strange, I can't reproduce - could be something with bower not picking up the feature branch? Can you provide a snippet where i can to reproduce this issue? Or, if you can clone this repo, serve the directory with a simple http server and open index.html :)

nexeh commented 5 years ago

I am out of the office at the moment but I will give this a shot in the morning and try to isolate what the problem is. I did confirm when I did the bower install that it detected the change and installed it so I don't think that's the issue. Before installing the update if I had the offset in the directive in my HTML it just did nothing so the presence of the new code does cause the error message. Maybe it's a problem with minification?

On Tue, Nov 13, 2018, 5:00 PM Gleb <notifications@github.com wrote:

That's strange, I can't reproduce - could be something with bower not picking up the feature branch? Can you provide a snippet where i can to reproduce this issue? Or, if you can clone this repo, serve the directory with a simple http server and open index.html :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/g1eb/angular-datetime-range/issues/14#issuecomment-438454414, or mute the thread https://github.com/notifications/unsubscribe-auth/ACj-fx2-BUu-R4MicqgSUfwGD4H5ip36ks5uu0DmgaJpZM4QXfoz .

g1eb commented 5 years ago

Okay, let me know how it goes :) Just as a side note, I was testing this with files in the dist folder that are already minified.

nexeh commented 5 years ago

Good morning,

Here is my notes from debugging this morning. Sorry for the delay, i had to tend to some issues when i first came in this morning.

First, i rolled back my bower file to "angular-datetime-range": "^0.4.0", and i left the code that i added for utcOffset in place, built, deployed, and ran fine. So i have confirmed my original statement that it did install and wasn't a problem prior.

Next, i reintroduced the change to my bower file and tests again grabing the out put 

"angular-datetime-range": "git://github.com/g1eb/angular-datetime-range#feature/utc-offset",
bower install

bower angular-datetime-range#feature/utc-offset       not-cached git://github.com/g1eb/angular-datetime-range.git#feature/utc-offset
bower angular-datetime-range#feature/utc-offset          resolve git://github.com/g1eb/angular-datetime-range.git#feature/utc-offset
bower angular-datetime-range#feature/utc-offset         download https://github.com/g1eb/angular-datetime-range/archive/feature/utc-offset.tar.gz
bower angular-datetime-range#feature/utc-offset          extract archive.tar.gz
bower angular-datetime-range#feature/utc-offset     invalid-meta for:/var/folders/fp/mqy7lddd6h16d6bk24tq28ch0000gp/T/jcorson-osx/bower/f7aa17c314206f092f9d9c3601a2be08-9725-elb23w/bower.json
bower angular-datetime-range#feature/utc-offset     invalid-meta The "main" field cannot contain minified files
bower angular-datetime-range#feature/utc-offset     invalid-meta The "main" field cannot contain minified files
bower angular-datetime-range#feature/utc-offset         resolved git://github.com/g1eb/angular-datetime-range.git#07edd6bb06
bower angular-datetime-range#feature/utc-offset          install angular-datetime-range#07edd6bb06

angular-datetime-range#07edd6bb06 bower_components/angular-datetime-range
├── angular#1.5.11
├── angular-scroll-events#0.0.2
└── moment#2.22.2
TypeError: Cannot read property 'utcOffset' of undefined
    at Object.post (http://localhost:3000/scripts/vendor-3822473e0b.js:654:17771)
    at http://localhost:3000/scripts/vendor-3822473e0b.js:36:5665
    at http://localhost:3000/scripts/vendor-3822473e0b.js:37:11024
    at Se (http://localhost:3000/scripts/vendor-3822473e0b.js:37:11081)
    at m (http://localhost:3000/scripts/vendor-3822473e0b.js:37:3488)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31123)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31140)
    at m (http://localhost:3000/scripts/vendor-3822473e0b.js:37:3432)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31123)
    at s (http://localhost:3000/scripts/vendor-3822473e0b.js:36:31140) <div class="col-sm-12 datetime-range datetime ng-isolate-scope" start="filterData.startDate" end="filterData.endDate" on-change-start="onDateRangeChange('startDate')" on-change-end="onDateRangeChange('endDate')" utc-offset="offset">

I then removed the utc-offset="offset" from the directive and the error message goes away:

<div class="col-sm-12 datetime-range datetime ng-isolate-scope" start="filterData.startDate" end="filterData.endDate" on-change-start="onDateRangeChange('startDate')" on-change-end="onDateRangeChange('endDate')">

Running the code locally i am able to step into your dist file and see the issue is on this statement: scope.start.utcOffset(scope.utcOffset); so Im thinking scope.start is undefined at this point

Looking into my code and thats right. i dont have a start date right away. My controller performs some logic and ends up setting it based on user preferences. Is this something you want to add some defensive coding around or is your expectation that start always be defined

EDIT: this is the line that im talking about: https://github.com/g1eb/angular-datetime-range/blob/07edd6bb063ffbc84de5c60c80f7da3ae18d9dcf/src/datetime-range.js#L44

Im not sure that its undefined actually. maybe its a timing thing. ill dig a little more into this but i am thinking you do want to check first.

g1eb commented 5 years ago

Thanks for the update and the extensive report, Im glad we got to the bottom of this

That utc offset is set in post-link function of the directive, it would not get set if the start/end dates are not available from the start. I've added a check to see if the start/end dates are available so you won't get that error anymore. If it's a timing issue, could you set utcOffset on the dates you pass on to the directive?

nexeh commented 5 years ago

Error is gone with your new code.

nexeh commented 5 years ago

I do not see any difference using a offset of any value

using the following which should be 11/14/2018 @ 6:46pm (UTC) is consistently displayed iin my local timezone.

// in milliseconds
endDate=1542221160000
startDate=1542221160000
g1eb commented 5 years ago

Are the start/end dates you provide to the directive a moment object? And if yes, can you set the utcOffset to the same value as the utcOffset attribute on the directive?

The issue is that directive only sets the offset when initialized, if your start/end date objects are not available at that time we need to set it later.