DatePicker Range in LightSwitch HTML Client

DatePicker Ranges in Visual Studio 2012 LightSwitch

The HTML Client has a DatePicker control by default that displays a touch sensitive control with a range of dates from 1930 to 2030.

Default DatePicker Range

This does seem to be fine as a start but what if you want to alter this behaviour. LightSwitch entity designer allows you to set minimum and maximum values for validation purposes. When you set these bounds the DatePicker looks like this:

DatePicker Range with Min/Max

For this DateTime field the minimum and maximum values have been set to restrict the date to between 1990 and 2020. The DatePicker dropdown accordingly is then only populated with the valid years.

If you have an application that has dates outside of the default range of 1930 to 2030 what happens? Perhaps your application has geneology, historic or forecast data with dates outside.

DatePicker with Year out of range

In this example we have a date outside of the default range, the year 2040, with no minimum and maximum range set. The date comes through from the OData service and is correctly formatted for displayed. For data entry the Year dropdown has the year 2040 added as an extra option so that the existing year can be set and selected. Unfortunately it cannot be changed to a year outside of 1930 to 2030, or 2040 though.

If you want to display a range of years outside of the default range of 1930 to 2030 is there a problem? Are you going to have to resign yourself to some javascript coding, perhaps in a post render event or possibly use another custom DatePicker control of which there are many.

But then take a look inside the generated model.JSON file.

DatePicker control in model.JSON

The custom controls are there and that is where the LightSwitch ‘intrinsic’ Year range settings are defined.

This is a bit of a LightSwitch Hack but if you edit the model.JSON file and set the ‘MinimumYear’ and ‘MaximumYear’ property values to for example 2000 and 2050 then we can get this effect:

Now we can change the year from 2040 to any range between 2000 and 2050. Also, if we combine this with minimum and maximum dates in the LightSwitch entity designer we can control the years displayed in all DatePicker Year dropdowns in our mobile application.

It turns out that in the LightSwitch screen designer for a MobileClient DatePicker control, there are two additional properties: MinimumYear and MaximumYear. These are the values that make there way into the model.JSON file.

HTML DatePicker Properties

So the default date range of 1930 to 2030 is hard-wired in to HTML client apps todate unless you change them. I would prefer an option for a rolling display of years along the lines of from -20 to +15 years (user specified) as this would future-proof our apps which will be looking a bit old come the mid-2020’s.

So if you are reading this in 2028 you may have to hack your model.JSON file after all!

If you need more than I implore you to seek other custom DatePicker controls and, failing that, just set the control type to a good old “text box“!

Conclusion

You can get the LightSwitch HTML Client DatePicker control to display custom ranges in the year dropdown. You can do so without writing a line of javascript code, without hacking the model.JSON file.

Be aware that the DatePicker behaviour is different from that of the RichClient so do take this into account when building your HTML client apps.

We did look into altering the base control properties at runtime without success and ran out of time for now.

We will update this blog post with alternative solutions as appropriate.

If you know better, please let us know!