Use Foundation Datepicker with AngularJS

[kornatzky]

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

[najlepsiwebdesigner]

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 [email protected] wrote:

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

— Reply to this email directly or view it on GitHub https://github.com/najlepsiwebdesigner/foundation-datepicker/issues/55.

[noahmiller]

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]

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]

@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]

@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]

@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]

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]

You can then write your datepicking text input like this:

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

[RogelioGaytan]

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

[jkafader]

@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]

@jkafader Thanks, I'll try your directive example

[csaftoiu]

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]

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

[csaftoiu]

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]

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]

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 [email protected] 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 https://github.com/najlepsiwebdesigner/foundation-datepicker/issues/55#issuecomment-155210875 .

[bodhisatwag]

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

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

[JohnLockwood]

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

[bodhisatwag]

Thanks a lot.

On Sat, Jan 16, 2016 at 9:45 PM, John Lockwood [email protected] 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 https://github.com/najlepsiwebdesigner/foundation-datepicker/issues/55#issuecomment-172220263 .

Thanks & Regards, Bodhisatwa Ghosh

[najlepsiwebdesigner]

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..