### Install AnyPicker via Package Managers

Source: https://context7.com/nehakadam/anypicker/llms.txt

Install the library using npm or bower.

```bash
npm install anypicker
# or
bower install anypicker
```

--------------------------------

### Install AnyPicker via bower

Source: https://github.com/nehakadam/anypicker/blob/master/README.md

Use bower to install the AnyPicker library. This is an alternative package manager for web development.

```bash
bower install anypicker
```

--------------------------------

### Initialize AnyPicker with iOS Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-Date.htm

This example shows how to apply the iOS theme to the AnyPicker datetime mode. It uses the same date format as the default example.

```javascript
$("#ip-ios").AnyPicker( {
  mode: "datetime",
  dateTimeFormat: "MMMM d, yyyy",
  theme: "iOS" // "Default", "iOS", "Android", "Windows"
});
```

--------------------------------

### Initialize AnyPicker with Inline Layout

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Layout-Inline.htm

JavaScript setup for populating currency data and initializing AnyPicker instances with different themes.

```javascript
var sArrCurrency = []; function getCurrencyList() { for(var iTempIndex = 0; iTempIndex < currencies.length; iTempIndex++) { var oCurrency = currencies[iTempIndex]; sArrCurrency.push( { val: oCurrency["code"], label: oCurrency["symbol_native"] + " - " + oCurrency["code"] }); } } var io18n = { headerTitle: "Select Currency" }, oArrComponents = [ { component: 0, name: "currency", label: "Currency" } ], oArrDataSource = [ { component: 0, data: sArrCurrency } ]; $(document).ready(function() { getCurrencyList(); $("#ip-de").AnyPicker( { mode: "select", layout: "inline", relativeTo: ".picker-cont-de", inputChangeEvent: "onChange", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource }); $("#ip-ios").AnyPicker( { mode: "select", layout: "inline", relativeTo: ".picker-cont-ios", inputChangeEvent: "onChange", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "iOS" // "Default", "iOS", "Android", "Windows" }); $("#ip-android").AnyPicker( { mode: "select", layout: "inline", relativeTo: ".picker-cont-and", inputChangeEvent: "onChange", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "Android" // "Default", "iOS", "Android", "Windows" }); $("#ip-wp").AnyPicker( { mode: "select", layout: "inline", relativeTo: ".picker-cont-windows", inputChangeEvent: "onChange", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "Windows" // "Default", "iOS", "Android", "Windows" }); });
```

--------------------------------

### Build AnyPicker with Grunt

Source: https://github.com/nehakadam/anypicker/blob/master/doc/Doc.htm

Commands for installing dependencies and running the default Grunt build task.

```bash
npm install
grunt
```

--------------------------------

### Install AnyPicker via npm

Source: https://github.com/nehakadam/anypicker/blob/master/README.md

Use npm to install the AnyPicker library. This is a common method for managing project dependencies in modern web development.

```bash
npm install anypicker
```

--------------------------------

### Configure AnyPicker for Start Date and Time

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-DateTime.htm

Initializes the start date picker with datetime mode. Sets maximum date based on end date and selects an initial start date. Logs the maximum selectable date.

```javascript
var oAP1, oAP2;
var dStartD, dEndD, sStartD, sEndD;
dStartD = new Date(2015, 9, 20, 0, 0, 0, 0);
dEndD = new Date(dStartD.getTime() + (5 * $.AnyPicker.extra.iMS.d));
$(document).ready(function() {
    $("#ip-start-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy hh:mm AA",
        dateTimeFormat: "MMM dd,yyyy hh:mm AA",
        onInit: function() {
            oAP1 = this;
            sEndD = oAP1.formatOutputDates(dEndD, "dd MM yyyy hh:mm AA");
            oAP1.setMaximumDate(sEndD);
            oAP1.setSelectedDate(dStartD);
            console.log("maxValue : " + sEndD);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sStartD = sOutput;
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(sStartD);
            console.log("minValue : " + oAP2.setting.minValue);
        }
    });
```

--------------------------------

### Initialize AnyPicker with Fixed Layout and iOS Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Layout-Fixed-Date.htm

This example demonstrates initializing AnyPicker with a fixed layout and the iOS theme for datetime selection. It includes an onChange event handler.

```javascript
$(document).ready(function() {
    $("#ip-ios-1").AnyPicker( {
        mode: "datetime",
        dateTimeFormat: "MMMM d, yyyy",
        layout: "fixed",
        onChange: function(iRow, iComp, oSelectedValues) {
            console.log("Changed Value : " + iRow + " " + iComp + " " + oSelectedValues);
        },
        theme: "iOS" // "Default", "iOS", "Android", "Windows"
    });
});
```

--------------------------------

### Configure AnyPicker with onChange Event

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-ReflectChanges.htm

Use the 'onChange' event to capture user selections in AnyPicker. This example sets up a datetime picker with a specific format and logs the changed values.

```javascript
$(document).ready(function() {
    $("#ip-de").AnyPicker( {
        mode: "datetime",
        dateTimeFormat: "MMM dd,yyyy hh:mm AA",
        inputChangeEvent: "onChange",
        onChange: function(iRow, iComp, oSelectedValues) {
            console.log("Changed Value : " + iRow + " " + iComp + " " + oSelectedValues);
        }
    });
});
```

