Skip to content

How to add a Jquery Date Time Picker

February 24, 2012

I had previously known that there had been a JQuery Date Picker from the JQuery library that was light weight and easily customisable by CSS. After considering that the OCalendar was a bit buggy in loading up at times, I decided to ditch that as sometimes it wouldn’t load up properly ( thats the problem with custom built controls, they are not built by large or authorative or even community based  companies. Looking at a site http://trentrichardson.com/examples/timepicker/index.html, he managed to go one step further and add a time slider on the DatePicker which is really handy. After a few hours playing around it was a bit tricky in that you had to load all the JS files and the CSS in order for it to work else without the CSS, the slider control does not appear, with it I was able to customise the CSS, and the colour of the Date Time Picker of my liking.

Here’s how: –

On the site specified above, you don’t need to add the CSS script inside your web page shown.

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

You do need to add the following though which are the JS files.

http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js
http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js

http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js

http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js
Finally

http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css

Add the code into your web page like so: -

<script type= "text/javascript">     $(function() {     $('#txtStartTime').datetimepicker({         addSliderAccess: true,     });     $('#txtEndTime').datetimepicker({         addSliderAccess: true,     });     }); </script>
with your HTML input text components on the page like.
<html>
<body>
<input ID="txtStartTime" type="text"></input>
<input ID="txtEndTime" type="text"></input>
</body>
</html>
Please note if you are using ASP.NET like me, you need to take consideration of the annoying prefix of ctl00_content_ so code like below: -
 
<script type= "text/javascript">     $(function() {     $('#ctl00_content_txtStartTime').datetimepicker({         addSliderAccess: true,     });     $('#ctl00_content_txtEndTime').datetimepicker({         addSliderAccess: true,     });     }); </script>
 
As always its a feature within Microsoft rather than a bug that this prefix is stored in ASP.NET on versions 3.5 and lower. 
Solutions are as follows taken from StackOverflow.

“Small consolation for right now, but this “feature” will be fixed in Asp.Net 4.0. You will get settable ClientID property.

Other than that, the other responses are good.
Use <%= control.ClientID %>

or throw in JQuery and use $(“[id$=’myId’])

Or, on your input tags, don’t put runtime=’server’. You should be able to retrieve the values via the Form member (just like in traditional asp)

Or, skip Asp.Net WebForms and skip to Asp.Net MVC, which gives you complete control of the HTML markup that is generated. You have to change how you are doing things a bit more, but that might be less frustrating for you.”


					
Advertisements

From → Uncategorized

2 Comments
  1. @model MariedalsIK.Models.Game

    @{
    ViewBag.Title = “CreateGame”;
    Layout = “~/Views/Shared/_LayoutAdmin.cshtml”;
    }

    CreateGame

    $(‘#example1’).datetimepicker();

    $(function() { $(‘#ctl00_content_txtStartTime’).datetimepicker({ addSliderAccess: true, }); $(‘#ctl00_content_txtEndTime’).datetimepicker({ addSliderAccess: true, }); });

    @using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    Game

    @Html.LabelFor(model => model.Date)

    @Html.EditorFor(model => model.Date)
    @Html.ValidationMessageFor(model => model.Date)

    @Html.LabelFor(model => model.HomeTeam)

    @Html.EditorFor(model => model.HomeTeam)
    @Html.ValidationMessageFor(model => model.HomeTeam)

    @Html.LabelFor(model => model.AwayTeam)

    @Html.EditorFor(model => model.AwayTeam)
    @Html.ValidationMessageFor(model => model.AwayTeam)

    @Html.LabelFor(model => model.Result)

    @Html.EditorFor(model => model.Result)
    @Html.ValidationMessageFor(model => model.Result)

    }

    @Html.ActionLink(“Back to List”, “Index”)

    its not working for me, can u have a look plz 🙂

    • This looks like ASP.NET MVC, I take it nothing is showing up with the data time picker when you hover over #example1?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: