format.html

<div class="col-lg-8 control-section">
    <div id="wrapper">
        <input id="datetimepicker" type="text" />
        <br/>
        <br/>
    </div>
</div>

<div class="col-lg-4 property-section">
    
    <div>
        <select id="dateformats" class="form-control">
            <option value="dd-MMM-yy hh:mm a">dd-MMM-yy hh:mm a</option>
            <option value="yyyy-MM-dd HH:mm">yyyy-MM-dd HH:mm</option>
            <option value="dd-MMMM HH:mm">dd-MMMM HH:mm</option>
        </select>

    </div>
    <div id="action-description">
        <p>
            In this sample, the DateTimePicker has been configured with the
            <code>dd-MMM-yy hh:mm a</code> datetime format. To change this current datetime format, go to the properties panel at the right side and select
            a datetime format from the dropdown options. By using the
            <code>timeFormat</code> property to customize the displayed time value in a time popup list.
        </p>
    </div>
    <div id="description">
        <p>
            Format sample illustrates the support of custom datetime format in the DateTimePicker component by using the
            <code>format</code> property. You can also change the date format by selecting it from the format options in the properties panel.
        </p>
        <p> More information on the datetime format configuration can be found in the
            <a href="http://ej2.syncfusion.com/documentation/datetimepicker/globalization.html#date-format" target="_blank"> documentation section</a>.</p>
        </p>
    </div>
    <style>
        #wrapper {
            max-width: 246px;
            margin: 30px auto;
            padding-top: 50px;
        }

        .property-section {
            top: 55px;
            width: 200px;
            margin-left: 80px;
        }
    </style>