Skip to content

Latest commit

 

History

History
130 lines (100 loc) · 4.39 KB

README.md

File metadata and controls

130 lines (100 loc) · 4.39 KB
Raw

Chocobo Date Range Picker - The Date Range Picker easier to use in angular

chocobo.png

Try it yourself.

click here

How to install

bower install chocoborangepicker

How to use

Import to your project the chocobo-range-picker.min.js and chocobo-range-picker.min.css files in bower_components folder
 <link href="/bower_components/chocoborangepicker/dist/css/chocobo-range-picker.min.css" rel="stylesheet">
 <script type="text/javascript" src="/bower_components/chocoborangepicker/dist/js/chocobo-range-picker.min.js"></script>

Then refer to your module

 angular.module('yourModule', ['chocoboRangePicker']);
In your controller use the code below
  // Here is your property that you want to be populated with date range.
  $scope.demo = { searchDate: null };  

  $scope.options = {
    txtDateInit: 'Demo: Date',
    buttons: {
      btnYear: { txt: 'Demo: Year', tooltip: "Choose Year" },
      btnSemester: { txt: 'Demo: Semester', tooltip: "Choose Semester" },
      btnTrimester: { txt: 'Demo: Trimester', tooltip: "Choose Trimester" },
      btnMonth: { txt: 'Demo: Month', tooltip: "Choose Month" },
      btnWeek: { txt: 'Demo: Week', tooltip: "Choose Week" },
      btnToday: { txt: 'Demo: Today', tooltip: "Choose Today" },
      btnLastDay: { txt: 'Demo: Last Day', tooltip: "Choose Last Day" }
    },
    inputConfig: {
      showIcon: true,
      iconPath: "http://www.racedepartment.com/images/rd_calext/calendar.png"
    } ,
    minDate: new Date(2017, 1, 3),
    maxDate: new Date(2017, 3, 12)
  };

$scope.options

  • txtDateInit(optional): Label of input text that will show the date interval. If you remove this property it will not shown.;
  • buttons(required): Where you will configure a buttons properties.;
  • buttons: {btnYear}(optional): Where you will configure a each button properties. If you do not use this property the related button will not be displayed;
  • buttons: {btnYear.txt}(optional): Text that will apear in button;
  • buttons: {btnYear.tooltip}(optional): Tooltip that will appear when user mouseover on button.;
  • inputConfig(optional): Without this property the default icon will be displayed;
  • inputConfig: {showIcon}(required): This property indicate if you want show icon. If the property is false, the icon will not be displayed;
  • inputConfig: {iconPath}(optional): This property indicate if you want show icon. This property indicate the path to his own icon;
  • minDate(optional): Indicates the minimun possible date for a user to select;
  • maxDate(optional): Indicates the maximum possible date for a user to select.
In your page use
  <chocobo-range-picker bindRange='false'
                        blockWeekDay='0,6'
                        locale='pt-BR'
                        options='options'
                        ng-model="demo.searchDate">
  </chocobo-range-picker>

chocobo-Range-Picker

  • bindRange(required)

    • true: All date in the range will be assigned to the model;
    • false: The first and last date will be assigned to the model.

  • blockWeekDay(optional)*: Property that represent a weekday to be blocked (0-6), where:

    • "Sunday": 0;
    • "Monday": 1;
    • "Tuesday": 2;
    • "Wednesday": 3;
    • "Thursday": 4;
    • "Friday": 5;
    • "Saturday": 6.

Attention these locales have been tested.

  • Spain: es-ES
  • Brazil: pt-BR
  • United States: en-US
  • Great Britain: en-GB
  • Germany: de-DE

Used versions

  • Angular
    • version: 1.2.32

License

It is available under the MIT license. License

Collaborators