javascript – SP2013 Custom List – Date & Time Column

From the OP’s comments

I had planned to use CSS for both input fields but applying CSS to
‘.ms-dttimeinput’ didn’t seem to work. So a colleague helped me go
down the jQuery route.

First, let’s look at the “New” form. I am looking at the default SP 2013 forms, you say you have a custom form, so you may need to do some inspection of the HTML to see if it is structured any differently in your situation, if so, you may need to make adjustments to any answers I come up with.

Looking at the way SharePoint renders the date and time inputs (in the New form), it looks like it renders the whole thing as a mini-table, and the .ms-dtinput and .ms-dttimeinput classes are actually applied to table cells (<td> elements), which may be difficult to control the width of directly. Then, it seems that the .ms-input class is applied to the small text box that is for the date portion of the date/time. We can see the <select> elements for the time portion, but unfortunately it seems that SharePoint doesn’t add any classes there we can take advantage of.

screen shot of html structure of date time input table

The pure CSS you use to control the width of the date picker works because

.ms-dtinput .ms-input { /* style */ }

is basically saying “find all elements that have a class of .ms-dtinput (which is the <td>) and then find any child elements inside that have a class of .ms-input (which is the actual <input>) and apply this style to them.”

When you say that using a plain CSS selector of .ms-dttimeinput did not work to change the width of the <select>s, of course it didn’t, the .ms-dttimeinput class is on the <td> element that holds the selects.

Now, your jQuery code of

$(".ms-dttimeinput").find("select")

is saying something very similar to your CSS that targets the date textbox. It’s saying: “find all elements that have a class of .ms-dttimeinput (again, the <td>) and then traverse down through the children and ‘find’ any <select> elements.”

You can express this in pure CSS the same way you set up the selectors for the date textbox: specifying a selector for the parent, followed by a space (indicating to then look at children at any depth), followed by a selector for the children:

.ms-dttimeinput select { /* style */ }

The problem you are going to run into here is that that selector will target both the hours and the minutes <select>s, and you want them to be different widths.

You are solving that problem in your jQuery by using an indexer to apply different styles to each of the different elements found by jQuery:

// this is actually going to find multiple elements, because
// it is saying "find _all_ .ms-dttimeinput, and then find
// _all_ child <select> elements

$(".ms-dttimeinput").find("select")

// this says "only use the first one of that whole collection you found"

$(".ms-dttimeinput").find("select")(0)

Originally in my first comment, I hinted that you might be able to use the :nth-child() pseudo-class selector to target the individual <select> elements, but looking back again at the HTML, there seem to be some <label> elements mixed in there, so it might be clearer and more effective to use the :nth-of-type() psuedo-class selector.

Using that, you could do

.ms-dttimeinput select:nth-of-type(1) {
    width: 80px;
}

.ms-dttimeinput select:nth-of-type(2) {
    width: 50px;
}

What that is saying is: “find all elements with a class of .ms-dttimeinput (the <td>), and then apply this style to only the first <select> child element” (in the case of nth-of-type(1)).

Now, looking at the “Edit” form…. I actually don’t see any difference in how the default date/time input is rendered in the “Edit” form vs. the “New” form, it’s still the same mini-table, with the same classes on the <td> elements, etc. So I’m not sure exactly why your solution is not working on the “Edit” form.