angular datepicker

angular datepicker是一个AngularJS指令，在您的输入元素上生成datePicker日历。

Angularjs DatePicker由720KB开发。

要求

Angularjs v1.3+

浏览器支持

铬合金	Firefox	IE	歌剧	野生动物园
✔	✔	IE9 +	✔	✔

加载

要使用该指令，请在网页中包括angular datepicker的JavaScript和CSS文件：

 <!DOCTYPE HTML >
< html >
< head >
  < link href =\" src/css/angular-datepicker.css \" rel =\" stylesheet \" type =\" text/css \" />
</ head >
< body ng-app =\" app \" >
  //.....
  < script src =\" src/js/angular-datepicker.js \" > </ script >
</ body >
</ html >

安装

鲍尔

 $ bower install angularjs-datepicker --save

NPM

 $ npm install angularjs-datepicker --save

然后将JS文件加载到您的html中

添加模块依赖关系

添加720KB.DatePicker模块依赖关系

 angular . module ( \'app\' , [
  \'720kb.datepicker\'
 ] ) ;

在您想要的HTML页面中，请致电指令

 < datepicker >
  < input ng-model =\" date \" type =\" text \" />
</ datepicker >

默认情况下，NG模型将在输入中显示一个JavaScript Date（）对象，您可以使用以下选项将您首选的日期格式设置为。

Doc

选项	类型	默认	描述
date-set =“”	细绳	错误的	设置默认日期以显示和init datepicker
		提示：不要为ng-model =“ date”和date-set =“ {{date}}”使用相同的范围，此示例是错误的。
		提示：如果您想将日期对象传递到内部，请像以下date-set =“ {{newdateObject.tostring（）}}}}”
		提示：考虑到`date-set=\"{{myDate}}\"`等于`new Date(attr.dateSet)` ，请确保您在date-set内部通过的日期始终为正确的ISO格式，或根据浏览器语言环境进行调整以避免与此问题进行调整。
date-format =“”	细绳	字符串（new Date（））	设置您要使用的日期格式，请参阅此处的列表
		提示：请始终使用公认的格式，也许首先尝试通过新日期（\’…\’），看看是否已识别
date-min-limit =“”	细绳	错误的	设置最低日期限制 – 您可以使用JavaScript `new Date()`使用所有接受的日期格式
date-max-limit =“”	细绳	错误的	设置最大日期限制 – 您可以使用JavaScript `new Date()`的所有接受的日期格式
日期 – 集合隐藏=“”	字符串（布尔）	错误的	设置仅在日历中而不是在输入字段中显示的默认日期
日期 – 划定日期=“”	字符串（[date（），date（），…]）	错误的	使用一系列日期禁用特定日期。
日期启用日期=“”	字符串（[date（），date（），…]）	错误的	仅使用一系列日期启用特定日期。
日期降低周日=“”	字符串（1，5，…]）	错误的	使用数周数的数组禁用特定的工作日
date-refocus =“”	字符串（布尔）	错误的	选择日期之后，将datepicker设置为重新聚焦输入
date-typer =“”	字符串（布尔）	错误的	将datepicker设置为更新用户键入日期时的日历日期，请参阅验证提示
日期周开始=“”	字符串（数字）	0	设置一周的第一天。必须是0（星期日）至6（星期六）之间的整数。（例如，星期一）
datepicker-class =“”	字符串（\’class1 class2 class3\’）	错误的	设置datePicker日历的自定义类/es
datepicker-append-to =“”	字符串（\’＃id\’，\’。className\’，\’hody\’）	错误的	将datepicker附加到#id或.class元素或身体
datepicker-toggle =“”	字符串（布尔）	真的	设置datepicker以切换其在焦点和模糊上的可见性
		提示：最好的是使用`pointer-events: none;`在输入上，如果您不希望用户切换日历可见性。
datepicker-show =“”	细绳	错误的	触发datepicker的可见性，如果显示为false，则显示了真实的datepicker
		提示：不要将其与datepicker-toggle混合以获得更稳定的行为
datepicker-mobile =“”	细绳	真的	设置为`false`以强迫移动样式覆盖。对于在移动应用中使用台式机上的分页控制特别有用。

选项

angular datepicker允许您通过attribute数据使用一些选项

自定义标题

您可以使用日期年度标题=“”和Date-month-title =“”数据属性（默认为“选择月”和“选择年度” ）的月份和年度选择者的标题

 < datepicker date-month-title =\" selected year \" >
    < input ng-model =\" date \" />
</ datepicker >

< datepicker date-year-title =\" selected title \" >
    < input ng-model =\" date \" />
</ datepicker >

在日历中亮点今天

要突出显示或样式日历中的今天，只需使用自己的CSS类（ ._720kb-datepicker-today ）。

. _720kb-datepicker-calendar-day . _720kb-datepicker-today {
  background : red;
  color : white;
}

自定义按钮

