Time Picker in Lightswitch

What happens when I just want to select a time?

I recently took on an additional project, where the customer desperately wanted a contact management database and wanted to be able to organise events and invite people to the event.


Aside from the funky requirements in this scenario, sometimes you just want a time picker.  However because Lightswitch HTML Client does not have its own "Time" datatype, the only option you have is to use the datetime picker.  So what do I do if I just want to display the time part.


Apparently I was not the only one struggling with this concept as the topic is largely unsolved on stack exchange, experts exchange, stack overflow etc.


One individual Sven Elm had suggested hiding the control with adding in a class.  I did this in the controls Post_Render event.

myapp.AddEditEvents.FinishTime_postRender = function (element, contentItem) {
 $(element).addClass("hideDayMonthYear");
};

Then within the user-customization.css file one can add

.hideDayMonthYear .msls-dateTimePicker-day  {
    visibility: hidden;
}

.hideDayMonthYear .msls-dateTimePicker-month  {
    visibility: hidden;
}

.hideDayMonthYear .msls-dateTimePicker-year  {
    visibility: hidden;
}

This was almost what I wanted, but it just hid the control and left the rest of the html tags behind so the ghost control was still taking up space.


I knew the option was now to look at JQuery and remove the necessary elements but I was having difficulty getting Lightswitch JQuery module to correctly identity the child control to remove.  In the end I found what I was looking forand 'oila, no more DatePart of the datetime picker.

myapp.AddEditEvents.FinishTime_postRender = function (element, contentItem) {
// Hide the Date part of the Control by removing the first fieldset tag it comes to    $(element).find('fieldset:first').remove();

};

I don't believe anyone else has suggested this solution within the lightswitch community.  They all talk about using a third part set of controls.  For me it wasn't a case of functionality, just that it was displaying too much information.