Showing posts sorted by relevance for query jquery daTEPICKER. Sort by date Show all posts
Showing posts sorted by relevance for query jquery daTEPICKER. Sort by date Show all posts

Change the Background Color of jQuery Datepicker

Here’s a simple way using CSS to change the Background Color of the jQuery UI Datepicker control

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>Change Background Color of jQuery UI
DatePicker(from DevCurry.com)</title>
<
link type="text/css" rel="Stylesheet"
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/
smoothness/jquery-ui.css" />

<
style type="text/css">
.ui-datepicker {
background: #333;
border: 1px solid #555;
color: #EEE;
}
</style>

<
script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</
script>
<
script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js">
</
script>


<
script type="text/javascript">
$(function () {
$("#datepic").datepicker();
});
</script>
</
head>
<
body>
<
input id="datepic"/>
</
body>
</
html>

As you can see, all that we are doing to change the background formatting for the Datepicker is to change the .ui-datepicker CSS class, as shown below.

<style type="text/css">
.ui-datepicker {
background: #333;
border: 1px solid #555;
color: #EEE;
}
</style>

Before:

jQuery UI Datepicker Default

After:

jQuery UI Datepicker Background

Check out some more similar jQuery DataPicker Tips

jQuery UI 1.8.5 Released to Microsoft CDN – Example with Live Demo

The jQuery UI team released jQuery UI 1.8.5 yesterday which contains some bug fixes in the jQuery UI Core, Utiities, Widgets and Effects. You can see the release note here.

Along with this release, what particularly got me excited was that now we have a choice of CDN’s for the jQuery UI library. Along with the Google CDN, the jQuery UI is also available on Microsoft CDN. Here’s the link to jQuery UI on Microsoft CDN. This links includes the Libraries, Theme CSS and Internationalization/Localization files. Way cool!

Here’s an example of using jQuery UI Library and Themes from Microsoft CDN (adapted from one of my jQuery how-to-do’s) to prevent users from selecting weekends while using the jQuery UI DatePicker

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head>
<
title>Prevent users from selecting weekends in jQuery UI
DatePicker(from DevCurry.com)</title>
<
link type="text/css" rel="Stylesheet"
href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/
smoothness/jquery-ui.css" />
<
script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</
script>
<
script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js">
</
script>

<
script type="text/javascript">
$(function () {
$("#datepic").datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
</
head>
<
body>
<
input id="datepic"/>
</
body>
</
html>
image 

See a Live Demo

I have also updated my link List Latest jQuery and jQuery UI Theme links on Google CDN

jQuery UI DatePicker Built-In Date Formats

The jQuery UI DatePicker offers plenty of functionality to the developer, and even though well-documented, at times you could miss out on some useful built-in functions. One such functionality is the built-in date formats, available as constants.

We all know how to change the date format for the DatePicker. To change the dateformat to something like “14 Sep 2011” , is as simple as this:

jQuery UI DateFormat

However the API defines some built-in date formats as given in this table below, which is very useful if you are following common standards or RFC formats

image

Here’s how to use one of these formats in your code. We will use the TIMESTAMP format to select the UNIX timestamp.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Built-in Date Formats in jQuery UI DatePicker</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/base/jquery-ui.css"
/>
<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
</script>
<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js">
</script>
<script type="text/javascript">
    $(function () {
        var fmt = {
            dateFormat: $.datepicker.TIMESTAMP
        };

        $("#datepic").datepicker(fmt);
    });
</script>
</head>
<body>
<input id="datepic"/>
</body>
</html>

Now when the user selects a date from the datepicker, the timestamp is displayed in the input
jQueryui datepicker timestamp

jQuery DatePicker – Select a Date Programmatically

I have seen users asking how to programmatically select a date using jQuery UI DatePicker control.

The DatePicker beforeShowDay event is ideal for this type of a requirement. As described in the documentation “The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the DatePicker before it is displayed.”

Here’s an example. Assume you want to select a date “9-22-2010”

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Select a Date in jQuery DatePicker</title>
<
link rel="Stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
/>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</
script>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js">
</
script>

<
script type="text/javascript">
$(function () {
$("#devcurry-datepic").datepicker({
beforeShowDay: function (date) {
var selDate = "9-22-2010";
// month are 0 based, so +1.
var mm = date.getMonth() + 1, dd = date.getDate(),
yy = date.getFullYear();
// format date
var dt = mm + "-" + dd + "-" + yy;
if (dt == selDate) {
return [true, "ui-state-hover"];
}
return [true, ""];
}
});
});
</script>
</
head>
<
body>
<
input id="devcurry-datepic"/>
</
body>
</
html>

In the code shown above, we format the date and compare it with the date that has to be selected. If it matches, apply a css style ‘ui-state-hover’ to give it a selected feel. You can use any other class you want. The result is shown below with 22nd September selected.


image

Has anyone been able to use the setDate function in this scenario. It seems this function worked only in the previous versions of jQuery UI. Let me know if it has worked for you!

jQuery UI DatePicker – Programmatically selecting a Date

When the jQuery UI DatePicker shows up, the current date is selected by default as shown below:

jQuery UI DatePicker Default Date

Note: It was the 12th of February, 2010 when I tried this example.

However if you want to programmatically select a date, then here’s how to do so. We will select 15th of February, 2010:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title></title>
<
script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</
script>
<
link rel="stylesheet" type="text/css" media="screen"
href="http://bit.ly/cNbe6T"/>

<
script type="text/javascript">
$(function() {
$("#datepic").datepicker();
// month is 0 based, hence for Feb we use 1
$('#datepic').datepicker('setDate', new Date(2010, 1, 15));
});
</script>
</
head>
<
body>
<
input id="datepic"/>
</
body>
</
html>

The output is now

jQuery UI DatePicker Select Date

You can also specify number of years, months or days from today. So for example, if I want to specify a date that is 1 month and 2 days from today, then here’s how you can do it

$('#datepic').datepicker('setDate', '+1m 2d');

OUTPUT

jQuery UI DatePicker Select Date

5 jQuery Calendar Plugins that can be used on Websites

Online calendars can be very useful to share and publish your schedules. One of the most common requests I receive from my jQuery readers is for a good, free-to-use, jQuery Calendar control, similar to the Google Calendar, which can be added to a website or blog.

Here are some of the freely available jQuery Calendar plugins, worth trying out. Please note that this post is about jQuery Calendar Plugins and not DatePicker controls.



jQuery Full Calendar Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). Supports jQuery UI Themes.

image


Latest Version – FullCalendar 1.4.6 (May 31st, 2010)


jQuery Frontier Calendar

The jQuery Frontier Calendar is a full month calendar jQuery plugin that looks like Google Calendar. Supports drag-and-drop on agenda items, and iCal VEVENT import. Customizable style via CSS file.
image

Latest Version - jQueryFrontierCalendar 1.3.1 (June 23rd, 2010)


jQuery Event Calendar Plugin


wdCalendar is a jQuery based Google calendar clone. It cover most Google calendar features. You can integrate it with a database and can have daily, weekly or monthly views. Events can be created, updated or removed by using drag & drop operations.

See a Demo


image


Latest Version - wdCalendar


jQuery Week Calendar

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as Google calendar. Currently this project is not being maintained, but contains a lot of features out-of-the-box for you to tweak.

image


Latest Version - jquery-weekcalendar-1.2.2


jQuery iCal-like Calendar

Although not like the Google Calendar, I thought this iPhone-like calendar deserves a mention here. The iCal-like calendar, created by Stefano Verna is created using only CSS and jQuery. The calendar has a relatively plain HTML structure and also contains a lightweight Coda-like effect for events description popups.

See a Demo


image

Latest Version – iCal-like-calendar


So the next time you are looking out for a free jQuery Calendar plugin for your website, I hope this post will help you find one.

You can also check my posts on the jQuery UI DatePicker

Choose which Dates are Selectable in the jQuery DatePicker

While using the DatePicker control for a client, they had a requirement where users should be able to select only weekends (Saturday, Sunday) from the DatePicker.

The DatePicker beforeShowDay event is ideal for this type of a requirement. As described in the documentation “The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the DatePicker before it is displayed.”

This is how we will use this event to prevent users from selecting certain days in the jQuery UI DatePicker

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#datepick").datepicker({ beforeShowDay:
function(dt) {
return [dt.getDay() == 0 dt.getDay() == 6, ""];
}
});
});
</script

where 'datepick' is the DatePicker control defined like this:

