ASP.NET DateTime Picker

Question

is there any good free/open source time picker control that goes well with ASP.NET Calendar control?

Answer 1

JQuery has the best datepicker IMHO. While it's not specific to .Net is still works great.

HTML:

<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>

In head element:

<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>

Simple as that!

Answer 2

The answer to your question is Yes, there is any good free/open source time picker control that goes well with ASP.NET Calendar control.

ASP.NET Calendar control just writes an html table.

If you are using HTML5 and DOT.NET Framework 4.5, then you can use ASP.NET TextBox control instead, and set the TextMode property to either "Date", or "Month", or "Week", or "Time" or "DateTimeLocal" or if you are not using either Chrome or Firefox or Internet Explorer, then you also can set this property to "DateTime".

Then read the Text property to get the date, or time, or month, or week as string from the TextBox.

If you are using DOT.NET Framework 4.0 or older version, then you can use either html5 input type="date" or input type="month" or input type="week" or input type="time" or input type="datetime-local" or if you are not using either Chrome or Firefox or Internet Explorer, then you also can use input type="datetime".

If you need on the server side code (written in either C# or Visual Basic) the information that the user input in the date field, then you can try to run this element on server by writing inside the input tag runat="server"

Also give this element an id, so you can access it on the server side code. Read the Value property to get the input date, time, month, or week as string. If you cannot run this element on the server, then you need an hidden field in addition to the input type="date" or "time" or "month" or "week". In the submit function (written in javascript) set the value of the hidden field to the value of the input type="date", or "time", or "month", or "week", and then on the server side code, read the Value property of that hidden field as string too.

Sure that the hidden field element of the html can run on the server.

Hope that helps.

Answer 3

Since it's the only one I've used, I would suggest the CalendarExtender from http://www.ajaxcontroltoolkit.com/

Answer 4

In the textbox add this:

textmode="Date"

It gives you nice looking Datepicker like this:

Other variations of this are:

textmode="DateTime"

It gives you this look:

textmode="DateTimeLocal"

Answer 5

This is solution without jquery.

Add Calendar and TextBox in WebForm -> Source of WebForm has this:

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

Create methods in cs file of WebForm:

protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
    }

    protected void DateChange(object sender, EventArgs e)
    {
        TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
    }

Method DateChange is connected with Calendar event SelectionChanged. It looks like this: DatePicker Image

Answer 6

Basic Date Picker Lite

This is the free version of their flagship product, but it contains a date and time picker native for asp.net.

Answer 7

Try bootstrap-datepicker if you are using bootstrap.

Answer 8

There is an easy, out of the box implementation: the HTML 5 input type="date" and the other date-related input types.

Okay, you can't style the controls that much and it doesn't work on every browser, but still it can be a very good option in the long term if all modern browsers support it and don't want to include heavy libraries that don't always work that good on mobile devices.

Answer 9

If you would like to work with a textbox, be aware that setting the TextMode property to "Date" will not work on Internet Explorer 11, because it does not currently support the "Date", "DateTime", nor "Time" values.

This example illustrates how to implement it using a textbox, including validation of the dates (since the user could enter just numbers). It will work on Internet Explorer 11 as well other web browsers.

<asp:Content ID="Content"
         ContentPlaceHolderID="MainContent"
         runat="server">

<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
   $(function () {
   $("#
   <%= txtBoxDate.ClientID %>").datepicker();
   });
 </script>
 <asp:TextBox ID="txtBoxDate"
           runat="server"
           Width="135px"
           AutoPostBack="False"
           TabIndex="1"
           placeholder="mm/dd/yyyy"
           autocomplete="off"
           MaxLength="10"></asp:TextBox>
 <asp:CompareValidator ID="CompareValidator1"
                    runat="server"
                    ControlToValidate="txtBoxDate"
                    Operator="DataTypeCheck"
                    Type="Date">Date invalid, please check format. 
 </asp:CompareValidator>
 </asp:Content>

Answer 10

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control", @type = "date" } })

this works well