Monthly Archives: January 2014

jQuery datepicker: Disabled previous/next/any days

We have seen how to customize jquery datepicker in different condition. such as,

jQuery calender: Highlight date with different color
jQuery datepicker: change position of month and year drop down
jQuery Calender: Manage Year Range
jQuery Calender: Include month and year dropdown
jQuery Datepicker

Here today I am going to explain how to disabled previous days, next days or disabled any week days. As I mentioned jQuery datepicker is highly customize so that you just need to pass parameter to disabled previous and next day. In order to disabled any week day you need to write condition on beforeshowday function. Let’s see one by one.

How to disabled previous days or you can say passed days?

jQuery(‘div’).datepicker({‘minDate’ : 0});




How to disabled next days or you can say future days?

jQuery(‘div.maxdate’).datepicker({‘maxDate’ : 0});



How to disabled any week days? disabled saturday and sunday.

beforeShowDay : function(date){
if(date.getDay() == 0 || date.getDay() == 6){
return [false];
return [true];



A full example:

Full form of computer terms

HTTP Hyper Text Transfer Protocol
HTTPS Hyper Text Transfer Protocol Secure
IP Internet Protocol
URL Uniform Resource Locator
USB Universal Serial Bus
VIRUS Vital Information Resource Under Seized
3G 3rd Generation
GSM Global System for Mobile Communication
CDMA Code Divison Multiple Access
UMTS Universal Mobile Telecommunication System
SIM Subscriber Identity Module
AVI Audio Video Interleave
RTS Real Time Streaming
SIS Symbian OS Installer File
AMR Adaptive Multi-Rate Codec
JAD Java Application Descriptor
JAR Java Archive
JAD Java Application Descriptor
3GPP 3rd Generation Partnership Project
3GP 3rd Generation Project
MP3 MPEG player lll
MP4 MPEG-4 video file
AAC Advanced Audio Coding
GIF Graphic InterchangeableFormat
JPEG Joint Photographic ExpertGroup
BMP Bitmap
SWF Shock Wave Flash
WMV Windows Media Video
WMA Windows Media Audio
WAV Waveform Audio
PNG Portable Network Graphics
DOC Document (Microsoft Corporation)
PDF Portable Document Format
M3G Mobile 3D Graphics
M4A MPEG-4 Audio File
NTH Nokia Theme (series 40)
THM Themes (Sony Ericsson)
MMF Synthetic Music Mobile Application File
NRT Nokia Ringtone
XMF Extensible Music File
WBMP Wireless Bitmap Image
DVX DivX Video
HTML Hyper Text Markup Language
WML Wireless Markup Language
CD Compact Disk
DVD Digital Versatile Disk
CRT Cathode Ray Tube
DAT Digital Audio Tape
DOS Disk Operating System
GUI Graphical User Interface
HTTP Hyper Text Transfer Protocol
IP Internet Protocol
ISP Internet Service Provider
TCP Transmission Control Protocol
UPS UninterruptiblePower Supply
HSDPA High Speed Downlink Packet Access
EDGE Enhanced Data Rate for GSM [Global System for Mobile Communication] Evolution
VHF Very High Frequency
UHF Ultra High Frequency
GPRS General Packet Radio Service
WAP Wireless Application Protocol
TCP Transmission Control Protocol
ARPANET Advanced Research Project Agency Network
IBM International Business Management
HP Hewlett Packard
AM/FM Amplitude/ Frequency Modulation
WLAN Wireless Local Area Network

Source code from Tech Word of the Day

HTML5 Placeholder styling

I want to share css trick to change palceholder color. In this era HTML5 and CSS3 combination make developer life easier. Here you can see how to make place holder stylish.

How to define Placeholder?

It pretty simple. It’s a attributes of DOM element same like others.

<input type=”text” name=”firstname” placeholder=”Enter your first name” />



Default Placeholder has light gray color. Now just think how if it has some other color or match with your design. :)

For styling placeholder you just need to play with css. copy and paste below code in your page and see what happen.

::-webkit-input-placeholder {color:green;} /* webkit browser */
::-moz-placeholder {color:green;} /* mozilla firefox */
:-ms-input-placeholder {color:red;} /* ie */
<input type=”text” name=”firstname” placeholder=”Enter your first name” />


A full example:


jQuery calender: Highlight date with different color

Today I have done experiment to highlight specific date with different color in datepicker. Let’s see step by step.


CSS: overright css class with differ color. Here I have applied red background color with white font. You can change its with your choice of code.

.ui-highlight .ui-state-default{
background: red !important;
border-color: red !important;
color: white !important;

Make a array of dates that you want to highlight.

var dates = [‘2014-01-05′,’2014-01-15′,’2014-01-25’];

Put some logic to match date and apply your css class. Here I have made a custom date in YYYY-MM-DD format as it same as a array value and easy to find out into the array.

beforeShowDay : function(date){
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if(m.length == 1){ m = ‘0’ + m; } // append zero(0) if single digit
if(d.length == 1){ d = ‘0’ + d; } // append zero(0) if single digit
var currDate = y+’-‘+m+’-‘+d;
if(dates.indexOf(currDate) >= 0){
return [true, “ui-highlight”];
return [true];

That’s it. You have done. :)

A full example: just copy and paste into your test page and see how it works.