<input id="datepick" type="text" />

On running the code, you will see that only dates that fall on weekends can be selected

jQuery UI DatePicker

See a Live Demo

Note: The same example can be run for a DatePicker in an ASP.NET Page. Just replace the HTML TextBox with an ASP.NET TextBox control

The Absolutely Awesome jQuery Cookbook Released

Howdy! I am writing this post to announce the release of my new eBook The Absolutely Awesome jQuery Cookbook at www.jquerycookbook.com.

This book covers the latest jQuery v1.11.1 or 2.1 and jQuery UI 1.11.2 versions and contains 120+ practical jQuery recipes (about 70 Recipes and 50+ sub-recipes) you can use in your websites and projects right away. Each recipe includes working code, a live demo and a discussion on why and how the solution works. This eBook is available in PDF, .ePub and .mobi formats.

This book is primarily targeted for the everyday jQuery developer and designer who wants to enhance his/her websites and projects or wants to focus on the practical features of jQuery, and how they can be applied to solving real-world problems. The book assumes you have some working knowledge of HTML, CSS, jQuery and JavaScript. Although the first chapter ‘Getting started with jQuery & jQuery UI’ and the fifth chapter ‘Getting started with $.ajax()’ is a crash course introduction to jQuery and Ajax, I have provided links to additional resources, if you are relatively new to jQuery and want to make the best of this book.

You can download sample chapters over here

jQuery UI DatePicker - Update two TextBoxes at the same time with the selected date

The jQuery UI DatePicker widget is very configurable and powerful, and I love using it whenever I can. I was recently working with the DatePicker widget and came across a requirement where two textboxes had to be updated at the same time with the selected date.

Assuming we have two textboxes called ‘date1’ and ‘date2’, to solve this requirement, developers would usually handle the ‘onSelect’ parameter of the datepicker to detect a change and update the second textbox as shown below:

<script type="text/javascript">
$(function() {
$("#date1").datepicker({
onSelect: function() {
$('#date2').val($('#date1').val());
}
});
});
</script>

However the configurable datepicker widget has an ‘altField’ option that allows us to specify a jQuery selector containing the id of the second textbox, making this requirement extremely simple to achieve. Here’s the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</
script>
<
link rel="stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css
"/>
<
script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">
</
script>
<
title>Change value of One Calendar based on the value of the other</title>
</
head>
<
body>
<
label>Choose a date: </label>
<
input id="date1" />
<
br /><br />
<
label>Second date field: </label>
<
input id="date2" />
<
script type="text/javascript">
$(function() {
var dt = {
altField: "#date2"
};
$("#date1").datepicker(dt);
});
</script>
</
body>
</
html>

Here’s a Live Demo

Reduce Size of the jQuery DatePicker

I often use the jQuery ui-lightness theme for my DatePicker, which I feel is quite nice. However by default, the DatePicker layout is quite ‘explosive’ and displays with big fonts.

jQuery UI DatePicker

However there is a simple way to change that with a small amount of css. Here’s some sample CSS to reduce the font-size of the DatePicker to reduce its size and change some styling

<style type="text/css">
.ui-datepicker {
font-family:Garamond;
font-size: 11px;
margin-left:10px
}
</style>

Now if you run the same code, the DatePicker shows up like this:

jQuery UI DatePicker

Adopting ASP.NET MVC enhancements in an Existing Web Forms Project

This article is from our ASP.NET MVC 101 Tutorial Series

Whenever we are starting with a Greenfield project, that is a new project from ground up, we prefer using the latest in the technology stack to the point where the team is comfortable with. However, Greenfield projects are pretty rare; enhancement and feature addition projects, often referred to as brown-field projects, are the way forward for existing applications in an Enterprise. In these projects, we are often saddled with predetermined technologies or frameworks and shoe horning the latest and greatest could mean un-necessary delays and instability. After all ‘don’t fix what’s not broken’ right?

Given this scenario, it’s common to have well established ASP.NET 2.0 Web Forms projects that need enhancements. If the enhancements are independent enough, as in creation of new Screens with new functionality, that is no way going to be ‘embedded’ in existing functionality. We can take a clean break and develop the new functionality in ASP.NET MVC by mixing and matching Web Forms with MVC.

Today we will take a look at the caveats, gotchas and the GUIDs we need to take care to make this possible.

