Update date picker widget example

Closes gh-6610

examples/Interactive Widgets/Date Picker Widget.ipynb

@@ -14,7 +14,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -70,7 +70,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -108,27 +108,11 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x109491690>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
@@ -146,53 +130,30 b''
     "**A render function must be defined**.\n",
     "The render function is used to render a widget view instance to the DOM.\n",
     "For now, the render function renders a div that contains the text *Hello World!*\n",
-    "Lastly, the view needs to be registered with the widget manager.\n",
+    "Lastly, the view needs to be registered with the widget manager, for which we need to load another module.\n",
     "\n",
     "**Final JavaScript code below:**"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "    \n",
-       "    // Define the DatePickerView\n",
-       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
-       "        render: function(){ this.$el.text('Hello World!'); },\n",
-       "    });\n",
-       "    \n",
-       "    // Register the DatePickerView with the widget manager.\n",
-       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x1094917d0>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
-    "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
     "    \n",
     "    // Define the DatePickerView\n",
-    "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
+    "    var DatePickerView = widget.DOMWidgetView.extend({\n",
     "        render: function(){ this.$el.text('Hello World!'); },\n",
     "    });\n",
     "    \n",
     "    // Register the DatePickerView with the widget manager.\n",
-    "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+    "    manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
     "});"
    ]
   },
@@ -212,7 +173,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -248,7 +209,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -278,47 +239,18 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 7,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "    \n",
-       "    // Define the DatePickerView\n",
-       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
-       "        render: function(){\n",
-       "            \n",
-       "            // Create the date picker control.\n",
-       "            this.$date = $('<input />')\n",
-       "                .attr('type', 'date')\n",
-       "                .appendTo(this.$el);\n",
-       "        },\n",
-       "    });\n",
-       "    \n",
-       "    // Register the DatePickerView with the widget manager.\n",
-       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x109491750>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
-    "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
     "    \n",
     "    // Define the DatePickerView\n",
-    "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
+    "    var DatePickerView = widget.DOMWidgetView.extend({\n",
     "        render: function(){\n",
     "            \n",
     "            // Create the date picker control.\n",
@@ -329,7 +261,7 b''
     "    });\n",
     "    \n",
     "    // Register the DatePickerView with the widget manager.\n",
-    "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+    "    manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
     "});"
    ]
   },
@@ -342,54 +274,18 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "    \n",
-       "    // Define the DatePickerView\n",
-       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
-       "        render: function(){\n",
-       "            \n",
-       "            // Create the date picker control.\n",
-       "            this.$date = $('<input />')\n",
-       "                .attr('type', 'date')\n",
-       "                .appendTo(this.$el);\n",
-       "        },\n",
-       "        \n",
-       "        update: function() {\n",
-       "            \n",
-       "            // Set the value of the date control and then call base.\n",
-       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
-       "            return DatePickerView.__super__.update.apply(this);\n",
-       "        },\n",
-       "    });\n",
-       "    \n",
-       "    // Register the DatePickerView with the widget manager.\n",
-       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x109491750>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
-    "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
     "    \n",
     "    // Define the DatePickerView\n",
-    "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
+    "    var DatePickerView = widget.DOMWidgetView.extend({\n",
     "        render: function(){\n",
     "            \n",
     "            // Create the date picker control.\n",
@@ -407,7 +303,7 b''
     "    });\n",
     "    \n",
     "    // Register the DatePickerView with the widget manager.\n",
-    "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+    "    manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
     "});"
    ]
   },
@@ -426,65 +322,19 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "    \n",
-       "    // Define the DatePickerView\n",
-       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
-       "        render: function(){\n",
-       "            \n",
-       "            // Create the date picker control.\n",
-       "            this.$date = $('<input />')\n",
-       "                .attr('type', 'date')\n",
-       "                .appendTo(this.$el);\n",
-       "        },\n",
-       "        \n",
-       "        update: function() {\n",
-       "            \n",
-       "            // Set the value of the date control and then call base.\n",
-       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
-       "            return DatePickerView.__super__.update.apply(this);\n",
-       "        },\n",
-       "        \n",
-       "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
-       "        events: {\"change\": \"handle_date_change\"},\n",
-       "        \n",
-       "        // Callback for when the date is changed.\n",
-       "        handle_date_change: function(event) {\n",
-       "            this.model.set('value', this.$date.val());\n",
-       "            this.touch();\n",
-       "        },\n",
-       "    });\n",
-       "    \n",
-       "    // Register the DatePickerView with the widget manager.\n",
-       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x109491b10>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
     "\n",
-    "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
     "    \n",
     "    // Define the DatePickerView\n",
