nehakadam / anypicker

jQuery Picker Library for Android, iOS & Windows Phone. eg Date Picker, Time Picker, DateTime Picker, Custom Select etc

AnyPicker - Picker Library for Mobile OS

What is AnyPicker?

AnyPicker is a jQuery Picker Library for Android, iOS & Windows Phone. eg Date Picker, Time Picker, DateTime Picker, Rating Picker, Custom Select etc. It simulates native picker functionality as seen in iOS, Android & Windows Phone & has many customizable features.

Where can I use AnyPicker?

You can use AnyPicker in your

• Web applications
• Mobile websites
• Native mobile applications using webview
• Hybrid mobile applications created using Phonegap, Titanium etc.

Browser Support

• Chrome, Firefox, Safari, Opera, IE 10+
• Android 2.3+, iOS 6+, Windows Phone 8

##Installations

• npm

  npm install anypicker

• bower

  bower install anypicker

##CDN AnyPicker is hosted on jsDelivr.

Files - Latest

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/anypicker@latest/dist/anypicker-all.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/anypicker@latest/dist/anypicker.min.js"></script>
<!-- For i18n -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/anypicker@latest/dist/i18n/anypicker-i18n.js"></script>

Files - Particular Version

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/anypicker@<version>/dist/anypicker-all.min.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/anypicker@<version>/dist/anypicker.min.js"></script>
<!-- For i18n -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/anypicker@<version>/dist/i18n/anypicker-i18n.js"></script>

Authors

Neha Kadam: Developer
Lajpat Shah: Concept & Design Contributor

Thank You

• All Contributors

Copyright 2017 Lajpat Shah

##License

Licensed under the MIT License

anypicker's Issues

get all AnyPicker instances

First of all, thank you very much for that handy plugin.

In my case there are multiple instances of AnyPicker which are created dynamically:

$(els[0]).AnyPicker({ ... });
$(els[1]).AnyPicker({ ... });
// ... and so on

Then I tried to add them to a global array (window.datePickerInstances) in different ways with no success:

window.datePickerInstances.push(
    $(els[0]).AnyPicker({ ... });
);
// ... and so on

or like so:

var instance = $(els[0]).AnyPicker({ ... });
// ...
window.datePickerInstances.push(instance);

All it saves in the array is the selector of the instance but not the instance itself.

How do I achieve that?

thx for your help
Daniel

Any chance of non-jQuery based AnyPicker?

With improvements in browser support of ES, have you considered a vanilla JavaScript version?

A quick look a the source and I see parts than can be replaced with native add- and removeEventListeners and querySelector.

AnyPicker scrolling (touch) not working with Windows 10 mobile

When using Windows 10 Mobile user cannot scroll for example date time picker. It just scrolls the "window" overall a bit but the values in picker does not scroll at all.

anypicker issue about date and basic

date picker and basic picker not working on single page only one is working is use #(document).ready function only one is working

when minValue and maxValue differ too small；

$("#ip-de").AnyPicker(
                {
                    mode: "datetime",
                    viewSections:
                    {
                        header: [],
                        contentTop: [],
                        contentBottom: [],
                        footer: ["cancelButton", "headerTitle","setButton"]
                    },
                    i18n:{
                        headerTitle: "select",
                        setButton: "sure",
                        nowButton: "Now",
                        cancelButton: "cancel"
                    },
                    layout: "fixed",

                    dateTimeFormat: "yyyy-MM-dd",
                    theme:"iOS",
                    minValue: new Date("2016-05-06"),
                    maxValue: new Date(new Date("2016-05-06").getTime()+1000*60*60*24*7)
                });

Show AnyPicker when click from button

Is there any solution to show AnyPicker when clicking other elements? For example like UI have a button when click show popup select date and date value still store in input element.

How to hook into Set and Cancel functions for the date/time picker?

I see the "inputSetEvent", which fires every time the date changes.

How do I hook into the Set and Cancel button actions?

How to show the year in descending order

Hi All,

I want to show the year in descending order. Any one could you please help on this issue?

Thanks

Selected date is going on the top in the datepicker on popup for firefox

