Onezone Datepicker

Onezone Datepicker - A datepicker for Ionic Framework

Free!

(22)

Demo Purchase externally Download

Sergiu Butnarasu

Member since 2014

Details

Version:: 1.2.2
Size:: 0mb
Ionic:: 1.0.0,1.0.1
Platforms:: iOS, Android, Windows Phone
Released:: 9 years ago
Updated:: 8 years ago
Category:: Plugins
Tags:: datepicker, calendar, ionic framework

Introduction

Onezone Datepicker is a flexible datepicker widget that can be used in your Ionic Framework applications. Git repository: https://bitbucket.org/sergiu_butnarasu/onezonedatepicker

Who to use?

Install onezone-datepicker using bower:

bower install onezone-datepicker --save

Or download the file and copy it in your "lib" directory (lib/onezone-datepicker/dist/onezone-datepicker.min.js)

1) Include Onezone Datepicker in your index.html file

<script src="lib/onezone-datepicker/dist/onezone-datepicker.min.js"></script>

2) Inject the onezone-datepicker dependency in your application

angular.module('starter', ['ionic', 'onezone-datepicker'])

3) Create a Onezone Datepicker object for your needs

$scope.onezoneDatepicker = {
    date: date, // MANDATORY                     
    mondayFirst: false,                
    months: months,                    
    daysOfTheWeek: daysOfTheWeek,     
    startDate: startDate,             
    endDate: endDate,                    
    disablePastDays: false,
    disableSwipe: false,
    disableWeekend: false,
    disableDates: disableDates,
    disableDaysOfWeek: disableDaysOfWeek,
    showDatepicker: false,
    showTodayButton: true,
    calendarMode: false,
    hideCancelButton: false,
    hideSetButton: false,
    highlights: highlights
    callback: function(value){
        // your code
    }
};

4) Use the code below in your html file (don't forget to add show-onezone-datepicker on your button element)

<onezone-datepicker datepicker-object="onezoneDatepicker">
    <button class="button button-block button-outline button-positive show-onezone-datepicker">
        {{  "{{onezoneDatepicker.date | date:'dd MMMM yyyy'}\}"   }} 
    </button>
</onezone-datepicker>

Options

1) date (Mandatory)

Represent the date object. Default is the current date, but you can give it any date. When the set button is clicked this object will be changed with the selected date.

2) mondayFirst (Optional)

If you want the calendar to start with Monday set this flag to true

3) months (Optional)

You can give your own list of months. Default: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

4) daysOfTheWeek (Optional)

Pass your own days of the week list. Default: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

5) startDate (Optional)

You can specify the start date of the datepicker. (new Date(1989, 1, 26))

6) endDate (Optional)

Same as startDate, you can specify the end date of the datepicker. (new Date(2024, 1, 26))

7) disablePastDays (Optional)

Setting this flag you will be able to disable dates before the current date

8) disableSwipe (Optional)

This flag is used to disable swipe events on the datepicker

9) disableWeekend (Optional)

You can disable weekends

10) disableDates (Optional)

You can define a list of dates that will be disabled in the datepicker ([new Date(2016, 1, 15), new Date(2016, 2, 16), new Date(2016, 3, 17)])

11 disableDaysOfWeek (Optional)

You can disable dates by days of week. Example:

 disableDaysOfWeek: [0,1] // will disable all Sunday and Monday. (0 - Sunday, 1 - Monday)

12) showDatepicker (Optional)

Using this variable you can make the datepicker to be visible as default. Also you can set this flag in runtime in order to show or hide the datepicker

13) showTodayButton (Optional)

Hide/Show today button.

NOTE: If the current date is disabled by disableWeekend or disableDates the button will automatically disappear

14) calendarMode (Optional)

If you set this flag, the datepicker will go in calendar mode. Set, cancel and today button will disappear and when a user is selecting a date the callback method will be triggered.

15) hideCancelButton (Optional)

Hide Cancel button

16) hideSetButton (Optional)

Hide Set button.

NOTE: If you hide the set button, when the user selects the date, the datepicker will collapse and the date will be set

17) highlights (Optional)

You can pass a list of objects to highlight dates. Example:

[
    {
        date: new Date(2016, 1, 7),
        color: '#8FD4D9',
        textColor: '#fff'
    },
    {
        date: new Date(2016, 1, 18)
    },
    {
        date: new Date(2016, 1, 19)
    },
    {
        date: new Date(2016, 1, 20)
    }
]

18) callback (Optional)

Represent the callback function

Thanks

Chris Harrington for inspiring me

deeepu for your Nexus mockup

Hey there! You'll need to log in before you can leave a comment here.

Oldest
Newest

Sergiu Butnarasu · 9 years ago

@Edwin - callback function is fired when you set the date. Only calendar mode or when you hide the set button will work on date change.

