New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Foundation Datepicker with AngularJS #55

Open
kornatzky opened this Issue Jul 6, 2014 · 20 comments

Comments

Projects
None yet
10 participants
@kornatzky

Hi,
Can you suggest a way to use this with AngularJS?
Thanks,
Yoram

@najlepsiwebdesigner

This comment has been minimized.

Show comment
Hide comment
@najlepsiwebdesigner

najlepsiwebdesigner Jul 6, 2014

Owner

Hi,

I'm sorry but I can't help you with this.

Ing. Peter Beňo

Web development & computer vision
http://about.me/peterbeno

On Sun, Jul 6, 2014 at 9:58 AM, kornatzky notifications@github.com wrote:

Hi,
Can you suggest a way to use this with AngularJS?
Thanks,
Yoram


Reply to this email directly or view it on GitHub
#55.

Hi,

I'm sorry but I can't help you with this.

Ing. Peter Beňo

Web development & computer vision
http://about.me/peterbeno

On Sun, Jul 6, 2014 at 9:58 AM, kornatzky notifications@github.com wrote:

Hi,
Can you suggest a way to use this with AngularJS?
Thanks,
Yoram


Reply to this email directly or view it on GitHub
#55.

@noahmiller

This comment has been minimized.

Show comment
Hide comment
@noahmiller

noahmiller Sep 25, 2014

One option is to write a simple directive like this one, which looks for the my-datepicker attribute on an element and calls fdatepicker() on that element.

angular.module('app')
   .directive('my-datepicker', ->
      return {
         link: (scope, element, attrs) ->
            $(element).fdatepicker()
      }
   )
<input a-datepicker="" type="text" value="12/1/2014">

A slightly more complex version of this directive is described in this blog post.

One option is to write a simple directive like this one, which looks for the my-datepicker attribute on an element and calls fdatepicker() on that element.

angular.module('app')
   .directive('my-datepicker', ->
      return {
         link: (scope, element, attrs) ->
            $(element).fdatepicker()
      }
   )
<input a-datepicker="" type="text" value="12/1/2014">

A slightly more complex version of this directive is described in this blog post.

@fulup-bzh

This comment has been minimized.

Show comment
Hide comment
@fulup-bzh

fulup-bzh Mar 8, 2015

I ported a simplified version on Angular.

Code: git: https://github.com/fulup-bzh/DatePicker
Demo: http://breizhme.net/datepicker/demo/

My version does not support Date Parsing in the input field, but foundamentals works and its fully integrated with Angular.

<date-picker 
 id="picker-1" class="my-date-picker"
 format="(EEE) dd-MMM-yyyy" placeholder="Basic Date Selection" today="Today Not Tomorrow"
 ng-model="pickdate1" callback="datePickerCB">
</date-picker>

I ported a simplified version on Angular.

Code: git: https://github.com/fulup-bzh/DatePicker
Demo: http://breizhme.net/datepicker/demo/

My version does not support Date Parsing in the input field, but foundamentals works and its fully integrated with Angular.

<date-picker 
 id="picker-1" class="my-date-picker"
 format="(EEE) dd-MMM-yyyy" placeholder="Basic Date Selection" today="Today Not Tomorrow"
 ng-model="pickdate1" callback="datePickerCB">
</date-picker>
@ryankc33

This comment has been minimized.

Show comment
Hide comment
@ryankc33

ryankc33 Apr 26, 2015

@kornatzky The directive written by @noahmiller works.

Here's how:

  1. Include the foundation-datepicker js and css files in your project
  2. Write the directive given by @noahmiller like so:
angular.module('app')
   .directive('fDatepicker', ->
      return {
         link: (scope, element, attrs) ->
            $(element).fdatepicker()
      }
   )

Use the directive on an input field like so:

<input f-datepicker="" type="text">

@najlepsiwebdesigner You can safely close this issue.

@kornatzky The directive written by @noahmiller works.

Here's how:

  1. Include the foundation-datepicker js and css files in your project
  2. Write the directive given by @noahmiller like so:
angular.module('app')
   .directive('fDatepicker', ->
      return {
         link: (scope, element, attrs) ->
            $(element).fdatepicker()
      }
   )

Use the directive on an input field like so:

<input f-datepicker="" type="text">

@najlepsiwebdesigner You can safely close this issue.

@fulup-bzh

This comment has been minimized.

Show comment
Hide comment
@fulup-bzh

fulup-bzh Apr 26, 2015

@ryankc33 your proposal only works if you include full jQuery. If you rely on standard Angular you are limitted to jqLite https://gist.github.com/esfand/9638882

@ryankc33 your proposal only works if you include full jQuery. If you rely on standard Angular you are limitted to jqLite https://gist.github.com/esfand/9638882

@bodhisatwag

This comment has been minimized.

Show comment
Hide comment
@bodhisatwag

bodhisatwag Jul 10, 2015

@fulup-bzh your code is broken right now. I tried it and saw that the issue is also added there but there is not fix yet. So its un-usable.

@fulup-bzh your code is broken right now. I tried it and saw that the issue is also added there but there is not fix yet. So its un-usable.

