6/23/2011

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.

image

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

.image

 

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.

image 

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!

      image

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
        image
  5. Right-click the existing web part and click Web Part Properties
  6. Expand the Layout section and click Hidden and then click OK
        image
    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
         image 
  9. Select your list (not just any list with a similar name, your list!)
         image
  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
        image
  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”.
        image
  18. Go to a browser and add a new item to the list
        image 

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

 

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.
    5. image

  3. Continue with step 13 from above…

You were probably expecting something like this:

    image

and got this instead:

    image

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:

        image

 

 

 

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
        image
  6. Right-click the existing web part and click Web Part Properties
        image
  7. Expand the Layout section and click Hidden and then click OK
       image
    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
        image
  10. Select your list (not just any list with a similar name, your list!)
        image
  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
        image
  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
        image 

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

 

 

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:
        image
    2. Click the Design tab in the Data View Tools section of the ribbon
    3. click the Sample Data checkbox
    4.  

  3. Continue with step 14 from above…

You were probably expecting something like this:

    image

and got this instead:

    image

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.

    image

Now test and confirm that it now looks like this:

        image

 

 

 

 

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')}"

 

.

11 comments:

sarah said...

Does anyone know if it is possible to add a date picker to a datasheet view on SharePoint? I would like the data picker icon to appear in any of my date fields on the datasheet.

Ari said...

Hello Mike,

thanks for your workaround for this issue. I haven't found any other solution so far online that will not affect the column names or data (as would be in the case of creating a new custom field). I can also confirm that Javascript injection in select box does not work when trying to save.

However, is there a way to have the NewForm pre-filled with the current DateTime? The =Now() formula does not seem to work anymore since the conversion to textbox. So, when a user tries to add a new item he sees an empty textbox instead of the current date/time, which is a show-stopper.

I am using Sharepoint 2010.

Thanks again for providing helpful tip.

Best Regards,
Ari.

Ari said...

Regarding yesterday's email, don't worry, I found the way to pre-fill the textbox with the current date in the new form.
ddwrt:FormatDateTime(string(ddwrt:TodayIso()),1033,'G') does the trick.

I was too tired yesterday that this slipped my attention.

Thanks again.

Christophe Chopin said...

Hello,

Does anyone knows how to remove minutes and keep only date and hours ?

thanks

Jeff said...

I have several calculated columns that I have added to my list since making the conversion from date/time picker to textbox. When I go back to view the New Form or Edit Form in SP Designer, it does not display the form fields any more, which incidentally makes it very difficult to make any further changes. Any ideas on why they won't load?

Jeff said...

I have several calculated columns that I have added to my list since making the conversion from date/time picker to textbox. When I go back to view the New Form or Edit Form in SP Designer, it does not display the form fields any more, which incidentally makes it very difficult to make any further changes. Any ideas on why they won't load?

Thomas D'Orsi said...

Mike,

This is just what the Doctor Ordered!! Thank you for taking the time to detail this out. I have been looking for a work around for this for some time and none have been as helpful as this.

Rob said...

Might be an older post but it still works just fine. Thanks for the tip.

Tom said...

Can someone help. I must have done something wrong...

I follow the instructions but when using the new form and pressing save nothing is saved the form appears to flash off and on but no data is saved.

Becca Woods said...

Does this impact the functionality of a calculation field involving both the start date & time and the end Date & time?

My list is designed to track non-productive times for staff. They provide the time their NP started and ended and the calcuated field populates the mins elapsed between both.

Mike Smith said...

Becca,

This should not change your calculated fields at all.

Mike

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.