--------------------------------

### JavaScript: Initialize AnyPicker with Windows Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-ParseInput.htm

Initializes AnyPicker with a 'select' mode, showing component labels, and using custom parsing/formatting functions. This example applies the 'Windows' theme.

```javascript
$("#ip-wp").AnyPicker( { mode: "select", showComponentLabel: true, components: oArrComponents, dataSource: oArrDataSource, parseInput: cfParseInput, formatOutput: cfFormatOutput, theme: "Windows" // "Default", "iOS", "Android", "Windows" });
```

--------------------------------

### Initialize AnyPicker for Start Date

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-Date.htm

Initializes the start date picker with datetime mode, specifying input and output formats. Sets maximum date constraints and initial selected date during initialization.

```javascript
var oAP1, oAP2;
var dStartD, dEndD, sStartD, sEndD;
dStartD = new Date(2015, 9, 20, 0, 0, 0, 0);
dEndD = new Date(dStartD.getTime() + (5 * $.AnyPicker.extra.iMS.d));
$(document).ready(function() {
    $("#ip-start-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy",
        dateTimeFormat: "MMM dd,yyyy",
        maxRows: 200,
        onInit: function() {
            oAP1 = this;
            sEndD = oAP1.formatOutputDates(dEndD, "dd/MM/yyyy");
            oAP1.setMaximumDate(sEndD);
            oAP1.setSelectedDate(dStartD);
            console.log("maxValue : " + sEndD + " " + oAP1.tmp.selectedDate);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sStartD = sOutput;
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(dStartD);
            console.log("minValue : " + oAP2.setting.minValue + " " + oAP1.tmp.selectedDate);
        }
    });
```

--------------------------------

### Initialize AnyPicker with Min and Max Date Constraints

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-Date-MinMax-Past.htm

Configures the picker to restrict selection between a fixed start date and a date one week later.

```javascript
$(document).ready(function() { $("#ip-de").AnyPicker( { mode: "datetime", dateTimeFormat: "yyyy-MM-dd", minValue: new Date("2016-05-06"), maxValue: new Date(new Date("2016-05-06").getTime()+1000*60*60*24*7) }); });
```

--------------------------------

### Configure AnyPicker for Start Time

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-Time.htm

Initializes the start time picker with 'datetime' mode and 'hh:mm AA' format. Sets the maximum selectable date based on the end date and selects an initial start date. The onSetOutput callback updates the end date picker's minimum date and selection.

```javascript
var oAP1, oAP2;
var dStartD, dEndD, sStartD, sEndD;
dStartD = new Date(2015, 9, 20, 10, 0, 0, 0);
dEndD = new Date(2015, 9, 20, 19, 0, 0, 0);
$(document).ready(function() {
    $("#ip-start-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "hh:mm AA",
        dateTimeFormat: "hh:mm AA",
        onInit: function() {
            oAP1 = this;
            sEndD = oAP1.formatOutputDates(dEndD, "hh:mm AA");
            oAP1.setMaximumDate(sEndD);
            oAP1.setSelectedDate(dStartD);
            console.log("maxValue : " + sEndD);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sStartD = sOutput;
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(sStartD);
            console.log("minValue : " + oAP2.setting.minValue);
        }
    });
```

--------------------------------

### JavaScript: Initialize AnyPicker with Default Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-ParseInput.htm

Initializes AnyPicker with a 'select' mode, showing component labels, and using the custom `cfParseInput` and `cfFormatOutput` functions. This example uses the default theme.

```javascript
$(document).ready(function() { $("#ip-de").AnyPicker( { mode: "select", showComponentLabel: true, components: oArrComponents, dataSource: oArrDataSource, parseInput: cfParseInput, formatOutput: cfFormatOutput });
```

--------------------------------

### JavaScript: Initialize AnyPicker with iOS Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-ParseInput.htm

Initializes AnyPicker with a 'select' mode, showing component labels, and using custom parsing/formatting functions. This example applies the 'iOS' theme.

```javascript
$("#ip-ios").AnyPicker( { mode: "select", showComponentLabel: true, components: oArrComponents, dataSource: oArrDataSource, parseInput: cfParseInput, formatOutput: cfFormatOutput, theme: "iOS" // "Default", "iOS", "Android", "Windows" });
```

--------------------------------

### Initializing AnyPicker with Default Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-Conditions.htm

Initializes the AnyPicker plugin on an element with the ID 'ip-de' using the default theme and custom event handlers. This setup is for a select mode with multiple components.

```javascript
$(document).ready(function() {
    $("#ip-de").AnyPicker( {
        mode: "select",
        init: cfInit,
        showComponentLabel: true,
        components: oArrComponents,
        dataSource: getDataSource("#ip-de"),
        parseInput: cfParseInput,
        formatOutput: cfFormatOutput,
        onChange: cfOnChange
    });

```

--------------------------------

### Create Linked Start and End Date Pickers

