Dynamic javascript with IE's conditional comments?

Question

I've got a legacy web app that I'm trying to modify a bit. I've added a jQueryUI datetime picker (http://trentrichardson.com/examples/timepicker/) to several pages (tied to a text input) so the user can select start/end date/times. I have it configured to use 'select' boxes instead of 'sliders' for the hour/minute selection. This works fine in all the browsers I've tested it with except for IE8 (haven't tested in earlier versions of IE). In IE8, it's very slow to respond to date selections. Here's the javascript code that creates the datetime picker:

$("#dtpStart").datetimepicker({
  controlType: "select",
  timeFormat: "HH:mm",
  stepMinute: 15
});

If I remove the controlType: "select", line, the widget defaults to using sliders, and doing that speeds up it's usage in IE8. So I'd like to be able to only include that line if the user is using IE > 8. That way, IE8 and earlier would get sliders while IE9+ and non-IE browsers would get the select boxes.

I thought I might be able to do that by using IE's conditional comments but I can't get it to work. I've never used them before though and might not be doing it right. I've tried variations of:

$("#dtpStart").datetimepicker({
  <!--[if ! IE]><!-->    controlType: "select",<!--<![endif]-->
  timeFormat: "HH:mm",
  stepMinute: 15
});

with no success; I still end up with sliders no matter what browser I'm using. I'm guessing that's because I'm in the middle of defining the datetimepicker when I'm trying to use the conditional comments?

Any suggestions on a way to do this?

Answer 1

You can try Conditional Compilation:

var datetimePickerObject = {
  controlType: "select",
  timeFormat: "HH:mm",
  stepMinute: 15
};
/*@cc_on
delete datetimePickerObject.controlType;
@*/
$("#dtpStart").datetimepicker(datetimePickerObject);