Hello,
I'm applying the anypicker on a textbox into a popup. So there is current date is showing by default php code. So selected date should work, as it is working in chrome. But in firefox it is scrolling once like the image below

Here is my code

//Set date time picker
var curFullDate = new Date();
var curYear = curFullDate.getFullYear();
if (userAgent !== "") { //Firefox
var monthArr = [
"January",
"Febary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
var curMonth = curFullDate.getMonth();
curMonth = monthArr[curMonth];
} else {
var curMonth = curFullDate.getMonth() + 1;
}
console.log(curMonth);
var curDate = curFullDate.getDate();
var curHours = curFullDate.getHours();
var curAP = (curHours > 12) ? "PM" : "AM";
if (userAgent === "") {
curHours = (curHours > 12) ? curHours - 12 : curHours;
}
curHours = (curHours > 9) ? curHours : "0" + curHours;
var curMinutes = curFullDate.getMinutes();
var curSeconds = curFullDate.getSeconds();
curMinutes = (curMinutes > 9) ? curMinutes : "0" + curMinutes;

                                if (userAgent !== "") { //Firefox
                                    //"October 13, 1975 11:13:00"
                                    var curFormat = curMonth + " " + curDate + ", " + curYear + " " + curHours + ":" + curMinutes + ":" + curSeconds;
                                } else {
                                    var curFormat = curYear + "-" + curMonth + "-" + curDate + " " + curHours + ":" + curMinutes + " " + curAP;
                                }
                                
                                //console.log(curFormat);
                                var minDate = new Date(curFormat);
                                var maxDate = new Date(curFormat);
                                maxDate.setFullYear(maxDate.getFullYear() + 5);
                                //console.log(minDate);
                                //console.log(maxDate);
                                var selectedDate = new Date(curFormat);
                                
                                var settings = {
                                    dateTimeFormat: "Y-MM-dd HH:mm",
                                    minValue: minDate,
                                    maxValue: maxDate,
                                    //selectedDate: selectedDate
                                };
                                
                                $("#popupContent #addOfferForm").find("input[name=\"start_date\"]").applyDateTimePicker(settings);

Here is the applyDateTimePicker function

$.fn.applyDateTimePicker = function(data) {
var minDate =new Date();
var maxDate = new Date();
var theme = "Default", userAgent = navigator.userAgent;

if (userAgent.match(/Android|Silk/i)) {
    theme = "Android";
}
else if (userAgent.match(/iPhone|iPad|iPod/i)) {
    theme = "iOS";
}
else if (userAgent.match(/IEMobile/i)) {
    theme = "Android";//"Windows";
}

minDate.setFullYear(minDate.getFullYear() - 118);

var settings = {
    mode: "datetime",
    inputDateTimeFormat: "Y-MM-dd hh:mm AA",
    dateTimeFormat: "Y-MM-dd hh:mm AA",
    theme: theme,  // "Defaualt", "iOS", "Android", "Windows",
    minValue: minDate,
    maxValue: maxDate,

    headerTitle: {
        markup: "<span class='ap-header__title'>" + DATEPICKER_HEADER_TITLE + "</span>",
        type: "Text",
        contentBehaviour: "Dynamic", // Static or Dynamic
        format: "" // DateTime Format
    },

    i18n: {
        headerTitle: DATEPICKER_HEADER_TITLE,
        setButton: DATEPICKER_SET_BUTTON,
        cancelButton: DATEPICKER_CANCEL_BUTTON,
        dateSwitch: DATEPICKER_DATE_TAB,
        timeSwitch: DATEPICKER_TIME_TAB
    }
};

if (data && data !== undefined && typeof data === "object") {
    // Merge data into settings
    $.extend( settings, data );
}

this.AnyPicker(settings);

};

Please try to give me solution as soon as possible

How can i set dynamically value in AnyPicker?

I have list of numbers [1,2,3...], i load them to Anypicker, and display in page as clickable list. So when user click on some number from list i need to synchronise my anypicker component value according to this value

Disable auto hide

Is there any way to disable auto hide? I want to show inline datetimepicker always. It automatically hides when I click anywhere on the document.

AnyPicker on vuejs

Is there any chance that AnyPicker will implement to other framework like vuejs, angular?

Set Date problem

Hi.
I have faced the following issue - when I click SET in the datepicker - I don't see that it changes the input.
The input field is left blank.

This issue seems to appear also on the example files that you have provided. Nothing happens with the input field after you selected the date and pressed SET button.

Pls advise on this matter.

is there any way to use AnyPicker to ionic 2 project

hello,
currently i am working on ionic 2 project and i want to use this lib
please guide me proper way for installation

AnyPicker mouse scrolling not working with Mac FireFox

When using Mac FireFox user cannot mouse scroll for example time picker. But the touch scroll is working and for Chrome & Safari both mouse, touch scroll is working. Please help me to fix the mouse scroll in FireFox browser.

Timepicker header title

Header title in timepicker is always in english even if it's selected another language.

Appoint A Contributor

This repo has just enough interest that it will mostly take care of itself. Someone needs to evaluate and accept PRs.

How I can make the biggest year is the current year

I found iStepYears to set the current age of 50 * / 2 to set up, but can not set the maximum is the current year alone, do not know how to set up, because I was just learning js, also want to ask. I am Chinese Chinese is not very good, so use the translator to write these issues

Only drag one component column and tap "Set" will cause undefined

If setup multiple components, say 3, and set input value to ""
Whenever the picker is brought up, if i just tap "Set", all component values will be fetched

BUT if i only dragged 1st component column, and then just tap "Set", the other 2 component values will be "undefined" in input.

Official demo can also reproduce if u set all values to "" in AnyPicker-Select-Multi-Component.htm

BasicPicker and DatePicker can't work together

I define a BasicPicker after DatePicker.
When I click on DatePicker, console show error: "No InputElement Specified".

finally I found that they are sharing some objects, such as oElemValid, oInputElemValid
so, I think we need deep copies of these objects.

temporary I change this line:
apo.tmp = $.extend({}, $.AnyPicker.tempDefaults);
to
apo.tmp = $.extend(true, {}, $.AnyPicker.tempDefaults);

Set minutes in datetime issue - Version 2.0.9

Hi!

I opened datetime anypicker, with minutes round between 0 and 30.

If I not click in minutes and click "Guardar" directly, the minutes not show correctly. Input show 31 minutes and not show 0.

Code is:
$("#ip-deInicio").AnyPicker({ mode: "datetime", showComponentLabel: true, dateTimeFormat: "HH:mm", intervals: { h: 1, m: 30 }, layout: "popup", roundOff: true, i18n: { headerTitle: "Seleccionar", setButton: "Guardar", cancelButton: "Salir", componentLabels: { hours: "Hora", minutes: "Minutos" } } });

Any tips? Thanks

dateTimeFormat: "DDDD" take only Wednesday

Send a different formatted date to the server

Hi,
We have been looking to implement this library in our codebase and was wondering if it is possible to send a different formatted date to the server?

setMinimumDate not allow value older than 1990

Hi,

I am using this component to choose birthday. I cannot put minumum date value older than 1990.

I have tried with:

var minBirthDate = new Date(1920, 1, 1, 0, 0, 0, 0);

and

onInit: function(){
this.setMinimumDate(minBirthDate);
}

but not working.

date between minValue & maxValue, but can't be selected

I downloaded the lastest version.
This is a very feature-rich widget.
I've been using it for a while.
Now I have a scenarios:
I set minValue: new Date(2016, 02, 06) & maxValue: new Date(2017, 01, 31)
and sure, I can select the day before 2016-02-06 or after 2017-01-31,
but when I want to select 2017-01-01, I'm in trouble.
I try to use a variety of methods but still can't do it.
I want to know how can I select 2017-01-31 ?
Thank you for browsing.

Timepicker intervals

Using roundOff=true and intervals doesn't works when you set the hour without change it.
Example:

intervals = {
    h: 1,
    m: 15,
    s: 1
}

And you want to set 15:00 (without change minutes) it sets 15h and actual minutes, but if you change minutes, it works good.

TimePicker can't work on phonegap

Hi!
TimePicker can work via browser, but can NOT work on phonegap nor apk builded by "Adobe PhoneGap Build".

Click option along with scroll

Is there any way to change date/time also on click especially for web view? For instance if current selection is Oct, on clicking Sep it gets selected as current and on clicking Nov it gets selected.

quarter of year

Hi,
Is some option to simple add quarter like 'QQ' in date format or is it possible to add to this extension ??

I need can choose quarter and year and I know, I can add this as 'select' mode, but I think 'date time' mode would be better place for this.

Thx for answers & help :)