Source: https://context7.com/nehakadam/anypicker/llms.txt

Synchronize two date pickers by updating the minimum or maximum constraints of one based on the selection of the other using onInit and onSetOutput callbacks.

```javascript
var oAP1, oAP2;
var dStartD, dEndD, sStartD, sEndD;

// Initialize start and end dates
dStartD = new Date(2015, 9, 20, 0, 0, 0, 0);
dEndD = new Date(dStartD.getTime() + (5 * $.AnyPicker.extra.iMS.d)); // 5 days later

$(document).ready(function() {
    // Start Date Picker
    $("#ip-start-date").AnyPicker({
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy hh:mm AA",
        dateTimeFormat: "MMM dd,yyyy hh:mm AA",

        onInit: function() {
            oAP1 = this;
            sEndD = oAP1.formatOutputDates(dEndD, "dd MM yyyy hh:mm AA");
            oAP1.setMaximumDate(sEndD);
            oAP1.setSelectedDate(dStartD);
        },

        onSetOutput: function(sOutput, oSelectedValues) {
            sStartD = sOutput;
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(sStartD);
        }
    });

    // End Date Picker
    $("#ip-end-date").AnyPicker({
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy hh:mm AA",
        dateTimeFormat: "MMM dd,yyyy hh:mm AA",

        onInit: function() {
            oAP2 = this;
            sStartD = oAP2.formatOutputDates(dStartD);
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(dEndD);
        },

        onSetOutput: function(sOutput, oSelectedValues) {
            sEndD = sOutput;
            oAP1.setMaximumDate(sEndD);
        }
    });
});
```

--------------------------------

### JavaScript: Initialize AnyPicker with Android Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-ParseInput.htm

Initializes AnyPicker with a 'select' mode, showing component labels, and using custom parsing/formatting functions. This example applies the 'Android' theme.

```javascript
$("#ip-android").AnyPicker( { mode: "select", showComponentLabel: true, components: oArrComponents, dataSource: oArrDataSource, parseInput: cfParseInput, formatOutput: cfFormatOutput, theme: "Android" // "Default", "iOS", "Android", "Windows" });
```

--------------------------------

### Initializing AnyPicker with Android Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-Conditions.htm

Initializes the AnyPicker plugin on an element with the ID 'ip-android' using the 'Android' theme. This setup is for select mode and utilizes custom functions for data source, input parsing, output formatting, and change handling.

```javascript
    $("#ip-android").AnyPicker( {
        mode: "select",
        init: cfInit,
        showComponentLabel: true,
        components: oArrComponents,
        dataSource: getDataSource("#ip-android"),
        parseInput: cfParseInput,
        formatOutput: cfFormatOutput,
        onChange: cfOnChange,
        theme: "Android" // "Default", "iOS", "Android", "Windows"
    });

```

--------------------------------

### Linked Start/End Date Pickers

Source: https://context7.com/nehakadam/anypicker/llms.txt

Implement interconnected date pickers where the selection in one picker affects the available options in another. For example, setting a start date automatically updates the minimum selectable date for an end date picker.

```APIDOC
## Linked Start/End Date Pickers

Create interconnected date pickers where selecting a start date automatically updates the minimum value for the end date picker.

### Description
This setup involves initializing two AnyPicker instances. The `onSetOutput` callback of the start date picker is used to update the `minimumDate` of the end date picker, and vice-versa for maximum date constraints. This ensures a logical date range selection between the two pickers.
```

--------------------------------

### Initialize AnyPicker with Windows Theme and Custom Formats

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-DiffFormats.htm

Set up AnyPicker using the 'Windows' theme, with 'dd/MM/yyyy' for input and 'MMMM d, yyyy' for the displayed date and time.

```javascript
 $("#ip-wp").AnyPicker( {
    mode: "datetime",
    inputDateTimeFormat: "dd/MM/yyyy",
    dateTimeFormat: "MMMM d, yyyy",
    theme: "Windows" // "Default", "iOS", "Android", "Windows"
  });
```

--------------------------------

### Initialize AnyPicker with Themes

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Common-Theme.htm

Configures AnyPicker instances with specific themes and custom i18n settings. Requires jQuery and the AnyPicker plugin.

```css
body { margin: 0px; } .input-cont { width: 300px; padding: 20px; } input { width: 200px; height: 30px; padding: 3px 10px; margin-bottom: 16px; }
```

```javascript
$(document).ready(function() { $("#ip-de").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy" }); $("#ip-ios").AnyPicker( { mode: "datetime", dateTimeFormat: "MMMM d,yyyy", theme: "iOS", // "Default", "iOS", "Android", "Windows" i18n: { headerTitle: "Reminder", setButton: "Save" } }); $("#ip-android").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy", theme: "Android" // "Default", "iOS", "Android", "Windows" }); $("#ip-wp").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy", theme: "Windows" // "Default", "iOS", "Android", "Windows" }); });
```

--------------------------------

### Initialize AnyPicker with Themes

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-DataVal.htm

Initializes AnyPicker instances with custom row view and output handlers across different platform themes.

