https://github.com/newset/ion-datepicker

https://github.com/newset/ion-datepicker

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/newset/ion-datepicker
• Owner: newset
• License: other
• Created: 2015-12-04T07:45:09.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-04T07:49:15.000Z (almost 9 years ago)
• Last Synced: 2024-04-17T05:48:16.072Z (7 months ago)
• Language: JavaScript
• Size: 542 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

    

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,

        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)

    

        

            {{  "{{onezoneDatepicker.date | date:'dd MMMM yyyy'}\}"   }} 

        

    

### 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) **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

12) **showTodayButton** (Optional)

Hide/Show today button. 

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

13) **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.

14) **hideCancelButton** (Optional)

Hide Cancel button

15) **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`

16) **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)

        }

    ]

17) **callback** (Optional)

Represent the callback function

### Thanks ###

[Chris Harrington](https://www.codementor.io/angularjs/tutorial/angularjs-calendar-directives-less-cess-moment-font-awesome) for inspiring me

[deeepu](https://dribbble.com/deeepu) for your Nexus mockup