Edwin Palacios · 9 years ago

@Sergius It is that I am trying to implement in my app and I need to change the date when I perform a function can help me?

Sergiu Butnarasu · 9 years ago

@Edwin - So you want to change the date of the datepicker when you execute your function?

Edwin Palacios · 9 years ago

I do not want to run a function when the date changed from datapicker

Edwin Palacios · 9 years ago

For example I see that when given to check the function runs setdate <span class="onezone-datepicker-selection-button ion-ios-checkmark" ng-if=!datepicker.hideSetButton ng-click=setDate()>

Edwin Palacios · 9 years ago

As it does this plugin but do not work well because some devices is deformed. http://market.ionic.io/plugins/ionicdatepicker

Sergiu Butnarasu · 9 years ago

@Edwin - I made a new deploy. Now you can change the datepicker value. If you want to catch the value use the callback function (callback: function(date){alert(date);})

Sergiu Butnarasu · 9 years ago

@Edwin - If you set hideSetButton: true, the callback method will be fired when you select a date. You don't need to call setDate() method. That will be called automatically.

Edwin Palacios · 9 years ago

but the callback runs after the start date if I change not running anything else.

Edwin Palacios · 9 years ago

The truth did not understand me and my English is not enough, seeketh how to make it work as I said the plugin but so far nothing.

Sergiu Butnarasu · 9 years ago

@Edwin - Please connect to this chat: http://us20.chatzy.com/29037924685398

Hello, Your datePicker is amazing ! I'm looking for a date picker where I could select several dates and render several dates as well. Would it be hard for you to enhance your product this way ? Regards,

RonRun · 9 years ago

Also I'm looking for a way to select weeks

RonRun · 9 years ago

and display on differente colors some dates (like birthdays)

Sergiu Butnarasu · 9 years ago

@RonRun - Thank you for your appreciation. Display different colors for some dates is already in plan. About multiple selection, it's a good idea. I will try to implement that too.

RonRun · 9 years ago

Thank you very much Sergiu !

RonRun · 9 years ago

Do you have any Github repository to follow the evolution ?

Sergiu Butnarasu · 9 years ago

@RonRun - I don't have a public repository, but you can follow the tasks on Trello: https://trello.com/b/nnpkQpQU

Sergiu Butnarasu · 9 years ago

@RonRun - I made a new publish. Now you can highlight dates

RonRun · 9 years ago

Thank you Sergiu ! I'm connected to yout trello ! Let me test this new version.

RonRun · 9 years ago

Sergiu, I'm not able to create cards on the trello. is it possible to send some recommandations and bugs through trello ?

RonRun · 9 years ago