@jkafader

This comment has been minimized.

Show comment
Hide comment
@jkafader

jkafader Sep 8, 2015

For the next person who finds this conversation and tries to implement this, here's a more-correct version of the angular directive. Also, beware: you'll have to install jQuery to use this with angular.

'use strict';

/* Directives */
function DatePicker(){
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: { format: "=" },
        link: function(scope, element, attrs, ngModel){
            if(typeof(scope.format) == "undefined"){ scope.format = "yyyy-mm-dd" }
            $(element).fdatepicker({format: scope.format}).on('changeDate', function(ev){
                scope.$apply(function(){
                    ngModel.$setViewValue(ev.date);
                }); 
            })
        }
    } 
}

angular
    .module('myDirectiveModule')
    .directive('datepicker', DatePicker);

jkafader commented Sep 8, 2015

For the next person who finds this conversation and tries to implement this, here's a more-correct version of the angular directive. Also, beware: you'll have to install jQuery to use this with angular.

'use strict';

/* Directives */
function DatePicker(){
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: { format: "=" },
        link: function(scope, element, attrs, ngModel){
            if(typeof(scope.format) == "undefined"){ scope.format = "yyyy-mm-dd" }
            $(element).fdatepicker({format: scope.format}).on('changeDate', function(ev){
                scope.$apply(function(){
                    ngModel.$setViewValue(ev.date);
                }); 
            })
        }
    } 
}

angular
    .module('myDirectiveModule')
    .directive('datepicker', DatePicker);
@jkafader

This comment has been minimized.

Show comment
Hide comment
@jkafader

jkafader Sep 8, 2015

You can then write your datepicking text input like this:

<input type='text' ng-model='my.model' datepicker=''></input>

jkafader commented Sep 8, 2015

You can then write your datepicking text input like this:

<input type='text' ng-model='my.model' datepicker=''></input>
@RogelioGaytan

This comment has been minimized.

Show comment
Hide comment
@RogelioGaytan

RogelioGaytan Sep 18, 2015

@jkafader
Do you mean install full JQuery? or the lite version that comes with Angular?

@jkafader
Do you mean install full JQuery? or the lite version that comes with Angular?

@jkafader

This comment has been minimized.

Show comment
Hide comment
@jkafader

jkafader Sep 18, 2015

@RogelioGaytan
full jQuery. this plugin works by extending jQuery, which I don't think is possible (I may be wrong) in jqLite (the angular jquery-ish thing).

@RogelioGaytan
full jQuery. this plugin works by extending jQuery, which I don't think is possible (I may be wrong) in jqLite (the angular jquery-ish thing).

@RogelioGaytan

This comment has been minimized.

Show comment
Hide comment
@RogelioGaytan

RogelioGaytan Sep 18, 2015

@jkafader
Thanks, I'll try your directive example

@jkafader
Thanks, I'll try your directive example

@csaftoiu

This comment has been minimized.

Show comment
Hide comment
@csaftoiu

csaftoiu Nov 4, 2015

Thanks for providing this directive. Question: What's the purpose of this part of the code?

            scope.$apply(function(){
                ngModel.$setViewValue(ev.date);
            }); 

If I remove it, it seems to work in precisely the same way: changes to the date picker change the underlying variable that ng-model= specifies.

I'm having some difficulty in that I want the model value to be a Date object, not a string of the formatted date. But I'm new to angular and am having trouble getting this to work.

csaftoiu commented Nov 4, 2015

Thanks for providing this directive. Question: What's the purpose of this part of the code?

            scope.$apply(function(){
                ngModel.$setViewValue(ev.date);
            }); 

If I remove it, it seems to work in precisely the same way: changes to the date picker change the underlying variable that ng-model= specifies.

I'm having some difficulty in that I want the model value to be a Date object, not a string of the formatted date. But I'm new to angular and am having trouble getting this to work.

@jkafader

This comment has been minimized.

Show comment
Hide comment
@jkafader

jkafader Nov 9, 2015

That part of the code does the reverse binding, that is, if the model changes, it updates the datepicker.

jkafader commented Nov 9, 2015

That part of the code does the reverse binding, that is, if the model changes, it updates the datepicker.

@csaftoiu

This comment has been minimized.

Show comment
Hide comment
@csaftoiu

csaftoiu Nov 9, 2015

How so? That only gets executed on fdatepicker.on('changeDate', ...), that is, when the date changes on the datepicker. It won't get triggered if the model changes. For that you'd need to $watch the ngModel's value somehow. Something like:

var datepicker = $(element).fdatepicker [...] .data('datepicker');
ngModel.$render = function () {
    datepicker.update(ngModel.$modelValue);
}

csaftoiu commented Nov 9, 2015

How so? That only gets executed on fdatepicker.on('changeDate', ...), that is, when the date changes on the datepicker. It won't get triggered if the model changes. For that you'd need to $watch the ngModel's value somehow. Something like:

var datepicker = $(element).fdatepicker [...] .data('datepicker');
ngModel.$render = function () {
    datepicker.update(ngModel.$modelValue);
}
@csaftoiu

