javascript - Allow typing of time when Jquery datepicker are used - Stack Overflow

admin管理员组

文章数量:1393053

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

Share Improve this question Follow asked Sep 25, 2013 at 12:02 Cameron CastilloCameron Castillo 2,8621111 gold badges5454 silver badges8585 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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:

本文标签： javascriptAllow typing of time when Jquery datepicker are usedStack Overflow