Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

info_outline Only datepicker has been implemented at this moment.

Examples

A basic en example:

Usage

Activate the datepicker via simple javascript, for example: $('#selector').pickdate();

<input class="form-control" id="selector" type="text">

$('#selector').pickdate();

default example:

Usage

Activate the datepicker via simple javascript, for example: $('#example').persianDatepicker({altField: '#defaultAlt';});

<input class="form-control" id="example" type="text">

$('#example').persianDatepicker({
    altField: '#defaultAlt';
});

inline example:

Usage

Activate the datepicker via simple javascript, for example: $("#inlineDatepicker").pDatepicker("setDate", [1391, 12, 1, 11, 14]);

<input class="form-control" id="example" type="text">
<div id="inlineDatepicker" data-date="2016/12/13 12:20"> </div>

window.pd = $("#inlineDatepicker").persianDatepicker({
	timePicker: {
		enabled: true
	},
	altField: '#inlineDatepickerAlt',
	altFormat: "YYYY MM DD HH:mm:ss",
//            minDate:1258675200000,
//            maxDate:1358675200000,
	checkDate: function (unix) {
		var output = true;
		var d = new persianDate(unix);
		if (d.date() == 20) {
			output = false;
		}
		return output;
	},
	checkMonth: function (month) {
		var output = true;
		if (month == 1) {
			output = false;
		}
		return output;

	}, checkYear: function (year) {
		var output = true;
		if (year == 1396) {
			output = false;
		}
		return output;
	}

}).data('datepicker');

$("#inlineDatepicker").pDatepicker("setDate", [1391, 12, 1, 11, 14]);

sync with pasted data example:

Usage

Activate the datepicker via simple javascript, for example:

<input id="observer" type="text" class="form-control"/>
<input id="observerAlt" type="text" class="form-control"/>

$("#observer").persianDatepicker({
	altField: '#observerAlt',
	altFormat: "YYYY MM DD HH:mm:ss",
	observer: true,
	format: 'YYYY/MM/DD'

});

Time Picker example:

Usage

Activate the datepicker via simple javascript, for example:

<input id="timepicker" type="text" class="form-control"/>
<input type="text" id="timepickerAltField" class="form-control"/>

$("#timepicker").persianDatepicker({
	altField: '#timepickerAltField',
	altFormat: "YYYY MM DD HH:mm:ss",
	format: "HH:mm:ss a",
	onlyTimePicker: true
});

Month Picker example:

Usage

Activate the datepicker via simple javascript, for example:

<input id="monthpicker" type="text" class="form-control"/>
<input type="text" id="monthpickerAlt" class="form-control"/>

$("#monthpicker").persianDatepicker({
	format: " MMMM YYYY",
	altField: '#monthpickerAlt',
	altFormat: "YYYY MM DD HH:mm:ss",
	yearPicker: {
		enabled: false
	},
	monthPicker: {
		enabled: true
	},
	dayPicker: {
		enabled: false
	}
});

Year Picker example:

Usage

Activate the datepicker via simple javascript, for example:

<input id="yearpicker" type="text" class="form-control"/>
<input type="text" id="yearpickerAlt" class="form-control"/>

$("#yearpicker").persianDatepicker({
	format: "YYYY",
	altField: '#yearpickerAlt',
	altFormat: "YYYY MM DD HH:mm:ss",
	dayPicker: {
		enabled: false
	},
	monthPicker: {
		enabled: false
	},
	yearPicker: {
		enabled: true
	}
});

Year And Month Picker example:

Usage

Activate the datepicker via simple javascript, for example:

<input id="yearAndMonthpicker" type="text" class="form-control"/>
<input type="text" id="yearAndMonthpickerAlt" class="form-control"/>

$("#yearAndMonthpicker").persianDatepicker({
	format: "YYYY MM",
	altFormat: "YYYY MM DD HH:mm:ss",
	altField: '#yearAndMonthpickerAlt',
	dayPicker: {
		enabled: false
	},
	monthPicker: {
		enabled: true
	},
	yearPicker: {
		enabled: true
	}
});

With Min and Max example:

Usage

Activate the datepicker via simple javascript, for example:

<div id="inlineDatepickerWithMinMax"></div>
<input id="inlineDatepickerWithMinMaxAlt" type="text" class=" form-control"/>

$("#inlineDatepickerWithMinMax").persianDatepicker({
	altField: '#inlineDatepickerWithMinMaxAlt',
	altFormat: "YYYY MM DD HH:mm:ss",
	minDate: 1416983467029,
	maxDate: 1419983467029
});

Custom Date Disabled example:

Usage

Activate the datepicker via simple javascript, for example:

<div id="customDisabled"></div>
<input id="customDisabledAlt" type="text" class=" form-control"/>

$("#customDisabled").persianDatepicker({
	timePicker: {
		enabled: true
	},
	altField: '#customDisabledAlt',
	checkDate: function (unix) {
		var output = true;
		var d = new persianDate(unix);
		if (d.date() == 20 | d.date() == 21 | d.date() == 22) {
			output = false;
		}
		return output;
	},
	checkMonth: function (month) {
		var output = true;
		if (month == 1) {
			output = false;
		}
		return output;
	}, checkYear: function (year) {
		var output = true;
		if (year == 1396) {
			output = false;
		}
		return output;
	}
});