Date & time or number in circulate (round) format

Can we create date & time or number in circulate (round) format.
if i select hours format it will show 23 value after that it showing blank..
Please find the attachment for reference...

AnyPicker with Multi Select

Any succesfull with custome Anypicker for MultiSelect

Selected Value Looks Empty After Scrolling Some Times

Description
I scroll to the top or bottom of select field and then move forward it.

In continuing this some times, selected value looks empty.(Attached file is the screen shot.)

Not Always, but sometimes happens this problem.
Also, Only in mobile apps or browsers.

Demo
https://www.jqueryscript.net/demo/Mobile-friendly-Anything-Picker-Plugin-Input-Fields-AnyPicker/

Your environment
AnyPicker Version: 2.0.9
Device Name: iPhone8Plus
Browser Name and version: Safari 14.0
Operating System: iOS14.0

set button not show in 'ios' theme.

set button not show in 'ios' theme.
this happened in the lastest version.
Thank you for browsing.

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

dateformat with 'MM' labels from 02-13

in anypicker.js about line 3380

for(iTempIndex = iStartValue; iTempIndex <= iEndValue; iTempIndex++)    

    {  

        oArrData.push(

            {

                val: (iTempIndex - 1),

                label: apo.getNumberStringInFormat(iTempIndex, iChars, true)

            });

        }