This comment has been minimized.

Show comment
Hide comment
@csaftoiu

csaftoiu Nov 9, 2015

I made a more sophisticated directive for this for my own use. I haven't cleaned it up yet, but here's what I have so far.

Documentation you can view here.

Usage is something like this. HTML:

<date-picker ng-model="travelTime" pick-time
             format="yyyy-mm-dd hh:ii"
             ng-mindate="today"></date-picker>

Controller:

$scope.travelTime = new Date();
var now = new Date();
$scope.today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

You can pass arguments for the format and the language, and an option whether to pick the time. It also dynamically binds ng-mindate and ng-maxdate.

csaftoiu commented Nov 9, 2015

I made a more sophisticated directive for this for my own use. I haven't cleaned it up yet, but here's what I have so far.

Documentation you can view here.

Usage is something like this. HTML:

<date-picker ng-model="travelTime" pick-time
             format="yyyy-mm-dd hh:ii"
             ng-mindate="today"></date-picker>

Controller:

$scope.travelTime = new Date();
var now = new Date();
$scope.today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

You can pass arguments for the format and the language, and an option whether to pick the time. It also dynamically binds ng-mindate and ng-maxdate.

@najlepsiwebdesigner

This comment has been minimized.

Show comment
Hide comment
@najlepsiwebdesigner

najlepsiwebdesigner Nov 9, 2015

Owner

Hi!

When you'll finish this, we can add this to official documentation. Keep up
the good work!

Thanks

Ing. Peter Beňo

Web development & computer vision
http://about.me/peterbeno

On Mon, Nov 9, 2015 at 10:54 PM, Claudiu notifications@github.com wrote:

I made a more sophisticated directive for this for my own use. I haven't
cleaned it up yet, but here's what I have so far
https://gist.github.com/csaftoiu/0c930dd0edb11a71d7fc.

Documentation you can view here http://jsfiddle.net/owxk2r0z/.

Usage is something like this. HTML:
format="yyyy-mm-dd hh:ii"
ng-mindate="today">

Controller:
$scope.travelTime = new Date();
var now = new Date();
$scope.today = new Date(now.getFullYear(), now.getMonth(), now.getDate());


Reply to this email directly or view it on GitHub
#55 (comment)
.

Hi!

When you'll finish this, we can add this to official documentation. Keep up
the good work!

Thanks

Ing. Peter Beňo

Web development & computer vision
http://about.me/peterbeno

On Mon, Nov 9, 2015 at 10:54 PM, Claudiu notifications@github.com wrote:

I made a more sophisticated directive for this for my own use. I haven't
cleaned it up yet, but here's what I have so far
https://gist.github.com/csaftoiu/0c930dd0edb11a71d7fc.

Documentation you can view here http://jsfiddle.net/owxk2r0z/.

Usage is something like this. HTML:
format="yyyy-mm-dd hh:ii"
ng-mindate="today">

Controller:
$scope.travelTime = new Date();
var now = new Date();
$scope.today = new Date(now.getFullYear(), now.getMonth(), now.getDate());


Reply to this email directly or view it on GitHub
#55 (comment)
.

@bodhisatwag

This comment has been minimized.

Show comment
Hide comment
@bodhisatwag

bodhisatwag Dec 8, 2015

https://github.com/bodhisatwag/foundation-angular-datepicker

This is an advanced version with all the bug fixes and new additions.

https://github.com/bodhisatwag/foundation-angular-datepicker

This is an advanced version with all the bug fixes and new additions.

@JohnLockwood

This comment has been minimized.

Show comment
Hide comment
@JohnLockwood

JohnLockwood Jan 16, 2016

@jkafader - awesome, grabbed your code, worked like a champ, thanks!

@jkafader - awesome, grabbed your code, worked like a champ, thanks!

@bodhisatwag

This comment has been minimized.

Show comment
Hide comment
@bodhisatwag

bodhisatwag Jan 18, 2016

Thanks a lot.

On Sat, Jan 16, 2016 at 9:45 PM, John Lockwood notifications@github.com
wrote:

@jkafader https://github.com/jkafader - awesome, grabbed your code,
worked like a champ, thanks!


Reply to this email directly or view it on GitHub
#55 (comment)
.

Thanks & Regards,
Bodhisatwa Ghosh

Thanks a lot.

On Sat, Jan 16, 2016 at 9:45 PM, John Lockwood notifications@github.com
wrote:

@jkafader https://github.com/jkafader - awesome, grabbed your code,
worked like a champ, thanks!


Reply to this email directly or view it on GitHub
#55 (comment)
.

Thanks & Regards,
Bodhisatwa Ghosh

@najlepsiwebdesigner

This comment has been minimized.

Show comment
Hide comment
@najlepsiwebdesigner

najlepsiwebdesigner Feb 3, 2016

Owner

Hi all Angular fans!
I was wondering - would it be possible for you to update examples page with working Angular example? I'll gladly accept pull request like this..

Hi all Angular fans!
I was wondering - would it be possible for you to update examples page with working Angular example? I'll gladly accept pull request like this..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment