article:
Elements Design: Form Alert Interface
article:
Website: 404 error web page

JS Plugin: pickadate.js

Advertisement

pickadate.js is a lightweight jQuery dateinput picker.

Screenshot

Plugin: pickadate


Implement

<header>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="pickadate.css">
</header>

<body>
<fieldset>
    <input id="input_date" class="datepicker" type="text">
</fieldset>

and

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/pickadate.js"></script>

add javascript code

<script type="text/javascript">
    $( '#input_date' ).pickadate()
</script>

</body>


All the options and default settings:

// Strings
months_full: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
months_short: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
weekdays_full: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
weekdays_short: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
month_prev: '&#9664;',
month_next: '&#9654;',
// Date ranges
date_min: false,
date_max: false,
// Display strings
show_months_full: true,
show_weekdays_short: true,
// Date format
format: 'd mmmm, yyyy',,
format_submit: false,
// Disable picker
disable_picker: false,
// First day of week
first_day: 0,
// Classes
class_input_focus: 'datepicker--input__focused',
class_picker_open: 'datepicker--opened',
class_picker_holder: 'datepicker--holder',
class_calendar_box: 'datepicker--calendar__box',
class_calendar: 'datepicker--calendar',
class_calendar_body: 'datepicker--calendar__body',
class_calendar_date: 'datepicker--calendar__date',
class_year: 'datepicker--year',
class_month: 'datepicker--month',
class_month_nav: 'datepicker--month__nav',
class_month_prev: 'datepicker--month__prev',
class_month_next: 'datepicker--month__next',
class_week: 'datepicker--week',
class_weekdays: 'datepicker--weekday',
class_day_disabled: 'datepicker--day__disabled',
class_day_selected: 'datepicker--day__selected',
class_day_today: 'datepicker--day__today',
class_day_infocus: 'datepicker--day__infocus',
class_day_outfocus: 'datepicker--day__outfocus',
class_box_months: 'datepicker--holder__months',
class_box_years: 'datepicker--holder__years',
class_box_weekdays: 'datepicker--holder__weekdays'

Different Implementation for javascript code

Custom date formats
$( '.datepicker' ).pickadate({
    format: 'You selected: dddd, dd/mm/yyyy',
    format_submit: 'yyyy-mm-dd'
})
The date formats follow these rules:

Rule Result Example
d Date 1-31
dd Date with leading zero 01-31
ddd Weekday – short Sun-Sat
dddd Weekday – full Sunday-Saturday
m Month 1-12
mm Month with leading zero 01-12
mmm Month name – short Jan-Dec
mmmm Month name – full January-December
yy Year – short 00-99
yyyy Year – full 2000-2999


Disable picker for native calendar
$( '.datepicker' ).pickadate({
    disable_picker: true
})

Minimum and maximum date range
$( '.datepicker' ).pickadate({
    date_min: [ 2012, 10, 14 ],
    date_max: 5
})


Screenshots

Plugin: pickadate.js


Please share your feedback in comments below.


demo
github
download

Advertisement
Tags: plugin, date, pickadate, jquery, weekday, month, year, javascript, code, css3, html5, layout, web

Leave a Comment

No Comment

© Creative3x Ltd.