Skip to content
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
Open

Use Foundation Datepicker with AngularJS #55

kornatzky opened this issue Jul 6, 2014 · 20 comments

Comments

@kornatzky
Copy link

@kornatzky kornatzky commented Jul 6, 2014

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

@najlepsiwebdesigner
Copy link
Owner

@najlepsiwebdesigner najlepsiwebdesigner commented Jul 6, 2014

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

@noahmiller noahmiller commented 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.

@fulup-bzh
Copy link

@fulup-bzh fulup-bzh commented 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>
@ryankc33
Copy link

@ryankc33 ryankc33 commented 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.

@fulup-bzh
Copy link

@fulup-bzh fulup-bzh commented 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

@bodhisatwag
Copy link

@bodhisatwag bodhisatwag commented 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.

@jkafader
Copy link

@jkafader 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
Copy link

@jkafader 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
Copy link

@RogelioGaytan RogelioGaytan commented Sep 18, 2015

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

@jkafader
Copy link

@jkafader jkafader commented 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
Copy link

@RogelioGaytan RogelioGaytan commented Sep 18, 2015

@jkafader
Thanks, I'll try your directive example

@csaftoiu
Copy link

@csaftoiu 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
Copy link

@jkafader 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
Copy link

@csaftoiu 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
Copy link

@csaftoiu 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
Copy link
Owner

@najlepsiwebdesigner najlepsiwebdesigner commented Nov 9, 2015

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

@bodhisatwag bodhisatwag commented Dec 8, 2015

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

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

@JohnLockwood
Copy link

@JohnLockwood JohnLockwood commented Jan 16, 2016

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

@bodhisatwag
Copy link

@bodhisatwag bodhisatwag commented 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

@najlepsiwebdesigner
Copy link
Owner

@najlepsiwebdesigner najlepsiwebdesigner commented Feb 3, 2016

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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants
You can’t perform that action at this time.