• FRAMEWORK

DatePicker

As with other designs, there are two different design types in this component. See the following code block for sample use. 


$('.fo-select-outlined').select2({
    width: '100%',
    minimumResultsForSearch: Infinity,
    containerCssClass: 'outlined-filter'
});

// Changeable month, year and time
$('.fo-datetimepicker-changeable').datetimepicker({
    controlType: 'select',
    oneLine: true,
    changeMonth: true,
    changeYear: true,
    timeFormat: 'hh:mm tt'
});

Information; https://api.jqueryui.com/datepicker/ and github.com/trentrichardson/jQuery-Timepicker-Addon

DatePicker Range

See the following code block for sample use. 


  // Defined
    $(function () {
        $('#daterange').daterangepicker({
            "locale": {
                "format": "DD.MM.YYYY",
                "separator": " - ",
                "applyLabel": "Uygula",
                "cancelLabel": "İptal",
                "fromLabel": "Buradan",
                "toLabel": "Buraya",
                "customRangeLabel": "Özel Aralık",
                "weekLabel": "H",
                "daysOfWeek": [
                    "Pz",
                    "Pa",
                    "Sa",
                    "Ça",
                    "Pe",
                    "Cu",
                    "Ct"
                ],
                "monthNames": [
                    "Ocak",
                    "Şubat",
                    "Mart",
                    "Nisan",
                    "Mayıs",
                    "Haziran",
                    "Temmuz",
                    "Ağustos",
                    "Eylül",
                    "Ekim",
                    "Kasım",
                    "Aralık"
                ],
                "firstDay": 1
            },
            //"timePicker": true, // time picker açmak için
            //"showDropdowns": true, // ay ve yıl için dropdown çıkarmak için
            "startDate": "10.06.2020", // başlangıç tarihi
            "endDate": "11.07.2020", // bitiş tarihi
            "drops": "auto", // açılan kutunun altta ya da üstte olmasını otomatik ayarlıyor
            "buttonClasses": "fo-button fo-button-small", // buton class
            "applyButtonClasses": "fo-button fo-button-small",  // apply buton class
            "cancelClass": "fo-button-secondary fo-button-small mr-1",  // cancel buton class
            "showCustomRangeLabel": false
        }, function (start, end, label) {
            // console.log("Seçilen tarih: " + start.format('DD-MM-YYYY') + ' tarihinden ' + end.format('DD-MM-YYYY')); // Test için
        });
    });

    // Date Range Defined
    $(function () {
        $('#daterangedefined').daterangepicker({
            ranges: {
                'Bugün': [moment(), moment()],
                'Dün': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Son 7 Gün': [moment().subtract(6, 'days'), moment()],
                'Son 30 Gün': [moment().subtract(29, 'days'), moment()],
                'Bu Ay': [moment().startOf('month'), moment().endOf('month')],
                'Geçen Ay': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            "locale": {
                "format": "DD.MM.YYYY",
                "separator": " - ",
                "applyLabel": "Uygula",
                "cancelLabel": "İptal",
                "fromLabel": "Buradan",
                "toLabel": "Buraya",
                "customRangeLabel": "Özel Aralık",
                "weekLabel": "H",
                "daysOfWeek": [
                    "Pz",
                    "Pa",
                    "Sa",
                    "Ça",
                    "Pe",
                    "Cu",
                    "Ct"
                ],
                "monthNames": [
                    "Ocak",
                    "Şubat",
                    "Mart",
                    "Nisan",
                    "Mayıs",
                    "Haziran",
                    "Temmuz",
                    "Ağustos",
                    "Eylül",
                    "Ekim",
                    "Kasım",
                    "Aralık"
                ],
                "firstDay": 1
            },
            "startDate": "10.06.2020",
            "endDate": "11.07.2020",
            "drops": "auto",
            "buttonClasses": "fo-button fo-button-small",
            "applyButtonClasses": "fo-button fo-button-small",
            "cancelClass": "fo-button-secondary fo-button-small mr-1",
        }, function (start, end, label) {
            // console.log("Seçilen tarih: " + start.format('DD.MM.YYYY') + ' tarihinden ' + end.format('DD.MM.YYYY')); // Test için
        });
    });

// Clear Button
$(function () {
    $('#daterangeClear').daterangepicker({
        "autoUpdateInput": false,
        "buttonClasses": "fo-button fo-button-small",
        "applyButtonClasses": "fo-button fo-button-small",
        "cancelClass": "fo-button-secondary fo-button-small mr-1",
        "locale": {
            "format": "DD.MM.YYYY",
            "separator": " - ",
            "applyLabel": "Uygula",
            "cancelLabel": "Temizle",
            "fromLabel": "Buradan",
            "toLabel": "Buraya",
            "customRangeLabel": "Özel Aralık",
            "weekLabel": "H",
            "daysOfWeek": [
                "Pz",
                "Pa",
                "Sa",
                "Ça",
                "Pe",
                "Cu",
                "Ct"
            ],
            "monthNames": [
                "Ocak",
                "Şubat",
                "Mart",
                "Nisan",
                "Mayıs",
                "Haziran",
                "Temmuz",
                "Ağustos",
                "Eylül",
                "Ekim",
                "Kasım",
                "Aralık"
            ],
            "firstDay": 1
        },
    });

    $('#daterangeGate').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD.MM.YYYY') + ' - ' + picker.endDate.format('DD.MM.YYYY'));
    });

    $('#daterangeGate').on('cancel.daterangepicker', function (ev, picker) {
        $(this).val('');
    });
});

