Datepicker from UI-Bootstrap with non-US format

When I was trying to use a date format like “dd.MM.yyyy” in a datepicker element from the UI-Bootstrap library then I came across the problem that I couldn’t easily add a date by manual input.

I fixed that by writing a directive, which handles the input differently on that date format. I admit that it looks more like a hack but it works pretty good. Hopefully this functionality will be supported soon! Additionally the popup now closes automatically on “Enter” or “Tab”, which I prefer instead of tabbing through each date-field.


This entry was posted in AngularJS and tagged , . Bookmark the permalink.

10 Responses to Datepicker from UI-Bootstrap with non-US format

  1. Thank you very much for this solution! It works great.

    I completely removed jQuery from my project today and that caused some error messages for the element.on(‘keydown’) and element.on(‘blur’) methods. AngularJS has a built-in lite version of jQuery that doesn’t support these actions. However, when I remove those two functions, it still works.

    I’m using AngularJS 1.2.4 with ui.boostrap 0.7.0.

    • André says:

      Great that it helped you!
      The code you mentioned you can remove … it just adds better keyboard behavior in case you have a form and want to jump from one field to the next. The default behavior is quite bad in my opinion.

  2. Bernd Brecher says:

    Very nice! Thanks alot! Without you I would have had to spend the whole night digging into the source of angular-bootstrap to catch tommorrows deadline. You sir are a hero!

  3. Jörn Krüger says:

    Need some time to find out, that I had to add the “is-open=’varOpen’” attribute on the input element and “var $scope.varOpen;” inside the Controller to get “close-on-tab” working. The rest is working as expected. Now I have to extend it for some magic for two-year input (04 -> 2004; not 1904).

    Thank you.

  4. Fabian Biberger says:

    Does anybody else have problems with the directive in version 0.10.0 of angular-ui? I need to click the dates twice when using fix-date. I couldn’t figure out any problem with the directive for myself. Can anybody help?

    Thanks you for the great code.

    • Fabian Biberger says:

      OK, everything’s fine with the directive. It was some minifying issue. Angular and minifying do not go well together…

  5. Eduardo says:

    Thank you, very helpful to me. Using UI Bootstrap 0.8.0.

  6. Mehmedju says:


    Could you tell me, how I can use this directive.
    I’ve done


    but it doesn’t recognize this directive.
    Besides that, I want to disable automatically parsing on the input field.
    For example, when I press backspace, it’s being done automatically parsing into new date.
    How I can make that block/disable any action on this ?


  7. Sebastian says:

    12.31.2014, 12.31.20 are still valid dates but they do not match the format given, so they are error prown.
    But thank you anyway, it gave me the step in the right direction ;-).

Leave a Reply

Your email address will not be published. Required fields are marked *

+ three = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">