-    "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
+    "    var DatePickerView = widget.DOMWidgetView.extend({\n",
     "        render: function(){\n",
     "            \n",
     "            // Create the date picker control.\n",
@@ -511,7 +361,7 b''
     "    });\n",
     "    \n",
     "    // Register the DatePickerView with the widget manager.\n",
-    "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+    "    manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
     "});"
    ]
   },
@@ -531,7 +381,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -550,7 +400,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -568,22 +418,11 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "u''"
-      ]
-     },
-     "execution_count": 12,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "my_widget.value"
    ]
@@ -597,7 +436,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -622,7 +461,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 14,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -659,7 +498,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 15,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -682,7 +521,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 16,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -709,7 +548,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 17,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -749,7 +588,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 18,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -811,80 +650,18 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 19,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "application/javascript": [
-       "\n",
-       "require([\"widgets/js/widget\"], function(WidgetManager){\n",
-       "    \n",
-       "    // Define the DatePickerView\n",
-       "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
-       "        render: function(){\n",
-       "            this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
-       "                                                        it fit with the other built in widgets.*/\n",
-       "            // Create a label.\n",
-       "            this.$label = $('<div />')\n",
-       "                .addClass('widget-hlabel')\n",
-       "                .appendTo(this.$el)\n",
-       "                .hide(); // Hide the label by default.\n",
-       "            \n",
-       "            // Create the date picker control.\n",
-       "            this.$date = $('<input />')\n",
-       "                .attr('type', 'date')\n",
-       "                .appendTo(this.$el);\n",
-       "        },\n",
-       "        \n",
-       "        update: function() {\n",
-       "            \n",
-       "            // Set the value of the date control and then call base.\n",
-       "            this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
-       "            \n",
-       "            // Hide or show the label depending on the existance of a description.\n",
-       "            var description = this.model.get('description');\n",
-       "            if (description == undefined || description == '') {\n",
-       "                this.$label.hide();\n",
-       "            } else {\n",
-       "                this.$label.show();\n",
-       "                this.$label.text(description);\n",
-       "            }\n",
-       "            \n",
-       "            return DatePickerView.__super__.update.apply(this);\n",
-       "        },\n",
-       "        \n",
-       "        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
-       "        events: {\"change\": \"handle_date_change\"},\n",
-       "        \n",
-       "        // Callback for when the date is changed.\n",
-       "        handle_date_change: function(event) {\n",
-       "            this.model.set('value', this.$date.val());\n",
-       "            this.touch();\n",
-       "        },\n",
-       "    });\n",
-       "    \n",
-       "    // Register the DatePickerView with the widget manager.\n",
-       "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
-       "});"
-      ],
-      "text/plain": [
-       "<IPython.core.display.Javascript at 0x1094eef90>"
-      ]
-     },
-     "metadata": {},
-     "output_type": "display_data"
-    }
-   ],
+   "outputs": [],
    "source": [
     "%%javascript\n",
     "\n",
-    "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+    "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
     "    \n",
     "    // Define the DatePickerView\n",
-    "    var DatePickerView = IPython.DOMWidgetView.extend({\n",
+    "    var DatePickerView = widget.DOMWidgetView.extend({\n",
     "        render: function(){\n",
     "            this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
     "                                                        it fit with the other built in widgets.*/\n",
@@ -928,7 +705,7 b''
     "    });\n",
     "    \n",
     "    // Register the DatePickerView with the widget manager.\n",
-    "    WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+    "    manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
     "});"
    ]
   },
@@ -948,15 +725,15 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 20,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
    "outputs": [],
    "source": [
     "# Add some additional widgets for aesthetic purpose\n",
-    "display(widgets.TextWidget(description=\"First:\"))\n",
-    "display(widgets.TextWidget(description=\"Last:\"))\n",
+    "display(widgets.Text(description=\"First:\"))\n",
+    "display(widgets.Text(description=\"Last:\"))\n",
     "\n",
     "my_widget = DateWidget()\n",
     "display(my_widget)\n",
@@ -972,7 +749,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 21,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -988,7 +765,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 22,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -1000,7 +777,7 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 23,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
@@ -1012,25 +789,23 b''
   },
   {
    "cell_type": "code",
-   "execution_count": 24,
+   "execution_count": null,
    "metadata": {
     "collapsed": false
    },
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "u'2014-12-02'"
-      ]
-     },
-     "execution_count": 24,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "my_widget.value"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -1039,8 +814,24 b''
     "<None>",
     null
    ]
-  ]
+  ],
+  "kernelspec": {
+   "display_name": "Python 3",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.4.2"
+  }
  },
  "nbformat": 4,
  "nbformat_minor": 0
-}
  No newline at end of file
+}