```javascript
$(document).ready(function() { $(".btn-de-Rate").AnyPicker( { mode: "select", components: oArrComponents, dataSource: oArrDataSource, onInit: cfOnInit, rowView: cfRowView, setOutput: cfSetOutput }); $(".btn-ios-Rate").AnyPicker( { mode: "select", components: oArrComponents, dataSource: oArrDataSource, onInit: cfOnInit, rowView: cfRowView, setOutput: cfSetOutput, theme: "iOS" // "Default", "iOS", "Android", "Windows" }); $(".btn-and-Rate").AnyPicker( { mode: "select", components: oArrComponents, dataSource: oArrDataSource, onInit: cfOnInit, rowView: cfRowView, setOutput: cfSetOutput, theme: "Android" // "Default", "iOS", "Android", "Windows" }); $(".btn-wp-Rate").AnyPicker( { mode: "select", components: oArrComponents, dataSource: oArrDataSource, onInit: cfOnInit, rowView: cfRowView, setOutput: cfSetOutput, theme: "Windows" // "Default", "iOS", "Android", "Windows" }); });
```

--------------------------------

### Initialize Linked AnyPicker Date Pickers

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd.htm

Configures two AnyPicker instances where the start date picker sets a minimum for the end date picker, and the end date picker sets a maximum for the start date picker.

```javascript
var oAP1, oAP2; var dStartD, dEndD, sStartD, sEndD; dStartD = new Date(2015, 9, 20, 0, 0, 0, 0); dEndD = new Date(dStartD.getTime() + (5 * $.AnyPicker.extra.iMS.d)); $(document).ready(function() { $("#ip-start-date").AnyPicker( { mode: "datetime", inputDateTimeFormat: "dd/MM/yyyy hh:mm AA", dateTimeFormat: "MMM dd,yyyy hh:mm AA", onInit: function() { oAP1 = this; sEndD = oAP1.formatOutputDates(dEndD, "dd MM yyyy hh:mm AA"); oAP1.setMaximumDate(sEndD); oAP1.setSelectedDate(dStartD); console.log("maxValue : " + sEndD); }, onSetOutput: function(sOutput, oSelectedValues) { sStartD = sOutput; oAP2.setMinimumDate(sStartD); oAP2.setSelectedDate(sStartD); console.log("minValue : " + oAP2.setting.minValue); } }); $("#ip-end-date").AnyPicker( { mode: "datetime", inputDateTimeFormat: "dd/MM/yyyy hh:mm AA", dateTimeFormat: "MMM dd,yyyy hh:mm AA", onInit: function() { oAP2 = this; sStartD = oAP2.formatOutputDates(dStartD); oAP2.setMinimumDate(sStartD); oAP2.setSelectedDate(dEndD); console.log("minValue : " + sStartD); }, onSetOutput: function(sOutput, oSelectedValues) { sEndD = sOutput; oAP1.setMaximumDate(sEndD); console.log("maxValue : " + oAP1.setting.maxValue); } }); });
```

--------------------------------

### Configure AnyPicker for End Time

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-Time.htm

Initializes the end time picker with 'datetime' mode and 'hh:mm AA' format. Sets the minimum selectable date based on the start date and selects an initial end date. The onSetOutput callback updates the start date picker's maximum date.

```javascript
 $("#ip-end-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "hh:mm AA",
        dateTimeFormat: "hh:mm AA",
        onInit: function() {
            oAP2 = this;
            sStartD = oAP2.formatOutputDates(dStartD);
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(dEndD);
            console.log("minValue : " + sStartD);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sEndD = sOutput;
            oAP1.setMaximumDate(sEndD);
            console.log("maxValue : " + oAP1.setting.maxValue);
        }
    });
});
```

--------------------------------

### Initialize Multi-Component Select Picker

Source: https://context7.com/nehakadam/anypicker/llms.txt

Sets up a picker with multiple scrollable columns, useful for complex selections like duration.

```javascript
// Create data source arrays
var oArrData = [];

function createDataSource() {
    var oArrDataNum = [200, 23, 59];  // Max values for days, hours, minutes

    for (var i = 0; i < oArrDataNum.length; i++) {
        var iNum = oArrDataNum[i];
        var iStart = (i === 0) ? 1 : 0;
        var oArrDataComp = [];

        for (var j = iStart; j <= iNum; j++) {
            oArrDataComp.push({
                val: j.toString(),
                label: j.toString()
            });
        }
        oArrData.push(oArrDataComp);
    }
}

createDataSource();

// Define components with custom widths and alignment
var oArrComponents = [
    {
        component: 0,
        name: "day",
        label: "Days",
        width: "50%",
        textAlign: "center"
    },
    {
        component: 1,
        name: "hours",
        label: "Hours",
        width: "20%",
        textAlign: "center"
    },
    {
        component: 2,
        name: "minutes",
        label: "Minutes",
        width: "30%",
        textAlign: "center"
    }
];

// Define data sources for each component
var oArrDataSource = [
    { component: 0, data: oArrData[0] },
    { component: 1, data: oArrData[1] },
    { component: 2, data: oArrData[2] }
];

$(document).ready(function() {
    $("#duration-input").AnyPicker({
        mode: "select",
        showComponentLabel: true,  // Show "Days", "Hours", "Minutes" labels
        components: oArrComponents,
        dataSource: oArrDataSource,
        theme: "Default"
    });
});
```

