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

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

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

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

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:

Image7

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

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!

About these ads

8 responses to “DatePicker Range in LightSwitch HTML Client

  1. Nice post… hadn’t realized that about the DatePicker before.

    After a bit of experimentation, I see that the limit that Lightswitch is enforcing is on the total number of options in the select control, rather than the specific years chosen… it will let you, for instance, set a range of 1800-1850. Scrolling through long drop-downs can be a bit inconvenient… I guess they decided to discourage that practice.

    As you point out, the model.json is a generated file, and as such any changes you make will get clobbered on rebuild.

    The client.lsml file, on the other hand, is authoritative. If you change the minimum and maximum years there, they should persist.

  2. Actually… scratch what I said above… I was confusing this issue with something else.

    I guess I’m misunderstanding what you’re describing. I can set the minimum and maximum years to any values… for instance a range from 1600-2100… and it works… the drop-down shows all years in that range. What am I missing?

    • Hi Jewel,
      That is odd for me any min/max entered in the designer is used for validation but only restricts the options displayed if they are more restrictive than 1930 – 2030. I cannot think of any updates to this, and I debugged it through msls-1.0.0.js, it takes the values from the base control.
      Do you have any idea?
      Cheers
      Dave

    • Now I see. The properties window in a MobileClient has two new Year properties under General than the RichClient. I missed those as they are off-screen. Those are the values that are put in model.JSON and they work in conjunction with the minimum and maximum dates in the entity designer validation.
      Thanks for helping clear that up, that is a far better way of modifying the vales in the model.JSON file LOL!
      Cheers
      Dave

      • Ahhh… ok I see now… you were changing the server-side validation at the entity level (the minimum and maximum values), while I was changing the MinimumYear and MaximumYear for the DatePicker control on the screen.

        Thanks for clearing that up!

    • I have updated the article to wrap-up but there are still a few loose-ends, thanks!

  3. Pingback: Dew Drop – June 13, 2013 (#1,567) | Alvin Ashcraft's Morning Dew

  4. Pingback: LightSwitch Community & Content Rollup– June 2013 - Beth Massi - Sharing the goodness - Site Home - MSDN Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s