This will update the state object of my widget and call a this.invalidate() method that will update my widget based on the new state changes. This invalidate() method will be replaced by a @watch() decorator on properties in a future version of Dojo to simplify updates. Other than that, I pretty much followed the Calendar example provided in the documentation.

But let’s make things a little more interesting. I want an input box that will display my selected date. For this, I’m going to use the EnhancedTextInput.

I wanted to use the EnhancedTextInput because it lets me add a button to it using the addonAfter contents. I found this to be very useful! You’ll notice I’m using Font Awesome to help me out here. Since we’re at it, let’s talk about some styling.

AWESOME!! We now have a fully interactive DatePicker. But we’re not updating the value of the EnhancedTextInput with the selected date. But we can’t just show the date any normal way. We want our DatePicker to support various locales. We can do with @dojo/framework/i18n.

Internationalization

I’m not going to get in to detail on using i18n, it’s incredibly powerful. But we’re going to use it to support formatting our dates accordingly.

We are going to use the formatDate() method to format our date in the EnhancedTextInput accordingly. I could take this a step further and provide the Pick a date text in various locales, which isn’t difficult to do. You can read more about supporting various languages here.

Put it all together

And voila! You have a finished and useable DatePicker with styling and internationalization. I’m sure you could make this look better than I did, I never claimed to be a good designer, I just know enough to get things done.