--------------------------------

### Initialize AnyPicker with Default Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-MiddleRow.htm

Initializes AnyPicker for currency selection using the default theme. The `setOutput` function logs the selected values and updates internal arrays.

```javascript
var sArrCurrency = [];
function getCurrencyList() {
    for(var iTempIndex = 0; iTempIndex < currencies.length; iTempIndex++) {
        var oCurrency = currencies[iTempIndex];
        sArrCurrency.push( {
            val: oCurrency["code"],
            label: oCurrency["symbol_native"] + " - " + oCurrency["code"]
        });
    }
}

var io18n = {
    headerTitle: "Select Currency"
};
var oArrComponents = [
    {
        component: 0,
        name: "currency",
        label: "Currency"
    }
];
var oArrDataSource = [
    {
        component: 0,
        data: sArrCurrency
    }
];

$(document).ready(function() {
    getCurrencyList();
    var oArrValues = [], oArrLabels = [];
    $("#ip-de").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        onBeforeShowPicker: function() {
            return true;
        },
        setOutput: function(sOutLabel, oArrSelected, bIsManualChange) {
            var apo = this;
            console.log("Value Changed : " + bIsManualChange + " : " + sOutLabel);
            console.log("oArrSelected : " + JSON.stringify(oArrSelected));
            if(bIsManualChange) {
                for(var i = 0; i < oArrSelected.values.length; i++) {
                    oArrValues[i] = oArrSelected.values[i].val;
                    oArrLabels[i] = oArrSelected.values[i].label;
                }
                console.log("oArrValues : " + JSON.stringify(oArrValues));
                console.log("oArrLabels : " + JSON.stringify(oArrLabels));
            }
            $(apo.elem).val("");
        }
    });

    $("#ip-ios").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        onBeforeShowPicker: function() {
            return true;
        },
        setOutput: function(sOutLabel, oArrSelected, bIsManualChange) {
            var apo = this;
            console.log("Value Changed : " + bIsManualChange + " : " + sOutLabel);
            console.log("oArrSelected : " + JSON.stringify(oArrSelected));
            if(bIsManualChange) {
                for(var i = 0; i < oArrSelected.values.length; i++) {
                    oArrValues[i] = oArrSelected.values[i].val;
                    oArrLabels[i] = oArrSelected.values[i].label;
                }
                console.log("oArrValues : " + JSON.stringify(oArrValues));
                console.log("oArrLabels : " + JSON.stringify(oArrLabels));
            }
            $(apo.elem).val("");
        },
        theme: "iOS" // "Default", "iOS", "Android", "Windows"
    });

    $("#ip-android").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        onBeforeShowPicker: function() {
            return true;
        },
        setOutput: function(sOutLabel, oArrSelected, bIsManualChange) {
            var apo = this;
            console.log("Value Changed : " + bIsManualChange + " : " + sOutLabel);
            console.log("oArrSelected : " + JSON.stringify(oArrSelected));
            if(bIsManualChange) {
                for(var i = 0; i < oArrSelected.values.length; i++) {
                    oArrValues[i] = oArrSelected.values[i].val;
                    oArrLabels[i] = oArrSelected.values[i].label;
                }
                console.log("oArrValues : " + JSON.stringify(oArrValues));
                console.log("oArrLabels : " + JSON.stringify(oArrLabels));
            }
            $(apo.elem).val("");
        },
        theme: "Android" // "Default", "iOS", "Android", "Windows"
    });

    $("#ip-wp").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        onBeforeShowPicker: function() {
            return true;
        },
        setOutput: function(sOutLabel, oArrSelected, bIsManualChange) {
            var apo = this;
            console.log("Value Changed : " + bIsManualChange + " : " + sOutLabel);
            console.log("oArrSelected : " + JSON.stringify(oArrSelected));
            if(bIsManualChange) {
                for(var i = 0; i < oArrSelected.values.length; i++) {
                    oArrValues[i] = oArrSelected.values[i].val;
                    oArrLabels[i] = oArrSelected.values[i].label;
                }
                console.log("oArrValues : " + JSON.stringify(oArrValues));
                console.log("oArrLabels : " + JSON.stringify(oArrLabels));
            }
            $(apo.elem).val("");
        },
        theme: "Windows", // "Default", "iOS", "Android", "Windows"
        componentsCoverFullWidth: true
    });

    setInterval(function() {
        console.log("oArrValues Final : " + JSON.stringify(oArrValues));
        console.log("oArrLabels Final : " + JSON.stringify(oArrLabels));
    }, (5000));
});
```

--------------------------------

### Initialization with HTML Elements

Source: https://context7.com/nehakadam/anypicker/llms.txt

How to initialize AnyPicker using existing HTML select or list elements as data sources.