Using jQuery and Moment.js in ASP.NET MVC to do Custom Unobtrusive Date Comparison and Validation

In fifth issue of DNC Magazine Sumit had demonstrated how to make a ‘dynamic max length’ validator that could unobtrusively validate max-length when the target length was set at run time. We’ll use the same techniques to build an Unobtrusive Date Comparison Validator that will enforce the rule that given two dates, one date should be greater than or lesser than or equal to another date in the same form.

We will use the jQuery UI Date Picker to provide a nice calendar for picking the dates and as a final twist in the tale, we’ll use a Custom Date format in the Picker. There is a nasty bug in jQuery UI’s date picker, so we’ll see how we can fix that as well using another JavaScript library Moment.js.
Date formatting is often a major pain. Throw in the weird Date format that MVC returns and you will end up tearing out your hair in frustration with Date.Parse. Enter Moment.JS, a neat little Open Source, JavaScript library, which takes the pain of Date Formatting and Conversion (among other things) away!

The ASP.NET MVC Demo Application

We have a Basic ASP.NET MVC Application with the latest jQuery, jQuery UI and Unobtrusive Validation libraries installed from Nuget. It has a single HomeController that has the Index Action Method. We have a corresponding view in the Home\Index.cshtml.

Custom Templates, Data Annotations and UI Hints in ASP.NET MVC

This article is from our ASP.NET MVC 101 Tutorial Series

Today we look at a feature in ASP.NET MVC that is not really new but immensely useful if we are building ASP.NET MVC applications that lean on the server to do the UI rendering rather than using JavaScript frameworks like KnockoutJS.

Display Templates conceptually are tied to how a particular rendering engine (Razor or Webforms etc.) determines the Type of the model element it is trying to render and then using that information, pick up the Display Template that needs to be used. Along with type, other attributes like Data Annotations and UI Hints are also used to determine the final outcome of our UI.

A Simple ASP.NET MVC Demo

Let’s look at these concepts in a little more details using a simple demo app.

Most Popular .NET, jQuery and Web Development articles in 2011

With 2012 fast approaching and 2011 drawing to an end, we've put together our list of the Most Popular .NET articles on DevCurry.com this year. The year 2011 featured articles on DevCurry covering many technologies like jQuery, HTML 5, ASP.NET, MVC, Silverlight, WPF, .NET, VS 2010, Entity Framework and Sharepoint, just to name a few.

I would like to thank each one of you who has visited my blog or contributed to it by submitting a Guest post, Subscribing to RSS Feed, by joining me on Twitter or the Facebook page or promoting the articles and giving regular feedbacks via rating, comments or Emails. Many thanks to those too who purchased my jQuery ASP.NET eBook.

Here are some articles that were liked the most by readers like you. Have a very Happy New Year 2012!

.NET Articles


jQuery & JavaScript Articles


HTML 5 & CSS Articles

Disable Certain Days In a Week using jQuery UI DatePicker

A couple of days ago, I had posted on Prevent Users from Selecting Weekends using jQuery UI DatePicker

Dominic mailed asking if it was possible to do this without using the built-in function 'noWeekends'. He wanted to disable Tuesdays and Fridays of every week in the DatePicker. Here’s how to achieve the same:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Disable Certains Days in a Week using jQuery UI DatePicker</title>
<
link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<
script type="text/javascript" src="http://ajax.microsoft.com/ajax/
jquery/jquery-1.4.2.min.js"></script>
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.8.2/jquery-ui.min.js"></script>