Options

startDate
(Date or string) The beginning date of the initially selected date range. If you provide a string, it must match the date format string set in your locale setting.
endDate:
(Date or string) The end date of the initially selected date range.
minDate:
(Date or string) The earliest date a user may select.
maxDate:
(Date or string) The latest date a user may select.
maxSpan:
(object) The maximum span between the selected start and end dates. Check off maxSpan in the configuration generator for an example of how to use this. You can provide any object the moment library would let you add to a date.
showDropdowns:
(true/false) Show year and month select boxes above calendars to jump to a specific month and year.
minYear:
(number) The minimum year shown in the dropdowns when showDropdowns is set to true.
maxYear:
(number) The maximum year shown in the dropdowns when showDropdowns is set to true.
showWeekNumbers:
(true/false) Show localized week numbers at the start of each week on the calendars.
showISOWeekNumbers:
(true/false) Show ISO week numbers at the start of each week on the calendars.
timePicker:
(true/false) Adds select boxes to choose times in addition to dates.
autoUpdateInput:
(true/false) Adds select boxes to choose times in addition to dates.
singleDatePicker:
(true/false) Adds select boxes to choose times in addition to dates.
showDropdowns:
(true/false) Adds select boxes to choose times in addition to dates.

More information; http://www.daterangepicker.com/#options

TimePicker

As with other designs, there are two different design types in this component. First use, type having a default time picker use.

// TimePicker
$('.fo-timepicker').timepicker({
        controlType: 'select',
        oneLine: true,
        timeFormat: 'hh:mm tt'
    });

The timepicker does inherit all options from datepicker. However, there are many options that are shared by them both, and many timepicker only options. More information; github.com/trentrichardson/jQuery-Timepicker-Addon

controlType
Default: 'slider' - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details. 
{
	create: function(tp_inst, obj, unit, val, min, max, step){	
		// generate whatever controls you want here, just return obj
	},
	options: function(tp_inst, obj, unit, opts, val){
		// if val==undefined return the value, else return obj
	},
	value: function(tp_inst, obj, unit, val){
		// if val==undefined return the value, else return obj
	}
}
showHour
Default: null - Whether to show the hour control. The default of null will use detection from timeFormat.
showMinute
Default: null - Whether to show the minute control. The default of null will use detection from timeFormat.
showSecond
Default: null - Whether to show the second control. The default of null will use detection from timeFormat.
showMillisec
Default: null - Whether to show the millisecond control. The default of null will use detection from timeFormat.
showMicrosec
Default: null - Whether to show the microsecond control. The default of null will use detection from timeFormat.
showTimezone
Default: null - Whether to show the timezone select.
showTime
Default: true - Whether to show the time selected within the datetimepicker.
stepHour
Default: 1 - Hours per step the slider makes.
stepMinute
Default: 1 - Minutes per step the slider makes.
stepSecond
Default: 1 - Seconds per step the slider makes.
stepMillisec
Default: 1 - Milliseconds per step the slider makes.
stepMicrosec
Default: 1 - Microseconds per step the slider makes.
hour
Default: 0 - Initial hour set.
minute
Default: 0 - Initial minute set.
second
Default: 0 - Initial second set.
millisec
Default: 0 - Initial millisecond set.
microsec
Default: 0 - Initial microsecond set. Note: Javascript's native Date object does not natively support microseconds. Timepicker adds ability to simply Date.setMicroseconds(m) and Date.getMicroseconds(). Date comparisons will not acknowledge microseconds. Use this only for display purposes.
timezone
Default: null - Initial timezone set. This is the offset in minutes. If null the browser's local timezone will be used. If you're timezone is "-0400" you would use -240. For backwards compatibility you may pass "-0400", however the timezone is stored in minutes and more reliable.
hourMin
Default: 0 - The minimum hour allowed for all dates.
minuteMin
Default: 0 - The minimum minute allowed for all dates.
secondMin
Default: 0 - The minimum second allowed for all dates.
millisecMin
Default: 0 - The minimum millisecond allowed for all dates.
microsecMin
Default: 0 - The minimum microsecond allowed for all dates.
hourMax
Default: 23 - The maximum hour allowed for all dates.
minuteMax
Default: 59 - The maximum minute allowed for all dates.
secondMax
Default: 59 - The maximum second allowed for all dates.
millisecMax
Default: 999 - The maximum millisecond allowed for all dates.
microsecMax
Default: 999 - The maximum microsecond allowed for all dates.
hourGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in hours) between labels.
minuteGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in minutes) between labels.
secondGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in seconds) between labels.
millisecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels.
microsecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in microseconds) between labels.