```APIDOC
## Initialization with HTML Elements

### Description
AnyPicker can be bound to `<select>` or `<ul>` elements to automatically populate picker options.

### Configuration
- **mode**: Set to "select" for list-based picking.
- **inputElement**: Selector for the input field where the selected value should be displayed.
- **i18n**: Object for internationalization settings (e.g., headerTitle).

### Example
$("#element-id").AnyPicker({
    mode: "select",
    inputElement: "#display-input-id"
});
```

--------------------------------

### Render Parameter Article Template

Source: https://github.com/nehakadam/anypicker/blob/master/doc/Doc.htm

Handlebars template for rendering a parameter documentation article including tags, parameters, return values, and examples.

```handlebars
{{#each this}} <article id={{getIdForLink name}} class="parameter-cont"> <a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{name}}</a> <span> {{#if tags}} {{#each tags}} <a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a> {{/each}} {{/if}} </span> {{#if parameters}} <div class="parameter-parameters"> <span class="option-header">Parameters</span> <div>{{{parameters}}}</div> </div> {{/if}} {{#if returnvalue}} <div class="parameter-returnvalue"> <span class="option-header">Return Value</span> <div>{{{returnvalue}}}</div> </div> {{/if}} <div class="parameter-description"> <span class="option-header">Description</span> <div>{{{description}}}</div> </div> {{#if examples}} <div class="parameter-examples"> <span class="option-header">Examples</span> {{#each examples}} <a class="parameter-examples" target="\_blank" href={{this}}>{{getExampleName this}}</a> {{/each}} </div> {{/if}} </article> {{/each}}
```

--------------------------------

### Initialize AnyPicker with iOS Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-Basic.htm

Initializes AnyPicker with the iOS theme for a native iOS-like selection experience. Requires the 'currencies' array to be pre-populated.

```javascript
var sArrCurrency = [];
function getCurrencyList() {
    for(var iTempIndex = 0; iTempIndex < currencies.length; iTempIndex++) {
        var oCurrency = currencies[iTempIndex];
        sArrCurrency.push( {
            val: oCurrency["code"],
            label: oCurrency["symbol_native"] + " - " + oCurrency["code"]
        });
    }
}

var io18n = {
    headerTitle: "Select Currency"
};

var oArrComponents = [
    {
        component: 0,
        name: "currency",
        label: "Currency"
    }
];

var oArrDataSource = [
    {
        component: 0,
        data: sArrCurrency
    }
];

$(document).ready(function() {
    getCurrencyList();
    $("#ip-ios").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        theme: "iOS" // "Default", "iOS", "Android", "Windows"
    });
});
```

--------------------------------

### Initialize AnyPicker with Different Themes and Languages

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Common-Internationalization.htm

Initializes AnyPicker for datetime mode with specific date-time formats, themes, and language settings. The 'onInit' callback is used to capture the picker instance.

```javascript
function initializeWithAnyPicker() {
  $("#ip-de").AnyPicker( {
    mode: "datetime",
    dateTimeFormat: "MMM d,yyyy",
    lang: sLang
  });
  $("#ip-ios").AnyPicker( {
    mode: "datetime",
    dateTimeFormat: "MMMM d,yyyy",
    theme: "iOS", // "Default", "iOS", "Android", "Windows"
    lang: sLang,
    onInit: function() {
      oAP = this;
    }
  });
  $("#ip-android").AnyPicker( {
    mode: "datetime",
    dateTimeFormat: "MMM dd,yyyy",
    theme: "Android", // "Default", "iOS", "Android", "Windows"
    lang: sLang,
    onInit: function() {
      oAP = this;
    }
  });
  $("#ip-wp").AnyPicker( {
    mode: "datetime",
    dateTimeFormat: "MMM dd,yyyy",
    theme: "Windows", // "Default", "iOS", "Android", "Windows"
    lang: sLang,
    onInit: function() {
      oAP = this;
    }
  });
}
```

--------------------------------

### DateTime Format Options

Source: https://context7.com/nehakadam/anypicker/llms.txt

Customize the display of dates and times using a variety of format tokens. This section provides examples for different formatting needs.

```APIDOC
## DateTime Format Options

AnyPicker supports extensive date/time format patterns for customizing how dates and times are displayed.

### Available format tokens:
* d    - Day of month (1-31)
* dd   - Day of month 2-digit (01-31)
* DD   - Very short day name (Su, Mo, Tu...)
* DDD  - Short day name (Sun, Mon, Tue...)
* DDDD - Full day name (Sunday, Monday...)
* M    - Month number (1-12)
* MM   - Month number 2-digit (01-12)
* MMM  - Short month name (Jan, Feb...)
* MMMM - Full month name (January, February...)
* y    - Year 4-digit
* yyyy - Year 4-digit
* yy   - Year 2-digit
* h    - Hours 12-hour format
* hh   - Hours 12-hour format 2-digit
* H    - Hours 24-hour format
* HH   - Hours 24-hour format 2-digit
* m    - Minutes
* mm   - Minutes 2-digit
* s    - Seconds
* ss   - Seconds 2-digit
* a/A  - Meridiem single char (a/p or A/P)
* aa/AA - Meridiem (am/pm or AM/PM)
```

