angular datepicker下载-angular datepicker免费版下载-源码网

angular datepicker

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

Angularjs DatePicker由720KB开发。

要求

Angularjs v1.3+

浏览器支持

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

加载

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

 >
< 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时做一个示例

" button-next=""> ">

 < datepicker button-prev ="  " button-next ="  " >
  < 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