from __future__ import print_function # For py 2.7 compat

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook
from IPython.utils.traitlets import Unicode # Used to declare attributes of our widget

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)

%%javascript

require(["widgets/js/widget"], function(WidgetManager){

});

%%javascript

require(["widgets/js/widget"], function(WidgetManager){
    
    // Define the DatePickerView
    var DatePickerView = IPython.DOMWidgetView.extend({
        render: function(){ this.$el.text('Hello World!'); },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DatePickerView', DatePickerView);
});

DateWidget()

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)
    value = Unicode(sync=True)

%%javascript

require(["widgets/js/widget"], function(WidgetManager){
    
    // Define the DatePickerView
    var DatePickerView = IPython.DOMWidgetView.extend({
        render: function(){
            
            // Create the date picker control.
            this.$date = $('<input />')
                .attr('type', 'date')
                .appendTo(this.$el);
        },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DatePickerView', DatePickerView);
});

%%javascript

require(["widgets/js/widget"], function(WidgetManager){
    
    // Define the DatePickerView
    var DatePickerView = IPython.DOMWidgetView.extend({
        render: function(){
            
            // Create the date picker control.
            this.$date = $('<input />')
                .attr('type', 'date')
                .appendTo(this.$el);
        },
        
        update: function() {
            
            // Set the value of the date control and then call base.
            this.$date.val(this.model.get('value')); // ISO format "YYYY-MM-DDTHH:mm:ss.sssZ" is required
            return DatePickerView.__super__.update.apply(this);
        },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DatePickerView', DatePickerView);
});

%%javascript


require(["widgets/js/widget"], function(WidgetManager){
    
    // Define the DatePickerView
    var DatePickerView = IPython.DOMWidgetView.extend({
        render: function(){
            
            // Create the date picker control.
            this.$date = $('<input />')
                .attr('type', 'date')
                .appendTo(this.$el);
        },
        
        update: function() {
            
            // Set the value of the date control and then call base.
            this.$date.val(this.model.get('value')); // ISO format "YYYY-MM-DDTHH:mm:ss.sssZ" is required
            return DatePickerView.__super__.update.apply(this);
        },
        
        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)
        events: {"change": "handle_date_change"},
        
        // Callback for when the date is changed.
        handle_date_change: function(event) {
            this.model.set('value', this.$date.val());
            this.touch();
        },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DatePickerView', DatePickerView);
});

my_widget = DateWidget()
display(my_widget)

my_widget

my_widget.value

my_widget.value = "1998-12-01" # December 1st, 1998

# Import the dateutil library to parse date strings.
from dateutil import parser

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)
    value = Unicode(sync=True)
    description = Unicode(sync=True)

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)
    value = Unicode(sync=True)
    description = Unicode(sync=True)

    # This function automatically gets called by the traitlet machinery when
    # value is modified because of this function's name.
    def _value_changed(self, name, old_value, new_value):
        pass

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)
    value = Unicode(sync=True)
    description = Unicode(sync=True)
    
    # This function automatically gets called by the traitlet machinery when
    # value is modified because of this function's name.
    def _value_changed(self, name, old_value, new_value):
        
        # Parse the date time value.
        try:
            parsed_date = parser.parse(new_value)
            parsed_date_string = parsed_date.strftime("%Y-%m-%d")
        except:
            parsed_date_string = ''
        
        # Set the parsed date string if the current date string is different.
        if self.value != parsed_date_string:
            self.value = parsed_date_string

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView', sync=True)
    value = Unicode(sync=True)
    description = Unicode(sync=True)
    
    def __init__(self, **kwargs):
        super(DateWidget, self).__init__(**kwargs)
        
        self.validate = widgets.CallbackDispatcher()
    
    # This function automatically gets called by the traitlet machinery when
    # value is modified because of this function's name.
    def _value_changed(self, name, old_value, new_value):
        
        # Parse the date time value.
        try:
            parsed_date = parser.parse(new_value)
            parsed_date_string = parsed_date.strftime("%Y-%m-%d")
        except:
            parsed_date_string = ''
        
        # Set the parsed date string if the current date string is different.
        if old_value != new_value:
            valid = self.validate(parsed_date)
            if valid in (None, True):
                self.value = parsed_date_string
            else:
                self.value = old_value
                self.send_state() # The traitlet event won't fire since the value isn't changing.
                                  # We need to force the back-end to send the front-end the state
                                  # to make sure that the date control date doesn't change.

%%javascript

require(["widgets/js/widget"], function(WidgetManager){
    
    // Define the DatePickerView
    var DatePickerView = IPython.DOMWidgetView.extend({
        render: function(){
            this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make
                                                        it fit with the other built in widgets.*/
            // Create a label.
            this.$label = $('<div />')
                .addClass('widget-hlabel')
                .appendTo(this.$el)
                .hide(); // Hide the label by default.
            
            // Create the date picker control.
            this.$date = $('<input />')
                .attr('type', 'date')
                .appendTo(this.$el);
        },
        
        update: function() {
            
            // Set the value of the date control and then call base.
            this.$date.val(this.model.get('value')); // ISO format "YYYY-MM-DDTHH:mm:ss.sssZ" is required
            
            // Hide or show the label depending on the existance of a description.
            var description = this.model.get('description');
            if (description == undefined || description == '') {
                this.$label.hide();
            } else {
                this.$label.show();
                this.$label.text(description);
            }
            
            return DatePickerView.__super__.update.apply(this);
        },
        
        // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)
        events: {"change": "handle_date_change"},
        
        // Callback for when the date is changed.
        handle_date_change: function(event) {
            this.model.set('value', this.$date.val());
            this.touch();
        },
    });
    
    // Register the DatePickerView with the widget manager.
    WidgetManager.register_widget_view('DatePickerView', DatePickerView);
});

# Add some additional widgets for aesthetic purpose
display(widgets.TextWidget(description="First:"))
display(widgets.TextWidget(description="Last:"))

my_widget = DateWidget()
display(my_widget)
my_widget.description="DOB:"

my_widget = DateWidget()
display(my_widget)

def require_2014(date):
    return not date is None and date.year == 2014
my_widget.validate.register_callback(require_2014)

# Try setting a valid date
my_widget.value = "December 2, 2014"

# Try setting an invalid date
my_widget.value = "June 12, 1999"

my_widget.value