<
script type="text/javascript">
$(function() {
$("#datepic").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 2 || day == 5) {
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
</
head>
<
body>
<
input id="datepic"/>
</
body>
</
html>

OUTPUT

image

See a Live Demo

jQuery UI DatePicker – Display Multiple Months

Here’s how to display multiple months in the jQuery UI DatePicker using the ‘numberOfMonths’ option.

<label>Multiple Month DatePicker: </label>
<
input id="date2" />
<
script type="text/javascript">
$(function() {
var dt = {
numberOfMonths: 2
};
$("#date2").datepicker(dt);
});
</script>

image

You can even change the DatePicker UI using the different options available. For example, if you wanted to display the year as a dropdown field and also specify the range of years in the dropdown, use the following code:

<body>
<
label>Multiple Month DatePicker: </label>
<
input id="date2" />
<
script type="text/javascript">
$(function() {
var dt = {
changeYear: true,
yearRange: "-3:+3"
};
$("#date2").datepicker(dt);
});
</script>
</
body>

image

The UI shown above displays the year as a dropdown field and displays a range of 3 years both backwards and forward. You can check similar DatePicker options over here to configure the jQuery UI DatePicker

JSON Dates are Different in ASP.NET MVC and Web API

With the advent of ASP.NET MVC and Web API, working over plain HTML as opposed to obtrusive server side ‘web-controls’ has become the norm. Also partial post-backs and AJAX is a must. Among this paradigm shift from WebForms, JSON data transfer has gained tremendous popularity.

We all love JSON it’s easy to understand, light weight and works… almost! We all HATE JSON Dates. Why? Because JSON spec doesn’t say how to handle Dates. This minor detailing has resulted in a lot of head-scratching, a lots of hacks and lot of posts all across the web. I decided to write up a ‘Latest update’ on the JSON Dates Saga. Remember I am using Web API 4.0.2 which is the latest release version.

A special note of thanks to Sumit  Maitra who cracked the JSON serializer difference in MVC 4 and Web API.

Prevent Users from Selecting Weekends using jQuery UI DatePicker

Not known to many, jQuery UI DatePicker has a built-in function called 'noWeekends', that prevents users from selecting weekends, by disabling them.

Here’s how to use it

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title></title>
<
link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.
com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<
script type="text/javascript" src="http://ajax.microsoft.com/ajax/
jquery/jquery-1.4.2.min.js"></script>
<
script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.8.2/jquery-ui.min.js"></script>


<
script type="text/javascript">
$(function() {
$("#datepic").datepicker(
{ beforeShowDay: $.datepicker.noWeekends }
);
});
</script>
</
head>
<
body>
<
input id="datepic"/>
</
body>
</
html>

OUTPUT

image

As you can observe, the weekends are disabled.

See a Live Demo

jQuery UI DatePicker Date Range

In this post, I will show you how to specify Date Range for the jQuery UI DatePicker control, using the maxDate and minDate options.

The Current Date for these examples is assumed to be 10th September, 2010.

Specify Date Range in Months - You can specify selectable months in the DatePicker as shown below:

<script type="text/javascript">
$(function () {
$("#datepic").datepicker({ minDate: 0, maxDate: '+1M' });
});
</script>

The above code makes only the current date and one month, starting from the current date, selectable. Rest all the dates are disabled as shown below.

image


Specify DateRange in Weeks - You can specify selectable weeks in the DatePicker as shown below:

<script type="text/javascript">
$(function () {
$("#datepic").datepicker({ minDate: '-1w', maxDate: '+2w' });
});
</script>

The above code sets the selectable range to 2 weeks from the current day and 1 week prior to the Current Day. Rest all the dates are not selectable.

image


Specify Date Range in Days – You can specify selectable days in the DatePicker as shown below:

<script type="text/javascript">
$(function () {
$("#datepic").datepicker({ minDate: '-6d', maxDate: '+6d' });
});
</script>

The above code restricts the user to select dates only within the range of 6 days before and 6 days after, the current day.

image


Note: The different periods that can be used in the DatePicker are as follows - 'y' for years, 'm' for months, 'w' for weeks and 'd' for days. You can also specify a combination of periods like '+1y +3m +2w +6d' which is equal to 1 Year, 3 Months, 2 Weeks and 6 days.

Note: The user can directly type in the textbox and override the restrictions you have set on the datepicker. It is advised to always use server-side validation in addition to client-side validation.

DataList in ASP.NET MVC & KnockoutJS

We recently learnt how to implement a Master-Details view using Knockout and ASP.NET MVC. Today we will look at how we can create a nice paginated data set that mimics the WebForm DataList/Repeater/Grid functionality. We will again take advantage of Steve Anderson’s excellent KnockoutJS framework to build a rich client side functionality.

Thanks to Sumit Maitra for co-authoring this article with me.

Our DataList Requirement

- We want a paginated repeater like functionality in ASP.NET MVC for tabular data.
- Page Size should be definable and table refresh should involve only Ajax Posts.

Sample Data

We have a list of TimeCard entities. The TimeCard Entity is defined as follows