Here is an error encountered : TypeError: e.getFullYear is not a function at t (http://localhost:8100/lib/onezone-datepicker/onezone-datepicker.min.js:7:7375) at Object.h [as createMonth] (http://localhost:8100/lib/onezone-datepicker/onezone-datepicker.min.js:7:12247) at Scope.e.createDatepicker (http://localhost:8100/lib/onezone-datepicker/onezone-datepicker.min.js:7:13536) at Object.fn (http://localhost:8100/lib/onezone-datepicker/onezone-datepicker.min.js:7:16559) at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22942:29) at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23205:24) at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18358:47) at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18548:7) at XMLHttpRequest.requestLoaded (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18489:9) undefined

Sergiu Butnarasu · 9 years ago

@RonRun - Try now on trello, (write a comment, if you cannot create cards)

woopy · 8 years ago

Hi Sergiu, Thanks for this cool plugin, I've started using it, and I'd like to be able to customize a bit and try to add more features to it, maybe I can help you. Do you plan to release the code on github? cheers.

Garnik · 8 years ago

Hi Sergiu, may we please have arrows for years as well ? Would be much better if you push the code to public git, so we can do out tweaks, thanks.

Sergiu Butnarasu · 8 years ago

@woopy, @Garnik Done! https://bitbucket.org/sergiu_butnarasu/onezonedatepicker

Edwin Palacios · 8 years ago

Hello aid !! as I can do the highlights bringing data from a server that sends me the string type?

Gianfranco Frau · 8 years ago

Hi Sergiu! I've just bought this awesome plugin. It would be great if you add support for color customization using ionic classes such as "light, assertive" etc, using $scope.onezoneDatepicker object. Nice job!

Zvi Eintracht · 8 years ago

getting an error when using this plugin. No changes, just running it as described in the documentation with default values for parameters. The following error appears in the console. Any suggestions? Thanks! TypeError: e.getFullYear is not a function at t (onezone-datepicker.min.js:1) at Object.h [as createMonth] (onezone-datepicker.min.js:1) at Scope.e.createDatepicker (onezone-datepicker.min.js:1) at Object.fn (onezone-datepicker.min.js:1) at Scope.$digest (ionic.bundle.js:24515) at Scope.$apply (ionic.bundle.js:24783) at done (ionic.bundle.js:19196) at completeRequest (ionic.bundle.js:19368) at XMLHttpRequest.requestLoaded (ionic.bundle.js:19309)(anonymous function) @ ionic.bundle.js:21162(anonymous function) @ ionic.bundle.js:17941Scope.$digest @ ionic.bundle.js:24533Scope.$apply @ ionic.bundle.js:24783done @ ionic.bundle.js:19196completeRequest @ ionic.bundle.js:19368requestLoaded @ ionic.bundle.js:19309

Sergiu Butnarasu · 8 years ago

@zvi "date" property must be a Date, not string, number or something else.

Brieuc Tribouillet · 8 years ago

Hi Sergiu. This is really a great module, the best i found until now in term of design and options. The only option i can't find (not implemented i suppose) is to be able to disable days like "disableWeekend" would do. Passing an array like disableDays: ["Su", "We"] would disable those days every weeks. Are you planning to implement such feature soon? If not i guess i will fork your project and trying to do it.

Salvatore · 8 years ago

Hi! My datepicker don't work on a slide-box nested into a moadal.

Amit · 8 years ago

Sergiu, many thanks for this plugin, wanna ask you, how to open calendar in a popup window ? I am also trying, if i happen to success will post the trick here.

Sergiu Butnarasu · 8 years ago

I new version is here. With getFullYear bug fix and disable days of week. I will test the datepicker in modal soon.

Sergiu Butnarasu · 8 years ago

@Salvatore I just tried in modal and works fine. If you want to use in modal is better to enable calendar mode. By doing this the callback function will be triggered when the user select a date and you can close the modal in callback function. I used this tutorial for modal: http://ionicframework.com/docs/api/service/$ionicModal/

Alexandre Faustino · 8 years ago

Hi is there a plan of added an option to disable futures days ?

Sergiu Butnarasu · 8 years ago

@Alexandre I think you can do that by setting the "endDate" property

Konstantin Reido · 8 years ago

I've checked last version (from bitbucket also), but still have error TypeError: Cannot read property 'getFullYear' of undefined at t (vendors.js:66682) at Object.g [as createMonth] (vendors.js:66682) at Scope.e.createDatepicker (vendors.js:66682) at Object.fn (vendors.js:66682) at Scope.$digest (vendors.js:28863) at Scope.$apply (vendors.js:29131) at bootstrapApply (vendors.js:14813) at Object.invoke (vendors.js:17630) at doBootstrap (vendors.js:14811) at bootstrap (vendors.js:14831) Tell me if you need some additional information about my env.

Konstantin Reido · 8 years ago

It happens only when I render calendar on ionic modal.

Sergiu Butnarasu · 8 years ago

@Konstantin I tried with modal too and worked. Can you attach your datepicker configuration?

Fred · 8 years ago

Same Error for me running in ionci Lab server TypeError: Cannot read property 'getFullYear' of undefined at t (onezone-datepicker.min.js:1) at Object.h [as createMonth] (onezone-datepicker.min.js:1) at Scope.e.createDatepicker (onezone-datepicker.min.js:1) at Object.fn (onezone-datepicker.min.js:1) at Scope.$get.Scope.$digest (ionic.bundle.js:28995) at Scope.$get.Scope.$apply (ionic.bundle.js:29263) at ionic.bundle.js:31030 at completeOutstandingRequest (ionic.bundle.js:18706) at ionic.bundle.js:18978console.(anonymous function) @ ?ionicplatform=ios:28(anonymous function) @ ionic.bundle.js:25642$get @ ionic.bundle.js:22421$get.Scope.$digest @ ionic.bundle.js:29013$get.Scope.$apply @ ionic.bundle.js:29263(anonymous function) @ ionic.bundle.js:31030completeOutstandingRequest @ ionic.bundle.js:18706(anonymous function) @ ionic.bundle.js:18978

Aysion · 8 years ago

Hello, your plugin is very good, but i have a problem, i need change of highlights dynamically because the parameters come of a server and highlights not working :/

Sergiu Butnarasu · 8 years ago

@Fred Did you try to use date object instead of number?

Eric dos Reis · 8 years ago

Hello, thanks for building this plugin. I would love to have animations in swipe events. Are you considering implementing this function?

Eric dos Reis · 8 years ago

I have a problem to set highlights dynamically, the calendar is not updating.

Konstantin Reido · 8 years ago

It was my mistake. I forgot add {scope: $scope} to modal's config. Maybe it good idea add example of modal/popup or mention about it somewhere in doc.

Aysion · 8 years ago

Hi, I found a solution to work dynamically with highlights, which was to create a watcher on 'datepickerObject.highlights' in the directive. scope.$watch('datepickerObject.highlights', function () { drawDatepicker(scope); });

Nanda · 8 years ago

Hi, is it possible to set disabledate with json that are coming from php file? php file contain the query to fetching data from database. so the database will contain the date that will be disabled. How can I do this if is it possible? thanks

RonRun · 8 years ago

Hello Sergiu, do you plan to provide a "multi dtepicker" option ?

Cleverson · 8 years ago

I've created a pull request do set highlights and disableDates dynamically. Waiting for the Sergiu's answer. In the meantime, those who need it urgently, can clone my fork in github with the changes. https://github.com/cleever/OnezoneDatepicker

Sergiu Butnarasu · 8 years ago

@Cleverson I think it is ok. Now my laptop is formatted, after I finish installing all programs I will merge the file. Thank you

Adrien · 8 years ago

Do you know how to do to dynamically change the start date ? Somebody know how to do to make an action on the click on a date (to close the calendar without click on the validation button) ?

RonRun · 8 years ago

Hello Sergiu, do you plan to provide a "multi dtepicker" option ?

Sergiu Butnarasu · 8 years ago

Hi @RonRun. Sorry, but I don't have plan for multiple selection now.

RonRun · 8 years ago

Hey Sergiu, thank you for your answer. And thank you for your amazing work in this plugin. With the fork of Cleverson I maybe can manage that no ? I'll try to highlight the selected dates. Regards,

RonRun · 8 years ago

I confirm it works this way ! : callback: function(value){ console.log("callback", new Date(value)); $scope.onezoneDatepicker.highlights.push({ date :new Date(value) }); } Thank you Cleverson !!

Prameshwar Kumar · 8 years ago

hi can any buddy tell me one solution as i am not much good in angular js, i dont want collapse after setting date. please provide solution Thanks in advance

Sergiu Butnarasu · 8 years ago

@PrameshwarKumar try to set calendar mode. (calendarMode = true)

erion · 8 years ago

Hello. First of all. Congratulations, cool plugin. Now my question. Is there a easy way to make the datepicker open as month only? Also year only and a combination of flow, like start on month and possible to go to years... thx.

Sergiu Butnarasu · 8 years ago

@erion The plugin can be modify on that flow, but that means to change the way how it works now. I tried to make something general. But is open source, so you can fork and change how you want.

Netmidia Tecnologia · 8 years ago

@Sergiu Butnarasu It would be nice to have the option to select the month only without day. It would be possible?

erion · 8 years ago

@Sergiu Butnarasu Hello Sergiu, I made a pull request about the start displaying month / year. Feel free to accept or decline it. Ty

RonRun · 8 years ago

@Sergiu is it possible to add an option "displayPrimaryButton":false, when showDatepicker: true ? We don't need it when showDatepicker: true.

RonRun · 8 years ago

@serGiu sorry forget my last question.

erion · 8 years ago

just to let you know. I will suggest to increase z-index in all classes by 1 or 2, also make the day calendar at least 1. Thats because I had a small issue right now, setting <ion-slide-box> and <ion-slide>. By default it has z-index 1, making the calendar don't show up. Thx again. ;)

Onit Media · 8 years ago

I was wondering why I can't specify a particular version to use in the bower.json file. If I use: "onezone-datepicker": "1.2.2" it shows bower onezone-datepicker#1.2.2 ENORESTARGET No tag found that was able to satisfy 1.2.2 But if I use "onezone-datepicker": "*" it works.

sao thien hat · 8 years ago

Hi, I try display Today button (the current date is disabled by disableWeekend or disableDates) by set "showTodayButton: true" but it is not display :(. I cannot find the reason PS: the Cancel and OK button are displayed but the Today button is not

juraj · 8 years ago

Is there any way to control the datepicker from the parent controller? For example, if I wanted to add a custom button outside of the directive, which would hide the datepicker on ng-click, how would I go about it? In other words, is there any way I can call the directive's internal methods like hideDatepicker() ?

Sergiu Butnarasu · 8 years ago

@sao thien hat: if today date is disabled by disableDays or disableWeekend the today button will be hide.

Sergiu Butnarasu · 8 years ago

@juraj: You can use showDatepicker to hide or show the datapicker. If you want to have access to internal functions you must modify the directive to give access to the methods you need

juraj · 8 years ago

@sergiu right, I got it, thanks! So I guess the datepicker is "tied" to the datepicker object, as it watches on the changes of its properties. So if I understand this correctly - it is not possible to reuse one datepicker object for multiple datepicker instances, right? I have a case in which I can dynamically add unlimited number of datepickers to my view - so, does this mean I need to dynamically create a new datepicker object for every datepicker directive? (in my previous solution, using another datepicker directive, I used the same object, just changed the parameters before invoking the datepicker)

Cleverson · 8 years ago

Hello, I upgraded to 1.3.x Ionic and this component has stopped working. Anyone had this problem?