mirror of
https://github.com/jupyter/notebook.git
synced 2025-01-06 11:35:24 +08:00
Update date picker widget example
Closes gh-6610
This commit is contained in:
Thomas Kluyver
parent
70d57aac76
commit
0dba8bd7e3
@ -14,7 +14,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 1,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -70,7 +70,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -108,27 +108,11 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
"**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 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 5,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -248,7 +209,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 6,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -278,47 +239,18 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
" });\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 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
" });\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 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
" });\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 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 10,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -550,7 +400,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 11,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -568,22 +418,11 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 13,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -622,7 +461,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 14,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -659,7 +498,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 15,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -682,7 +521,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 16,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -709,7 +548,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 17,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -749,7 +588,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 18,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -811,80 +650,18 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
" });\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 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 21,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -988,7 +765,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 22,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -1000,7 +777,7 @@
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 23,
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
@ -1012,25 +789,23 @@
|
||||
},
|
||||
{
|
||||
"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 @@
|
||||
"<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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user