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

Usage

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

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

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

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';
});

 

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]);

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'

});

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
});

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
	}
});

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
	}
});

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
	}
});

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
});

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.
$('#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

$('#selector').pickdate({
    disable: [
        [2016,0,12],
        [2016,0,13],
        [2016,0,14]
    ]
});
$('#selector').pickdate({
    disable: [
        new Date(2016,0,12),
        new Date(2016,0,13),
        new Date(2016,0,14)
    ]
});
$('#selector').pickdate({
    disable: [
        2, 4, 6
    ]
});
$('#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

$('#selector').pickdate({
    disable: [
        true,
        3,
        [2016,0,13],
        new Date(2016,0,14)
    ]
});
$('#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

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