if want 01-12 ,codes may like below?
label: apo.getNumberStringInFormat(iTempIndex-1, iChars, true)

AnyPicker dynamic register functionality

We have a dynamic div for which we want to register date time picker at runtime and we also want to open that date time picker on a button click. So, please suggest as how can we achieve this?

when a particular view renders we are using this code:
$('#MBCControlItem' + Id).AnyPicker( { mode: "datetime", dateTimeFormat: "hh:mm aa" });
At present, on click of it, it generates multiple dynamic "anypicker" divs,

How I can use only one language?

There is a possibility only use one i18n eg de-DE against downloading all languages?
eg;

<script type="text/javascript" src="src/i18n/anypicker-i18n-de-DE.js"></script>

$("#ip-de").AnyPicker(
{
mode: "datetime",
dateTimeFormat: "MMM dd, yyyy",
lang: "de-DE",
onInit: function()

Because it does not work.

Desactivate a full day (except weekends)

Hello developers,
here is my proposition:

disableValues: 
{
    datetime: [
        {
            val: "May 06,2015 02:30 AM"
        }
    ],

    day: [0, 6]                     
}

Why not having ability to put simply val: "May 06,2015" if we want to set a full day as Invalid ?

Have a good reception.

window resize datepicker position not right

Date and time fields visible in both tabs instead of their respective tabs

At times date and time fields are visible in both tabs instead of their respective tabs. For example on reducing screen size to mobile view, the error appears and then it vanishes on clicking any tab.

Feature: Add ability to specify default displayed value

I have a use case where I need to show an empty anypicker (date) to ensure the user must select and fill it in. (so I cannot use the current selected option as that initiates the anypicker with a value).

I also need to specify a wide range of valid values (minValue, maxValue), but I need to specify a default displayed value that is somewhere between this range. Currently it is just showing the minValue in my tests.

I propose a new option for something like "defaultDisplayed" or similar.

Also note... that this default should not imply selection when the anypicker UI is displayed. (aka if you cancel it should still remain empty).

Second Request:
I also noticed there didn't seem to be a way procedurally to clear the anypicker.

Feb 29, 2000 is an invalid date - it never happened

Correction follows: added in this fact - Years divisible by 400 are NOT leap years.

_getNumberOfDaysOfMonth: function(iMonth, iYear)
{
	var apo = this;
	var iArrMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
	iArrLeapYearMonthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	if(iYear % 4 === 0 && iYear % 400 != 0)
		return iArrLeapYearMonthDays[iMonth];
	else
		return iArrMonthDays[iMonth];
},