--------------------------------

### Configure Picker Layout Options

Source: https://context7.com/nehakadam/anypicker/llms.txt

Demonstrates different display modes including popup, fixed, relative, and inline layouts.

```javascript
$(document).ready(function() {
    // Popup layout (default) - centered overlay
    $("#popup-picker").AnyPicker({
        mode: "datetime",
        dateTimeFormat: "MMM dd, yyyy",
        layout: "popup"
    });

    // Fixed layout - attached to top or bottom of screen
    $("#fixed-picker").AnyPicker({
        mode: "datetime",
        dateTimeFormat: "MMM dd, yyyy",
        layout: "fixed",
        vAlign: "bottom"  // "top" or "bottom"
    });

    // Relative layout - positioned relative to input element
    $("#relative-picker").AnyPicker({
        mode: "datetime",
        dateTimeFormat: "MMM dd, yyyy",
        layout: "relative",
        hAlign: "left",    // "left", "center", "right"
        vAlign: "bottom"   // "top", "middle", "bottom"
    });

    // Inline layout - embedded within the page
    $("#inline-picker").AnyPicker({
        mode: "datetime",
        dateTimeFormat: "MMM dd, yyyy",
        layout: "inline",
        relativeTo: "#picker-container"
    });
});
```

--------------------------------

### Initialize AnyPicker with Windows Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Select-Basic.htm

Initializes AnyPicker with the Windows theme and sets components to cover the full width. Requires the 'currencies' array to be pre-populated.

```javascript
var sArrCurrency = [];
function getCurrencyList() {
    for(var iTempIndex = 0; iTempIndex < currencies.length; iTempIndex++) {
        var oCurrency = currencies[iTempIndex];
        sArrCurrency.push( {
            val: oCurrency["code"],
            label: oCurrency["symbol_native"] + " - " + oCurrency["code"]
        });
    }
}

var io18n = {
    headerTitle: "Select Currency"
};

var oArrComponents = [
    {
        component: 0,
        name: "currency",
        label: "Currency"
    }
];

var oArrDataSource = [
    {
        component: 0,
        data: sArrCurrency
    }
];

$(document).ready(function() {
    getCurrencyList();
    $("#ip-wp").AnyPicker( {
        mode: "select",
        i18n: io18n,
        components: oArrComponents,
        dataSource: oArrDataSource,
        theme: "Windows", // "Default", "iOS", "Android", "Windows"
        componentsCoverFullWidth: true
    });
});
```

--------------------------------

### Initialize AnyPicker with RTL support

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Common-DirectionRTL.htm

Configures AnyPicker instances for RTL layouts using different themes and custom i18n settings.

```javascript
$(document).ready(function() { $("#ip-ap").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy", rtl: true }); $("#ip-ios").AnyPicker( { mode: "datetime", dateTimeFormat: "MMMM d,yyyy", rtl: true, theme: "iOS", // "Default", "iOS", "Android", "Windows" i18n: { headerTitle: "Reminder", setButton: "Save" } }); $("#ip-android").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy", rtl: true, theme: "Android" // "Default", "iOS", "Android", "Windows" }); $("#ip-wp").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd,yyyy", rtl: true, theme: "Windows" // "Default", "iOS", "Android", "Windows" }); });
```

```css
body { margin: 0px; } .input-cont { width: 300px; padding: 20px; } input { width: 200px; height: 30px; padding: 3px 10px; margin-bottom: 16px; }
```

--------------------------------

### Initialize AnyPicker Select and Datetime Components

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-Common-Date-and-Select.htm

Initializes AnyPicker instances for currency selection and date picking using different themes like Default, iOS, Android, and Windows.

```javascript
var sArrCurrency = []; function getCurrencyList() { for(var iTempIndex = 0; iTempIndex < currencies.length; iTempIndex++) { var oCurrency = currencies[iTempIndex]; sArrCurrency.push( { val: oCurrency["code"], label: oCurrency["symbol_native"] + " - " + oCurrency["code"] }); } } var io18n = { headerTitle: "Select Currency" }, oArrComponents = [ { component: 0, name: "currency", label: "Currency" } ], oArrDataSource = [ { component: 0, data: sArrCurrency } ]; $(document).ready(function() { getCurrencyList(); $("#ip-de-1").AnyPicker( { mode: "select", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource }); $("#ip-ios-1").AnyPicker( { mode: "select", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "iOS" // "Default", "iOS", "Android", "Windows" }); $("#ip-android-1").AnyPicker( { mode: "select", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "Android" // "Default", "iOS", "Android", "Windows" }); $("#ip-wp-1").AnyPicker( { mode: "select", i18n: io18n, components: oArrComponents, dataSource: oArrDataSource, theme: "Windows", // "Default", "iOS", "Android", "Windows" componentsCoverFullWidth: true }); $("#ip-de-2").AnyPicker( { mode: "datetime", dateTimeFormat: "MMMM d, yyyy" }); $("#ip-ios-2").AnyPicker( { mode: "datetime", dateTimeFormat: "MMMM d, yyyy", theme: "iOS" // "Default", "iOS", "Android", "Windows" }); $("#ip-android-2").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd, yyyy", theme: "Android" // "Default", "iOS", "Android", "Windows" }); $("#ip-wp-2").AnyPicker( { mode: "datetime", dateTimeFormat: "MMM dd, yyyy", theme: "Windows" // "Default", "iOS", "Android", "Windows" }); });
```

