jquery ui datepicker

Jquery is one of the easiest way to implement datepicker for form’s input field. You can also set on focus event to fire date popup. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

jquery date picker

Simple Source Code :

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
How to restrict or disable date in jquery date picker ?
jquery disable date range
Restrict date range: (Source code)
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Do you want get more tutorial, then just visit source

jquery mobile

jQuery Mobile is a touch-optimized web framework. it is developed by jquery team. jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

Key features:

  • Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.
  • Compatible with all major mobile, tablet, e-reader & desktop platforms – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook and all modern browsers with graded levels of support.
  • Lightweight size and minimal image dependencies for speed.
  • Modular architecture for creating custom builds that are optimized to only include the features needed for a particular application.
  • HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
  • Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
  • Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.
  • Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and clean URLs through pushState.
  • Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
  • Touch and mouse event support streamline the process of supporting touch, mouse and cursor focus-based user input methods with a simple API.
  • Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.
  • Powerful theming framework and the ThemeRoller application make highly-branded experiences easy to build.
  • Customizable bundles for even better perfomance can be built easily with the Download builder

 

Accessibility

jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C’s WAI-ARIAspecification.

By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (likeVoiceOver, on Apple’s iPhone device) or other assistive technology to access the web.

Getting Started with jQuery Mobile

jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy. Here’s how:

Create a basic page template

Pop open your favorite text editor, paste in the page template below, save and open in a browser. You are now a mobile developer!

Here’s what’s in the template. In the head, a meta viewport tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.3 beta (1.3.0-beta.1) works with versions of jQuery core from 1.7.0 to 1.8.3.

In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.


<!DOCTYPE html> 
<html> 
<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>My Title</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Hello world</p>		
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Source     Demo