您可以自定义日历导航按钮内容，让我们在使用fontawesome时做一个示例

 < datepicker button-prev =\" <i class=\'fa fa-arrow-left\'></i> \" button-next =\" <i class=\'fa fa-arrow-right\'></i> \" >
  < input ng-model =\" date \" type =\" text \" />
</ datepicker >

箭头的自定义按钮标题

您还可以使用按钮next-title =“”左和右箭头的标题，用于右侧和按钮prev-title =“”左侧的标题。默认情况下，它们被标记为“ Next”和“ prev” 。

 < datepicker button-prev-title =\" previous month \" >
    < input ng-model =\" date \" />
</ datepicker >

< datepicker button-next-title =\" next month \" >
    < input ng-model =\" date \" type =\" text \" />
</ datepicker >

输入为孙子

有时，您不能将日期输入作为datepicker的第一个孩子。在这种情况下，您可以使用selector=\"\"指向输入的CSS类。以下示例使用Twitter bootstrap和fontawesome

 < datepicker date-format =\" yyyy-MM-dd \" selector =\" form-control \" >
    < div class =\" input-group \" >
        < input class =\" form-control \" placeholder =\" Choose a date \" />
        < span class =\" input-group-addon \" style =\" cursor: pointer \" >
        < i class =\" fa fa-lg fa-calendar \" > </ i >
        </ span >
    </ div >
</ datepicker >

手动显示和隐藏datepicker

有时您想（手动/编程）显示或隐藏datepicker，可以使用datepicker-show true来实现这false

 . controller ( \'TestController\' , [ \'$scope\' , \'$interval\' , function TestController ( $scope , $interval ) {
    $scope . visibility = true ;

    $interval ( function setInterval ( ) {
      //toggling manually everytime
      $scope . visibility = ! $scope . visibility ;
    } , 3500 ) ;
  } ] ) ;

  < datepicker ng-controller =\" TestController \" datepicker-show =\" {{visibility}} \" >
      < input ng-model =\" date3 \" type =\" text \" class =\" angular-datepicker-input \" />
    </ datepicker >

提示：您应该将此属性与`datepicker-toggle =“ false”一起使用

输入为孙子

有时，您不能将日期输入作为datepicker的第一个孩子。在这种情况下，您可以使用selector=\"\"指向输入的CSS类。以下示例使用Twitter bootstrap和fontawesome

 < datepicker date-format =\" yyyy-MM-dd \" selector =\" form-control \" >
    < div class =\" input-group \" >
        < input class =\" form-control \" placeholder =\" Choose a date \" />
        < span class =\" input-group-addon \" style =\" cursor: pointer \" >
        < i class =\" fa fa-lg fa-calendar \" > </ i >
        </ span >
    </ div >
</ datepicker >

尖端

日期验证

例如，如果要验证输入，则在用户键入时，只需参考ngModel即可。只要您使用类似的东西：

 < div ng-controller =\" MyCtrl as ctrl \" >
< input datepicker type =\" text \" ng-model =\" myDate \" />
</ div >

您可以显示验证错误，只需验证NGMODEL，例如对于任何其他类型的输入，例如：

 . controller ( \'Ctrl\' , [ \'$scope\' , function ( $scope ) {
  var liveDate ;

  $scope . $watch ( \'myDate\' , function ( value ) {
    try {
     liveDate = new Date ( value ) ;
    } catch ( e ) { }

    if ( ! liveDate ) {

      $scope . error = \"This is not a valid date\" ;
    } else {
      $scope . error = false ;
    }
  } ) ;
} ] ) ;

然后您的最终html：

 < div ng-controller =\" MyCtrl as ctrl \" >
< input type =\" text \" ng-model =\" myDate \" datepicker />
< div ng-show =\" ctrl.error \" > {{ctrl.error}} </ div >
</ div >

例子

现场演示

主题?

您可以编辑默认的CSS文件angular-datepicker.css如果要为datePicker制作新主题，则只需将其添加到themes dir and pr即可！

https://git*hub*.com*/720kb/angular-datepicker/tree/master/themes。

这是使用自定义CSS制作的深色主题的示例。

***请注意，该示例可能不会使用最新的Angular和/或模块版本进行解码

贡献

如果您帮助我们使这个项目成长，我们将非常感激。随意通过分叉，开头问题，拉请请求等做出贡献。

执照

麻省理工学院许可证（MIT）

版权（C）2014 Filippo Oretti，Dario Andrei

特此免费获得许可，免费授予任何获得此软件副本和相关文档文件（“软件”）的人，以无限制地处理软件，包括无限制的使用权，复制，复制，修改，合并，发布，分发，分发，分发，分配，sublicense和/或允许软件允许与以下条件相关的软件，以下是以下条件。

上述版权通知和此许可通知应包含在软件的所有副本或大量部分中。

该软件是“原样”提供的，没有任何形式的明示或暗示保证，包括但不限于适销性，特定目的的适用性和非侵权的保证。在任何情况下，作者或版权持有人都不应对任何索赔，损害赔偿或其他责任责任，无论是在合同，侵权的诉讼中还是其他责任，是由软件，使用或与软件中的使用或其他交易有关的。

angular datepicker