blogfreakz.com » datepicker

CalendarPicker – Lightweight jQuery Calendar

Mufti Ali — Thu, 22 Apr 2010 14:20:41 +0000

CalendarPicker is lightweight jQuery Datepicker plugin that allow us to change dates using mouse wheel. it is enabled on years, months and days bars. This plugin using using the great mousewheel plugin by Brandon Aaron. Another feature is the ability of customizing the amount of years/month/days displayed.

This date picker is look different from all the others, supports multiple languages, and allows fast movement across months and years.

Requirements: jQuery Framework
Demo: http://bugsvoice.com/applications/bugsVoice/site/test/calendarPickerDemo.jsp
License: MIT License

Incoming search terms for the article:

jsDatePick – Simple Date Picker Calendar

Mufti Ali — Thu, 01 Apr 2010 04:41:59 +0000

jsDatePick is a javascript date picker that uses DOM techniques to generate its HTML code. You can read the parameters and working examples, and within minutes, you can have a popup date picking solution on your website.

jsDatePick has a range of parameters for extending or limiting default functionality.

jsDatePick Parameter

useMode (Integer) – Possible values are 1 and 2 as follows:
- 1 – The calendar’s HTML will be directly appended to the field supplied by target
- 2 – The calendar will appear as a popup when the field with the id supplied in target is clicked.
target (String) – The id of the field to attach the calendar to , usually a text input field when using useMode 2.
isStripped (Boolean) – When set to true the calendar appears without the visual design – usually used with useMode 1
selectedDate (Object) – When supplied , this object tells the calendar to open up with this date selected already.
yearsRange (Array) – When supplied , this array sets the limits for the years enabled in the calendar.
limitToToday (Boolean) – Enables you to limit the possible picking days to today’s date.
cellColorScheme (String) – Enables you to swap the colors of the date’s cells from a wide range of colors.
Available color schemes:
- aqua
- armygreen
- bananasplit
- beige
- deepblue
- greenish
- lightgreen
- ocean_blue – If you choose not to supply the cellColorScheme variable – the calendar will default to this color.
- orange
- peppermint
- pink
- purple
- torqoise

The user launches the calendar by entering the input field, and then chooses a date, automatically returning the selected date to the field. This is the most basic use of a javascript calendar.

Requirements: -
Demo: http://javascriptcalendar.org/javascript-date-picker.php
License: GPL License

Incoming search terms for the article:

10 Useful Date Picker for web development

Mufti Ali — Sat, 16 May 2009 05:53:45 +0000

List of beautiful datepickers and calendars for web that you can use for your web development.

1. jQuery UI Datepicker plugin

The jQuery UI Datepicker is a highly configurable plugin. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. You can use keyboard shortcuts to drive the datepicker:

page up/down – previous/next month
ctrl+page up/down – previous/next year
ctrl+home – current month or open when closed
ctrl+left/right – previous/next day
ctrl+up/down – previous/next week
enter – accept the selected date
ctrl+end – close and erase the date
escape – close the datepicker without selection

View Demo

2. Calendar A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers. This calender was completely re-written for Mootools.

Features

Style-able and semantic XHTML
Future / past calendar restrictions (and more)
Highly configurable use of inputs and selects
Multi-calendar support (with padding)
Variable navigation options
Multi-lingual and fancy date formatting

View Demo

3. Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

Features

Authentic Vista look-and-feel
- Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
- Smooth transition animations
Customizable features
Lightweight

View Demo

4. Date Picker – jQuery plugin

Date Picker component with a lot of options and easy to fit in your web application.

Features

Flat mode – as element in page
Multiple calendars in the component
Allows single, multiple or range selection
Mark dates as special, weekends, special days
Easy to customize the look by changing CSS
Localiation for months’ and days’ names
Custom day to start the week
Fits into the viewport

View Demo

5. YUI Calender

View Demo

6. Unobtrusive Date-Picker Widget

An attempt at writing a datePicker (calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.

Feature

Fully keyboard accessible
Multiple date formats and date dividers supported
Unobtrusive and nameSpace friendly
Fully skinnable with CSS
Both upper and lower date limits can be set
Certain days of the week can be disabled
Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
Includes “smart” localisation (16 languages currently available)
Bespoke days of the week can be highlighted
Works with single text inputs, split text inputs or select lists
It’s free to use, even commercially (Released under a CC share-alike license)

View Demo

7. jPint Web-Based iPhone Dev

jPint is a set of libraries designed by Journyx to allow developers to build web-based applications that look and feel as much like native iPhone apps as possible, while retaining the ability for those apps to be used by people who, for whatever reason, don’t actually have an iPhone handy.
Supported Environments

iPhone
Safari and Firefox as a standard web page
Google Gadgets for the aforementioned browsers
Coming soon: Internet Explorer

View Demo

8. Extension:Calendar

View calendar entries in a daily/weekly/monthly/quarterly/yearly overview.
View Demo
strong>9. Scal
A Simple Javascript Calendar Based on Prototype
View Demo

10. jsCalendar

This tool is easy to use and is well documented. It has several high quality color themes and it’s translated into a lot of languages.
View Demo