     today = new Date(plan.due_at)
     footer = <PlanFooter id={id} courseId={courseId} clickedSelectProblem={@showSectionTopics}/>
 
-    formClasses = ['-create-homework']
+    formClasses = ['create-homework']
     if @state?.showSectionTopics then formClasses.push('hide')
+
+    if (TaskPlanStore.isPublished(id))
+      dueAtElem = <span>{new moment(dueAt).format('MMM Do, YYYY')}</span>
+    else
+      dueAtElem = <DateTimePicker
+                    id="homework-due-date"
+                    format="MMM dd, yyyy"
+                    time={false}
+                    calendar={true}
+                    readOnly={false}
+                    onChange={@setDueAt}
+                    min={new Date()}
+                    value={dueAt}/>
 
     <div>
       <BS.Panel bsStyle='default' className={formClasses.join(' ')} footer={footer}>

React = require 'react'
_ = require 'underscore'
BS = require 'react-bootstrap'
Router = require 'react-router'
{DateTimePicker} = require 'react-widgets'

              </div>
              <div className="-homework-due-date">
                <label htmlFor="homework-due-date">Due Date</label>
                {dueAtElem}
                <p>Feedback will be released after the due date.</p>
              </div>
            </BS.Col>
            <BS.Col xs={12} md={6}>