TimePicker with Slider

This type having a slider use. 

// TimePicker Slider
$('.fo-timepicker-slider').timepicker({
        timeFormat: 'h:mm PM',
        interval: 30,
        minTime: '10',
        maxTime: '24:00 PM',
        defaultTime: '9',
        startTime: '9:00',
        dynamic: true,
        dropdown: true,
        scrollbar: false,
        timeOnlyTitle: 'Lütfen seçiniz',
        timeText: 'Seçilen Süre',
        hourText: 'Saat',
        minuteText: 'Dakika',
        secondText: 'Saniye',
        currentText: 'Geçerli Saat',
        closeText: 'Kapat',
        addSliderAccess: true,
        sliderAccessArgs: { touchonly: false }
    });

Options

The timepicker does inherit all options from datepicker. However, there are many options that are shared by them both, and many timepicker only options. More information; trentrichardson.com/examples/timepicker/

controlType
Default: 'slider' - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details. 
{
	create: function(tp_inst, obj, unit, val, min, max, step){	
		// generate whatever controls you want here, just return obj
	},
	options: function(tp_inst, obj, unit, opts, val){
		// if val==undefined return the value, else return obj
	},
	value: function(tp_inst, obj, unit, val){
		// if val==undefined return the value, else return obj
	}
}
showHour
Default: null - Whether to show the hour control. The default of null will use detection from timeFormat.
showMinute
Default: null - Whether to show the minute control. The default of null will use detection from timeFormat.
showSecond
Default: null - Whether to show the second control. The default of null will use detection from timeFormat.
showMillisec
Default: null - Whether to show the millisecond control. The default of null will use detection from timeFormat.
showMicrosec
Default: null - Whether to show the microsecond control. The default of null will use detection from timeFormat.
showTimezone
Default: null - Whether to show the timezone select.
showTime
Default: true - Whether to show the time selected within the datetimepicker.
stepHour
Default: 1 - Hours per step the slider makes.
stepMinute
Default: 1 - Minutes per step the slider makes.
stepSecond
Default: 1 - Seconds per step the slider makes.
stepMillisec
Default: 1 - Milliseconds per step the slider makes.
stepMicrosec
Default: 1 - Microseconds per step the slider makes.
hour
Default: 0 - Initial hour set.
minute
Default: 0 - Initial minute set.
second
Default: 0 - Initial second set.
millisec
Default: 0 - Initial millisecond set.
microsec
Default: 0 - Initial microsecond set. Note: Javascript's native Date object does not natively support microseconds. Timepicker adds ability to simply Date.setMicroseconds(m) and Date.getMicroseconds(). Date comparisons will not acknowledge microseconds. Use this only for display purposes.
timezone
Default: null - Initial timezone set. This is the offset in minutes. If null the browser's local timezone will be used. If you're timezone is "-0400" you would use -240. For backwards compatibility you may pass "-0400", however the timezone is stored in minutes and more reliable.
hourMin
Default: 0 - The minimum hour allowed for all dates.
minuteMin
Default: 0 - The minimum minute allowed for all dates.
secondMin
Default: 0 - The minimum second allowed for all dates.
millisecMin
Default: 0 - The minimum millisecond allowed for all dates.
microsecMin
Default: 0 - The minimum microsecond allowed for all dates.
hourMax
Default: 23 - The maximum hour allowed for all dates.
minuteMax
Default: 59 - The maximum minute allowed for all dates.
secondMax
Default: 59 - The maximum second allowed for all dates.
millisecMax
Default: 999 - The maximum millisecond allowed for all dates.
microsecMax
Default: 999 - The maximum microsecond allowed for all dates.
hourGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in hours) between labels.
minuteGrid
Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in minutes) between labels.
secondGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in seconds) between labels.
millisecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels.
microsecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in microseconds) between labels.

DatePicker Filled

See the following code block for sample use.

// Default
datePickerContainer = $('.fo-datepicker');
datePickerContainer.find('input').datepicker({
    //showButtonPanel: true
});
// Changeable
datePickerContainerChangeable = $('.fo-datepicker-changeable');
var fullMonthNames = $.datepicker.regional['tr'].monthNames;
datePickerContainerChangeable.find('input').datepicker({
    monthNamesShort: fullMonthNames,
    changeMonth: true,
    changeYear: true,
    yearRange: "-90:+10",
    maxDate: "+10Y",
    minDate: "-90Y"
});

The timepicker does inherit all options from datepicker. However, there are many options that are shared by them both, and many timepicker only options. More information; github.com/trentrichardson/jQuery-Timepicker-Addon

controlType
Default: 'slider' - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details.
millisecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels.
microsecGrid
Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in microseconds) between labels.

Inline

See the following code block for sample use.

$(".fo-datepicker-inline").datepicker({});

More information; Information; https://api.jqueryui.com/datepicker/