Monthly Archives: July 2013

10 different example of jQuery datepicker

Introduction:

Here you can see different example of jQuery UI datepicker. jQuery UI Datepicker has been made very flexible and customizable. It satisfied most of our requirements.
In order to enabled/disabled days, change year range you need to add bit of code as it has no directly functionality. Here I have used beforeShowDay, yearRange, minDate, maxDate mathod’s of jQuery Datepicker.

How to set up jQuery UI datepicker?

It very very easy to set up. For that you just need to download jQuery UI and put in your project folder and call into your web page as normal as we called external JavaScript and css. Or you can directly write CDN Path of jQuery UI. You may find out on jQuery ui official site. May be on bottom of page.

In this articles I have shown below different examples of datepicker that may satisfied your most of needs.

  • Simple Datepicker
  • Add year and month dropdown box in datepicker
  • Change year range of datepicker
  • Change date format
  • Set first day of week
  • Disabled previous days
  • Disabled next days
  • Disabled any week days
  • Enabled/Disabled only selected Days
  • Enabled date range

DEMO

Simple Datepicker:

jQuery(‘input[name=calender]’).datepicker();

Add year and month dropdown box in datepicker:

Datepicker defaultly set +10-10 Year. You can also swape month and year dropdown using {showMonthAfterYear:true}.

jQuery(‘input[name=calender]’).datepicker({changeYear:true, changeMonth:true, showMonthAfterYear:true});

Change year range of datepicker:

jQuery(‘input[name=calender]’).datepicker({changeYear:true, changeMonth:true, yearRange:”1990:2025″});

Change date format:

There are no. of date format support. click to view in details.

jQuery(‘input[name=calender]’).datepicker({dateFormat: “yy-mm-dd”});

Set first day of week:

For sunday:0, monday:1 …..

jQuery(‘input[name=calender]’).datepicker({firstDay: 1});

Disabled previous days:

jQuery(‘input[name=calender]’).datepicker({minDate: 0});

Disabled next days:

jQuery(‘input[name=calender]’).datepicker({maxDate: 0});

Disabled any week days:

jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : function(date){
if(date.getDay() == 0 || date.getDay() == 6)
return [0];
else
return [1];
}
});

Enabled/Disabled only selected Days:

Pass your collected date in “enabledDays” array. In this array I have given m-d-y format.

var enabledDays = [‘7-10-2013′,’7-15-2013′,’7-20-2013′,’7-25-2013’];
// Enabled specific days:
function enableAll(date) {
var m = date.getMonth() + 1, d = date.getDate(), y = date.getFullYear();
for (var i = 0; i < enabledDays.length; i++) {
if($.inArray(m + ‘-‘ + d + ‘-‘ + y,enabledDays) != -1) {
return [1];
}
}
return [0];
}
jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : enableAll
});

// Disabled specific days:
function disabledAll(date) {
var m = date.getMonth() + 1, d = date.getDate(), y = date.getFullYear();
for (var i = 0; i < enabledDays.length; i++) {
if($.inArray(m + ‘-‘ + d + ‘-‘ + y,enabledDays) != -1) {
return [0];
}
}
return [1];
}
jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : disabledAll
});

Enabled date range:

var today = new Date();
jQuery(‘input[name=calender]’).datepicker({
minDate: new Date(2013, 7, 10),
maxDate: new Date(today.getFullYear(), today.getMonth()+1, today.getDate())
});

WordPress Helper: PHP Snippets for Header

Below are snippets for making header in WordPress. It is more useful. Just you need to copy snippets and paste at appropriate place.

Title of the site:

<?php bloginfo(‘name’); ?>

Title of specific post or page:

<?php wp_title(); ?>

The style.css file’s theme location:

<?php bloginfo(‘stylesheet_url’); ?>

Pingback URL for the site:

<?php bloginfo(‘pingback_url’); ?>

Location for the site’s theme file:

<?php bloginfo(‘template_url’); ?>

WordPress version for the site:

<?php bloginfo(‘version’); ?>

Atom URL for the site:

<?php bloginfo(‘atom_url’); ?>

Exact URL for the site:

<?php bloginfo(‘rss2_url’); ?>

Name of then site:

<?php bloginfo(‘name’); ?>

Html version of the site:

<?php bloginfo(‘html_type’); ?>

Charset parameter of the site:

<?php bloginfo(‘charset’); ?>

Get Your Non-Tabbed Gmail Inbox Back

While logged into GMAIL yesterday, Google announced a new kind of inbox. You can say tab based inbox to distinguish your email into different category.

new gmail inbox

 

 

It may be you didn’t notice yet as Google rolling new inbox over the next few weeks. You may probably view “Configure Inbox” options on top setting tab.

Here I am or maybe you as well very handy with old inbox. So how can you get old inbox back?

Click on top right setting icon.

Click on settings.

gmail setting

 

 

 

 

 

 

 

 

 

 

By clicking on setting link you can see list of different tabs.

Click on INBOX tab and change setting as per below image

gmail inbox setting

 

 

 

 

 

 

 

 

 

1. INBOX TYPE: set to default.
2. Categories: Unchecked all check boxes except PRIMARY (may be disabled).

Then, Click on Save Changes Button and it’s done.

I got my old inbox and you?