SharePoint: Edit date and time in one minute increments

 

When working with SharePoint date fields you are offered a Date Picker that let’s you select time to the nearest five minutes.

While this works fine for most tasks and meetings, some manufacturing processes need the time set to the minute.

.

 

I first tried some quick JavaScript tricks to change the dropdown list to include 00 to 59, but it appears that the server side code only expects the dropdown to only have five minute steps and that causes an error on save. The next experiment was to create custom New and Edit forms to allow free form edits. Turns out you don’t have to do anything special to the Display form or the views as they just display whatever was entered.

 

The steps below generally follow what you will find in other blog sites or this MSDN article, expect for replacing the Date Picker fields with Text Box fields.

 

Test this on a “test” list before duplicating on a production list!

 

List Preparation

Before we can enter times, you need to configure your list to support Date and Time. Simply go to the list’s properties and edit the date field to support Date & Time.

 

Also add a Description to your date fields with a sample of an acceptable date. Remember that the user no longer has a date picker to make sure they select a valid date.  Something like: “Enter dates as mm/dd/yyyy hh:mm AM/PM”

 

Disable Attachments!

     

The following edits will not work if Attachments are enabled for the list. Go to List Settings, Advanced and disable attachments. I think this error is caused by having two web parts on the same page, each adding some common ID that confuses the page’s JavaScript  (I did a search and found this article, http://support.microsoft.com/kb/953271, but I did not try it’s solution.)

 

Fire Up SharePoint Designer!

SharePoint 2007 (and SPD 2007) example follows – 2010 is farther down the page…

Edit the “New” form  (NewForm.aspx)

SharePoint 2007 steps:

1. Open SharePoint Designer and open your site   “http://yourserver/sites/.yoursite”
2. In the Folder List expand Lists and your list
3. Double-click NewForm.aspx (you may want to make a copy of this file first)
4. Display the page in Design view
      
5. Right-click the existing web part and click Web Part Properties
6. Expand the Layout section and click Hidden and then click OK
      
   Note: Do not delete the existing web part!
7. Click below the existing web part (you may need to experiment to find a spot)
8. In the menu click Insert, SharePoint Controls and Custom List Form
         
9. Select your list (not just any list with a similar name, your list!)
       
10. Select the correct content type
11. Click New Item Form and click OK
12. Wait until the fields load
13. Click on the date field you want to change
14. If the “Common FormField Tasks” popup is not displayed, right-click the web part and select Show Common Control Tasks
       
15. Change the Format As to “Text Box”
16. Repeat for any other date fields you need to change (Start Date and Due Date for a task list)
    
    Note: In my test environment, SharePoint Designer 2007 occasionally locks up here. You may have to try this more than once.
    
17. Save your changes and click Yes if prompted about “customize a page”.
       
18. Go to a browser and add a new item to the list
         

Note: Several different date formats are acceptable for date entries:
     

 

Edit the “Edit” form  (EditForm.aspx)

SharePoint 2007 steps:

1. Follow steps 1 – 11 above except double-click EditForm.aspx and select “Edit Item Form”
2. If the fields are not displayed:
1. Right-click the new web part
2. Click Show Common Control Tasks
3. click the Show With Sample Data checkbox
4. click Refresh Data View.



3. Continue with step 13 from above…

You were probably expecting something like this:

   

and got this instead:

   

Go back to the EditForm.aspx page, switch to Code view and search for this line (my example uses @StartDate):

    <asp:TextBox runat=“server” id=”…” text=”{@StartDate}” …

And then replace @StartDate with

    ddwrt:FormatDateTime(string(@StartDate), 1033, 'G')

The result should look like this

    <asp:TextBox runat=“server” id=”…” text="{ddwrt:FormatDateTime(string(@StartDate), 1033, 'g')}"

Now test and confirm that it now looks like this:

       

 

 

 

Edit the “New” form  (NewForm.aspx)

SharePoint 2010 steps:

1. Open SharePoint Designer and open your site   “http://yourserver/sites/.yoursite”
2. In the Navigation section click Lists and Libraries
3. Double-click your your list
4. In the Forms section double-click NewForm.aspx (you may want to make a copy of this file first)
5. Display the page in Design view
      
6. Right-click the existing web part and click Web Part Properties
      
7. Expand the Layout section and click Hidden and then click OK
     
   Note: Do not delete the existing web part!
8. Click below the existing web part (you may need to experiment to find a spot)
9. In the Insert ribbon click SharePoint (in the Controls section) and Custom List Form
      
10. Select your list (not just any list with a similar name, your list!)
       
11. Select the correct content type
12. Click New Item Form and click OK
13. Wait until the fields load
14. Click on the date field you want to change
15. If the “Common FormField Tasks” popup is not displayed, right-click the web part and select  Show Common Control Tasks
       
16. Change the Format As to “Text Box”
17. Repeat for any other date fields you need to change (Start Date and Due Date for a task list)
18. Save your changes
19. Go to a browser and add a new item to the list
         

Note: Several different date formats are acceptable for date entries:
     

 

 

Edit the “Edit” form  (EditForm.aspx)

SharePoint 2010 steps:

1. Follow steps 1 – 13 above except double-click EditForm.aspx and select “Edit Item Form”
2. If the fields are not displayed:
1. Click the “tab” above the new web part:
    
2. Click the Design tab in the Data View Tools section of the ribbon
3. click the Sample Data checkbox

 

3. Continue with step 14 from above…

You were probably expecting something like this:

   

and got this instead:

   

Go back to the EditForm.aspx page, switch to Code view and search for this line (my example uses @StartDate):

    <asp:TextBox runat=“server” id=”…” text=”{@StartDate}” …

And then replace @StartDate with

    ddwrt:FormatDateTime(string(@StartDate), 1033, 'G')

The result should look like this

    <asp:TextBox runat=“server” id=”…” text="{ddwrt:FormatDateTime(string(@StartDate), 1033, 'g')}"

This edit will display “A.D.” in the Design view, but will display the correct data in the browser.

   

Now test and confirm that it now looks like this:

       

 

 

 

 

Hours, Minutes and Seconds?

 

SharePoint will store time to the second. There are no additional changes needed for the NewForm.aspx page, and EditForm.aspx only needs the “g” in the FormatDateTime changed to “G”. The real work will be in also creating a custom DispForm.aspx and custom views.

     text="{ddwrt:FormatDateTime(string(@StartDate), 1033, 'G')}"

 

.