ionic datepicker

＃＃介绍：

这是一个ionic-datepicker bower组件，可在任何离子框架的应用程序中使用。此组件无需其他插件。该插件是完全开源的。请对此插件进行评分

从1.0.0版本中，此组件具有许多新功能，您应该使用的方式与该组件的旧版本不同。如果您想查看此组件的先前版本的文档，请检查以前的版本

对于离子V2，该组件正在开发中。你可以在这里检查

查看演示

##先决条件。

• node.js，npm
• 离子
• 鲍尔
• g

##如何使用：

1. 在您的项目文件夹中，请使用Bower安装此插件

bower install ionic-datepicker --save

这将安装此插件的最新版本。如果您想安装任何特定版本（例如：0.9.0），则

bower install ionic-datepicker#0.9.0 --save

2. 在您的index.html文件中指定ionic-datepicker.bundle.min.js的路径。

<script src=\”lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js\”></script>\’>

 <!-- path to ionic -->
< script src =\" lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js \" > </ script >

3. 在您应用程序的主模块中，注入依赖ionic-datepicker ，以便使用此插件

 angular . module ( \'mainModuleName\' , [ \'ionic\' , \'ionic-datepicker\' ] ) {
//
}

4. 您可以使用ionicDatePicker提供商在配置方法中以应用程序级别配置此日期选择器。如果您想设置配置，则您的配置方法可能看起来像这样。但这不是强制性步骤。

 . config ( function ( ionicDatePickerProvider ) {
    var datePickerObj = {
      inputDate : new Date ( ) ,
      titleLabel : \'Select a Date\' ,
      setLabel : \'Set\' ,
      todayLabel : \'Today\' ,
      closeLabel : \'Close\' ,
      mondayFirst : false ,
      weeksList : [ \"S\" , \"M\" , \"T\" , \"W\" , \"T\" , \"F\" , \"S\" ] ,
      monthsList : [ \"Jan\" , \"Feb\" , \"March\" , \"April\" , \"May\" , \"June\" , \"July\" , \"Aug\" , \"Sept\" , \"Oct\" , \"Nov\" , \"Dec\" ] ,
      templateType : \'popup\' ,
      from : new Date ( 2012 , 8 , 1 ) ,
      to : new Date ( 2018 , 8 , 1 ) ,
      showTodayButton : true ,
      dateFormat : \'dd MMMM yyyy\' ,
      closeOnSelect : false ,
      disableWeekdays : [ ]
    } ;
    ionicDatePickerProvider . configDatePicker ( datePickerObj ) ;
  } )

在上面的代码中，我没有配置所有属性，但是您可以尽可能多地配置属性。

您可以配置的属性如下。

a）输入日期（可选）：这是我们可以传递给组件的日期对象。您可以将任何日期对象提供给此属性。默认值是new Date() 。

b）titlelabel （可选）：弹出式或模态的可选标题。如果省略或设置为null ，则标题将默认为当前选定的日期，格式为MMM dd, yyyy

c）setLabel （可选）： Set按钮的标签。 Set默认值

d）今日标签（可选）： Today按钮的标签。默认值Today

e）闭合标签（可选）： Close按钮的标签。默认值Close

f）星期一第一次（可选）：如果您想将星期一显示为第一天，则设置为true 。默认值为false ，这将显示为周日的第一天。

g）WeeksList （可选）：这是一个阵列，其中包含所有工作日的列表。如果您想以其他语言或格式显示几个月，或者希望使用模态而不是用于此组件的弹出窗口，则可以使用此功能，可以在控制器中定义weekDaysList阵列，如下所示。

  [ \"Sun\" , \"Mon\" , \"Tue\" , \"Wed\" , \"thu\" , \"Fri\" , \"Sat\" ] ;

默认值是

  [ \"S\" , \"M\" , \"T\" , \"W\" , \"T\" , \"F\" , \"S\" ] ;

h）几个月的人（可选）：这是一个包含所有月份列表的阵列。如果您想以其他语言或格式显示几个月，则可以使用此功能。您可以创建一个如下的数组。

  [ \"Jan\" , \"Feb\" , \"March\" , \"April\" , \"May\" , \"June\" , \"July\" , \"Aug\" , \"Sept\" , \"Oct\" , \"Nov\" , \"Dec\" ] ;

默认值是

  [ \"January\" , \"February\" , \"March\" , \"April\" , \"May\" , \"June\" , \"July\" , \"August\" , \"September\" , \"October\" , \"November\" , \"December\" ] ;

i）残疾人（可选）：如果您有禁用日期列表，则可以创建一个类似于以下数组。默认值是一个空数组。

  var disabledDates = [
      new Date ( 1437719836326 ) ,
      new Date ( ) ,
      new Date ( 2016 , 7 , 10 ) , //Months are 0-based, this is August, 10th.
      new Date ( \'Wednesday, August 12, 2015\' ) , //Works with any valid Date formats like long format
      new Date ( \"08-14-2016\" ) , //Short format
      new Date ( 1439676000000 ) //UNIX format
  ] ;

j）TemplateType （可选）：这是字符串类型，它采用两个值IE modal或popup 。默认值是modal 。如果您想在弹出窗口中打开，则可以将值指定为popup ，否则可以忽略它。

k）来自（可选）：这是一个日期对象，您希望从中启用日期。您可以使用此属性通过from: new Date()来禁用以前的日期。默认情况下，所有日期均已启用。请注意，几个月为0。

l）至（可选）：这是一个日期对象，您希望启用日期。您可以使用此属性通过指定to: new Date()来禁用未来日期。默认情况下，所有日期均已启用。请注意，几个月为0。

m）dateformat （可选）：这是模板中使用的日期格式。默认为dd-MM-yyyy 。有关如何格式日期，请参见：http：//www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.1.15

n）showtodaybutton （可选）：布尔值指定是否显示Today按钮。默认值是false 。

o）CloseOnselect （可选）：布尔值指示选择日期选择器/模态是否会在选择后关闭。如果设置为true ， Set按钮将被隐藏。默认值是false 。

p）disableweekdays （可选）：接受从0（星期日）到6（周六）开始的数字数组。如果您指定此数组的任何值，那么它将在整个日历中禁用该周日。例如，如果您通过[0,6]，则所有星期日和周六将被禁用。

5. 在控制器中注入ionicDatePicker ，您希望在其中使用此组件。然后使用以下方法可以调用datepicker。

 . controller ( \'HomeCtrl\' , function ( $scope , ionicDatePicker ) {

    var ipObj1 = {
      callback : function ( val ) {  //Mandatory
        console . log ( \'Return value from the datepicker popup is : \' + val , new Date ( val ) ) ;
      } ,
      disabledDates : [            //Optional
        new Date ( 2016 , 2 , 16 ) ,
        new Date ( 2015 , 3 , 16 ) ,
        new Date ( 2015 , 4 , 16 ) ,
        new Date ( 2015 , 5 , 16 ) ,
        new Date ( \'Wednesday, August 12, 2015\' ) ,
        new Date ( \"08-16-2016\" ) ,
        new Date ( 1439676000000 )
      ] ,
      from : new Date ( 2012 , 1 , 1 ) , //Optional
      to : new Date ( 2016 , 10 , 30 ) , //Optional
      inputDate : new Date ( ) ,      //Optional
      mondayFirst : true ,          //Optional
      disableWeekdays : [ 0 ] ,       //Optional
      closeOnSelect : false ,       //Optional
      templateType : \'popup\'       //Optional
    } ;

    $scope . openDatePicker = function ( ) {
      ionicDatePicker . openDatePicker ( ipObj1 ) ;
    } ;
} ;

除了配置方法外，您还可以在控制器中重新配置所有选项。如果您再次设置任何属性，则控制器中提到的值将覆盖它们。如果应用程序中有多个属性属性，这将很有用。

在以上所有步骤中，唯一强制性的是callback ，您将在其中获取所选的日期值。

##屏幕截图：

成功完成上述步骤后，您应该能够使用此插件。

第一个屏幕截图显示了弹出窗口，第二个显示了该插件的模态。

ios：

安卓 ：

## CSS类：

＃＃＃弹出窗口

1）prev_btn_section

2）next_btn_section

3）select_section

4）month_select

5）eyal_select

6）calendar_grid

7）Weeks_row

8）selected_date

9）date_col

10）今天

###模式

1）left_arrow

2）Right_arrow

其他类别与弹出窗口相同。您可以使用以下任何一个类别自定义弹出窗口和模态CSS。
#### ionic_datepicker_popup #### ionic_datepicker_modal

按钮的CSS类名称如下

a）对于Set按钮，类名称为button_set

b）对于Today按钮，班级名称为button_today

c）对于Close按钮，类名称为button_close

##版本：

1）V0.1.0

已经实现了整个日期选择器功能，并且可以使用bower install ionic-datepicker --save

2）V0.1.1

错误修复。这是ionic-datepicker组件的最新版本。

3）v0.1.2

错误修复。如果我们不将日期传递给时间选择器，则默认情况下会选择今天的日期。

4）v0.1.3

错误修复

5）v0.2.0

禁用以前的日期功能。

6）v0.3.0

a）用户可以使用下拉列表选择年和几个月。

b）添加了回调功能。

7）V0.4.0

特征

a）添加了添加的未来日期功能。您可以将其用于选择DOB。

b）添加了DatePicker Modal的自定义标题文本。

bugfixes

错误＃22，错误＃26，错误＃29

8）V0.5.0

a）已添加了禁用特定日期的功能。

b）添加用于自定义的CSS类。

9）V0.6.0

a）固定日期选择颜色问题。

b）添加的功能是将周一作为一周的第一天显示。

10）V0.7.0

特征

a）添加to from功能。

b）代码重新结构。

c）更新的节点模块。

bugfixes

错误＃58，错误＃56，错误＃54，错误＃42，错误＃37，错误＃28

11）V0.8.0

特征

您可以在此ionic-datepicker中使用弹出式或模态。

BugFix

错误＃59

12）v0.9.0

特征

您可以给定制的周名。

BugFix

错误＃63

13）v1.0.0

特征

a）您可以从配置方法配置离子datepicker。

b）您可以从控制器中调用离子日期。

c）新CSS

d）禁用日历的特定日子。

除上述功能外，还增加了更多功能。

bugfixes

错误＃88，错误＃94，错误＃101，错误＃112，错误＃114，错误＃116，错误＃117，错误＃120，错误＃128，错误＃129，错误＃133，错误＃133，错误＃145，错误＃146，错误＃151，错误＃154，错误＃154，错误＃161，错误＃163，错误＃166，错误＃168，错误＃168，错误＃168，错误＃168，错误＃168，错误＃171，171，错误＃171，错误

14）v1.1.0

bugfixes

错误＃178，错误＃179，错误＃180

15）v1.2.0

很多错误修复。很多公关的合并。

CSS更改弹出窗口，因此所有月份的所有日期都适合指定的高度。

16）v1.2.1

修改版本以与当前版本版本匹配。

##许可证：麻省理工学院

##联系人：gmail：rajeshwar.patlolla@gmail.com

github：https：//github.com/rajeshwarpatlolla

Twitter：https：//twitter.com/rajeshwar_9032

Facebook：https：//www.facebook.com/rajeshwarpatlolla

贝宝：rajeshwar.patlolla@gmail.com

评论或评分：http：//market.ionic.io/plugins/ionicdatepicker