Options

Alternatively, options can be passed on to override some default datepicker behaviours.

Option	Description
cancel	Change the text of the cancel button or use `cancel: ''` to hide the button. Default is `'Cancel'`.
closeOnCancel	Close the picker when the cancel button is clicked. Default is `true`. Set to `false` to change this behaviour.
closeOnSelect	Close the picker when a date is selected. Default is `false`. Set to `true` to change this behaviour.
container	Change where to insert the datepicker element by passing any valid CSS selector. Default is `'body'`. Set it to `''` to insert the picker right after the associated `input` element
disable	Disable a date or a set of dates from being selectable in the picker. See below for detailed usage.
firstDay	Change the first day of the week. Default is `0` which sets it to Sunday. Set it to Monday by changing the value to `1`.
format	Set the date format. See below for a full list of available date format rules.
formatSubmit	Optionally, set a different date format for the value to be submitted to the server. When `formatSubmit` is specified, a hidden `input` will be created to hold the value
max	Set the maximum selectable date.
min	Set the minimum selectable date.
monthsFull	Change labels of months.
monthsShort	Change abbreviations of months.
ok	Change the text of the OK button or set it to `''` to hide the button. Default is `'OK'`.
onClose, onOpen, onRender, onSet, onStart, onStop	Fire events as the user interacts with the picker. Within scope of these events, `this` refers to the picker.
selectMonths	Default is `false`. Set it to `true` to display a dropdown menu to pick the month.
selectYears	Default is `false`. Set it to `true` to display a dropdown menu to pick the year or use an even integer to specify the number of years to be shown in the dropdown menu (half after and the other half before the year in focus).
today	Change the text of the today button or pass an empty value to hide the button: `today: ''`. Default is `'Today'`.
weekdaysFull	Change labels of weekdays.
weekdaysShort	Change abbreviations of weekdays.

A more advanced example

$('#selector').pickdate({
    cancel: 'Clear',
    closeOnCancel: false,
    closeOnSelect: true,
    container: '',
    firstDay: 1,
    format: 'You selecte!d: dddd, d mm, yy', // escape any formatting characters with an exclamation mark
    formatSubmit: 'dd/mmmm/yyyy',
    ok: 'Close',
    onClose: function () {
        $('body').snackbar({
            content: 'Datepicker closes'
        });
    },
    onOpen: function () {
        $('body').snackbar({
            content: 'Datepicker opens'
        });
    }
    selectMonths: true,
    selectYears: 10,
    today: ''
});

Disable

Using arrays formatted as [YEAR,MONTH,DATE]

$('#selector').pickdate({
    disable: [
        [2016,0,12],
        [2016,0,13],
        [2016,0,14]
    ]
});

Using javascript dates

$('#selector').pickdate({
    disable: [
        new Date(2016,0,12),
        new Date(2016,0,13),
        new Date(2016,0,14)
    ]
});

Using numbers as days of the week (1 to 7)

$('#selector').pickdate({
    disable: [
        2, 4, 6
    ]
});

Using objects as a range of dates

$('#selector').pickdate({
    disable: [
        {
            from: [2016,0,12],
            to: 2
        }
    ]
});

The values for from and to can be:

Array formatted as [YEAR,MONTH,DATE] or javascript date object
Integers representing dates relative to the other
- from can only be negative
- to can only be positive
Use true to set it as today

Disable with exceptions

Disable all with a set of exceptions

$('#selector').pickdate({
    disable: [
        true,
        3,
        [2016,0,13],
        new Date(2016,0,14)
    ]
});

Enable dates that fall within a range of disabled dates by adding inverted

$('#selector').pickdate({
    disable: [
        {
            from: [2016,0,10],
            to: [2016,0,30]
        },
        [2016,0,13, 'inverted'],
        {
            from: [2016,0,19],
            to: [2016,0,21],
            inverted: true
        }
    ]
});

Format

The following rules can be used to format any date:

Rule	Description	Result
`d`	Date of the month	1 – 31
`dd`	Date of the month with a leading zero	01 – 31
`ddd`	Day of the week in short form	Can be changed via changing `weekdaysShort`. Default is S - S.
`dddd`	Day of the week in full form	Can be changed via changing `weekdaysFull`. Default is Sun - Sat.
`m`	Month of the year	1 – 12
`mm`	Month of the year with a leading zero	01 – 12
`mmm`	Month name in short form	Can be changed via changing `monthsShort`. Default is Jan - Dec.
`mmmm`	Month name in full form	Can be changed via changing `monthsFull`. Default is January – December.
`yy`	Year in short form	00 – 99
`yyyy`	Year in full form	2000 – 2999

Max/Min

Using arrays formatted as [YEAR,MONTH,DATE]

$('#selector').pickdate({
    max: [2016,0,30],
    min: [2016,0,10]
});

Using javascript dates

$('#selector').pickdate({
    max: new Date(2016,0,30),
    min: new Date(2016,0,10)
});

Using a boolean or integers

$('#selector').pickdate({
    max: true, // true sets it to today
    min: -10   // an integer (negative/positive) sets it relative to today
});

Fork me on GitHubcode dev62.comshare Visit material-rtllink