diff --git a/elm-package.json b/elm-package.json
index 2d17e3f..08f6a1e 100644
--- a/elm-package.json
+++ b/elm-package.json
@@ -58,7 +58,7 @@
     "deadfoxygrandpa/elm-test": "3.0.1 <= v < 4.0.0",
     "laszlopandy/elm-console" : "1.0.3 <= v < 2.0.0",
     "coreytrampe/elm-vendor": "2.0.0 <= v < 3.0.0",
-    "mgold/elm-date-format": "1.0.3 <= v < 2.0.0",
+    "rluiten/elm-date-extra": "2.2.1 <= v < 3.0.0",
     "evancz/elm-markdown": "2.0.0 <= v < 3.0.0",
     "evancz/virtual-dom": "2.1.0 <= v < 3.0.0",
     "evancz/elm-effects": "2.0.0 <= v < 3.0.0",
diff --git a/source/Ui/Calendar.elm b/source/Ui/Calendar.elm
index 33fb67a..ff72f3b 100644
--- a/source/Ui/Calendar.elm
+++ b/source/Ui/Calendar.elm
@@ -20,7 +20,8 @@ import Html.Events exposing (onMouseDown)
 import Html exposing (node, text, span)
 import Html.Lazy
 
-import Date.Format exposing (format)
+import Date.Format exposing (isoDateFormat, format)
+import Date.Config.Configs as DateConfigs
 import Time exposing (Time)
 import Ext.Signal
 import Ext.Date
@@ -47,6 +48,7 @@ type alias Model =
   , date : Date.Date
   , disabled : Bool
   , readonly : Bool
+  , locale : String
   }
 
 {-| Actions that a calendar can make. -}
@@ -68,6 +70,7 @@ init date =
   , readonly = False
   , value = date
   , date = date
+  , locale = "en_us"
   }
 
 {-| Initializes a calendar with the given value and value address.
@@ -82,6 +85,7 @@ initWithAddress valueAddress date =
   , readonly = False
   , value = date
   , date = date
+  , locale = "en_us"
   }
 
 {-| Updates a calendar. -}
@@ -154,7 +158,7 @@ render address model =
                         , align = "stretch"
                         , direction = "row" } []
         [ Ui.icon "chevron-left" (not model.readonly) previousAction
-        , node "div" [] [text (format "%Y - %B" month)]
+        , node "div" [] [text (format (DateConfigs.getConfig model.locale) "%Y - %B" month)]
         , Ui.icon "chevron-right" (not model.readonly) nextAction
         ]
   in
diff --git a/source/Ui/DatePicker.elm b/source/Ui/DatePicker.elm
index 983aed2..0d0092d 100644
--- a/source/Ui/DatePicker.elm
+++ b/source/Ui/DatePicker.elm
@@ -23,7 +23,8 @@ import Ext.Signal
 import Effects
 import Dict
 
-import Date.Format exposing (format)
+import Date.Format exposing (isoDateFormat, format)
+import Date.Config.Configs as DateConfigs
 import Time
 import Date
 
@@ -49,6 +50,7 @@ type alias Model =
   , dropdownPosition : String
   , closeOnSelect : Bool
   , format : String
+  , locale : String
   , disabled : Bool
   , readonly : Bool
   , open : Bool
@@ -77,7 +79,8 @@ init address date =
   , dropdownPosition = "bottom"
   , closeOnSelect = False
   , calendar = Calendar.init date
-  , format = "%Y-%m-%d"
+  , format = isoDateFormat
+  , locale = "en_us"
   , disabled = False
   , readonly = False
   , open = False
@@ -97,7 +100,8 @@ initWithAddress valueAddress address date =
   , dropdownPosition = "bottom"
   , closeOnSelect = False
   , calendar = Calendar.initWithAddress (forwardTo address Select) date
-  , format = "%Y-%m-%d"
+  , format = isoDateFormat
+  , locale = "en_us"
   , disabled = False
   , readonly = False
   , open = False
@@ -179,7 +183,7 @@ render address model =
                                        , ("readonly", model.readonly)
                                        ]
                            ] ++ actions ++ (Ui.tabIndex model))
-      [ div [] [text (format model.format model.calendar.value)]
+      [ div [] [text (format (DateConfigs.getConfig model.locale) model.format model.calendar.value)]
       , Ui.icon "calendar" False []
       , Dropdown.view model.dropdownPosition
         [ node "ui-dropdown-overlay" [onClick address Blur] []