InputText for capturing Date field

Question

I have a Date (Completed_Date) field in my Timesheet object which I want the users to be able to update and Save after a Timesheet is submitted.
I have been able to pass the field from Controller to VF Page with inputtext. At this point, I have 2 issues -

1. On the VF Page, it shows in a different date format (as shown in the image). I want to show as mm/dd/yyyy
2. Provide a datepicker so that users can select a new date and save back

Below is my VF Page -

<apex:page standardController="Time_Sheet__c"  extensions="i3_CaseTimesheet_Edit_Controller" sidebar="false">
<apex:form >
  <apex:pageBlock title="Case Timesheet">

  <div align="center">
  <apex:outputPanel >
    <apex:commandButton value="Save" action="{!Save}"/>

    <apex:commandButton value="Cancel" action="{!Cancel}"/>
  </apex:outputPanel> 
  </div>
  <br></br>
  <apex:pageBlocksection title="Enter Timesheet Details"> 
<apex:inputtext value="{!TSNewDate}" label="New Date"/> 
</apex:pageBlocksection>
</apex:pageBlock>
  </apex:form>
</apex:page>

My Controller is below -

public class i3_CaseTimesheet_Edit_Controller {

public date TSNewDate {get;set;}

public i3_CaseTimesheet_Edit_Controller(ApexPages.StandardController stdController) {
    CurrRecId = ApexPages.currentPage().getParameters().get('Id');
    system.debug (CurrRecId);
    TSRecord = [Select Contract__c, Assigned_To__c, Account__c, Case__c, Duration__c, Email_Customer__c, Public_Comments__c, Description__c, Completed_Date__c from Time_sheet__c where ID = :CurrRecId];
    TSNewDate = TSRecord[0].Completed_date__c;
}

public PageReference Save()
{

  System.Debug('Entered Save');
  Time_sheet__c CTime = new Time_sheet__c();
    CTime.Completed_Date__c = TSNewDate;
     CTime.Id = CurrRecId; 
  update CTime;
  PageReference TSPage = new PageReference('/' + CTime.Id); // to open the saved TS
  return TSPage;
}

This is how Date is rendered on the VF page-

If there is any other approach I can solve this, please advise. Thanks

Answer 1

You can format a date in a couple different ways. Probably the simplest is to use the Datetime.format method, which allows you to specify any SimpleDateFormat you wish:

Time midnight = Time.newInstance(0,0,0,0);
Datetime today = Datetime.newInstance(Date.today(), midnight);
system.debug(today.format('MM/dd/yyyy'));