I have an HTML textbox that uses a datepicker.

<script type="text/javascript">
    $(function () {
        $("#<%= txtDateFrom.ClientID  %>").datepicker({ dateFormat: 'yy/mm/dd' });
    });

I would like users to optionally type in a time as well. Currently users can edit the textbox, but only the date part.

I have an HTML textbox that uses a datepicker.

<script type="text/javascript">
    $(function () {
        $("#<%= txtDateFrom.ClientID  %>").datepicker({ dateFormat: 'yy/mm/dd' });
    });

I would like users to optionally type in a time as well. Currently users can edit the textbox, but only the date part.

• javascript
• jquery
• datepicker

• 2 There are no timepickers included in jQueryUI, so you'd need to use a third party plugin, such as this: trentrichardson./examples/timepicker – Rory McCrossan Commented Sep 25, 2013 at 12:04

2 Answers 2

Use this

<script type="text/javascript">
$(function () {
     $("#<%= txtDateFrom.ClientID  %>").datepicker({ dateFormat: 'yy/mm/dd', constrainInput: false });
});
</script>

constrainInput: false allows anything can be typed in the text field

As Rory mented already, there is no time included in jquery ui datepicker plugin, but using the one created by Trent Richardson (http://trentrichardson.) you could achieve what you are looking for.

I am using this very plugin often in various projects, I am used to have a date class initialized somewhere in a Master view:

    $('.date').datetimepicker({
        showOn: "both",
        buttonImage: '<%:Url.Image("calendar.gif")%>',
        buttonImageOnly: true,
        ampm: true,
        timeFormat: 'hh:mm:ss TT'
    });

here is a snapshot i just took, note it has two date fields, the input is pletely free type, time is added either manually or using scrolls under the calendar inside popup: