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.

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

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

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

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

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

<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'

});

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

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

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

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

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

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

$('#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: ''
});

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

$('#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
        }
    ]
});

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