--------------------------------

### Configure AnyPicker for Month and Year (Default Theme)

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-MMMMYYYY.htm

Initializes AnyPicker with 'datetime' mode and 'MMMM YYYY' format for month and year selection. Includes custom top and bottom content. Use this for the default theme.

```javascript
$(document).ready(function() {
    $("#ip-de").AnyPicker( {
        mode: "datetime",
        dateTimeFormat: "MMMM YYYY",
        selectedDate: "February 2020",
        topContent: {
            type: "Text",
            markup: "<div class='ap-ex-contentTop'>Expiry Date</div>"
        },
        bottomContent: {
            type: "Text",
            markup: "<div class='ap-ex-contentBottom'>Card Number : 1122 3344 5566 7788</div>"
        },
        viewSections: {
            header: ["headerTitle"],
            contentTop: ["topContent"],
            contentBottom: ["bottomContent"],
            footer: ["cancelButton", "setButton"]
        }
    });

```

--------------------------------

### Initialize AnyPicker with Windows Theme

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-Date.htm

This snippet demonstrates initializing AnyPicker with the Windows theme for datetime input. It uses a specific date format suitable for Windows UI.

```javascript
$("#ip-wp").AnyPicker( {
  mode: "datetime",
  dateTimeFormat: "MMM dd, yyyy",
  theme: "Windows" // "Default", "iOS", "Android", "Windows"
});
```

--------------------------------

### Control AnyPicker Programmatically

Source: https://context7.com/nehakadam/anypicker/llms.txt

Demonstrates how to initialize an AnyPicker instance and use its public methods to manipulate the picker state and values.

```javascript
$(document).ready(function() {
    var picker;

    $("#method-picker").AnyPicker({
        mode: "datetime",
        dateTimeFormat: "MMM dd, yyyy hh:mm AA",

        onInit: function() {
            picker = this;
        }
    });

    // Show or hide picker programmatically
    $("#toggle-btn").click(function() {
        picker.showOrHidePicker();
    });

    // Set selected date programmatically
    $("#set-date-btn").click(function() {
        picker.setSelectedDate(new Date(2024, 0, 15, 14, 30));
    });

    // Set minimum date
    $("#set-min-btn").click(function() {
        picker.setMinimumDate(new Date(2024, 0, 1));
    });

    // Set maximum date
    $("#set-max-btn").click(function() {
        picker.setMaximumDate(new Date(2024, 11, 31));
    });

    // Format date to output format
    $("#format-btn").click(function() {
        var formattedDate = picker.formatOutputDates(new Date(), "MMMM dd, yyyy");
        console.log(formattedDate);
    });

    // Reload all components (after dataSource change)
    $("#reload-btn").click(function() {
        picker.reloadAllComponents();
    });

    // Compare dates
    var result = picker.compareDates(new Date(2024, 0, 15), new Date(2024, 0, 20));
    // Returns: -1 (less), 0 (equal), 1 (greater)

    // Destroy picker instance
    $("#destroy-btn").click(function() {
        $("#method-picker").AnyPicker("destroy");
    });
});
```

--------------------------------

### Initialize AnyPicker for End Date

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-Date.htm

Initializes the end date picker with datetime mode, setting minimum date constraints based on the start date and defining initial selected date and output formats.

```javascript
    $("#ip-end-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy",
        dateTimeFormat: "MMM dd,yyyy",
        onInit: function() {
            oAP2 = this;
            sStartD = oAP2.formatOutputDates(dStartD);
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(dEndD);
            console.log("minValue : " + sStartD);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sEndD = sOutput;
            oAP1.setMaximumDate(sEndD);
            console.log("maxValue : " + oAP1.setting.maxValue);
        }
    });
});
```

--------------------------------

### Configure AnyPicker for End Date and Time

Source: https://github.com/nehakadam/anypicker/blob/master/demo/AnyPicker-DateTime-StartEnd-DateTime.htm

Initializes the end date picker with datetime mode. Sets minimum date based on start date and selects an initial end date. Logs the minimum selectable date.

```javascript
    $("#ip-end-date").AnyPicker( {
        mode: "datetime",
        inputDateTimeFormat: "dd/MM/yyyy hh:mm AA",
        dateTimeFormat: "MMM dd,yyyy hh:mm AA",
        onInit: function() {
            oAP2 = this;
            sStartD = oAP2.formatOutputDates(dStartD);
            oAP2.setMinimumDate(sStartD);
            oAP2.setSelectedDate(dEndD);
            console.log("minValue : " + sStartD);
        },
        onSetOutput: function(sOutput, oSelectedValues) {
            sEndD = sOutput;
            oAP1.setMaximumDate(sEndD);
            console.log("maxValue : " + oAP1.setting.maxValue);
        }
    });
});
```