Datepicker、Timepicker

最新推荐文章于 2024-05-02 19:13:37 发布

violet_day

最新推荐文章于 2024-05-02 19:13:37 发布

阅读量5.2k

点赞数

分类专栏： AngularJS 文章标签： datepicker angular bootstrap

AngularJS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

Datepicker Settings

show-weeks：是否显示每月的第几周，默认为ture
starting-day：日历显示的时间的第一个日期，默认为0，(0=Sunday, ..., 6=Saturday)
min：定义最小的显示时间，默认为空
max：定义最大的显示时间，默认为空
date-disabled (date, mode) (Default: null) : An optional expression to disable visible options based on passing date and current mode(day|month|year).
day-format：日期的格式，即每月的中的当前日期，默认dd
month-format：默认为MMMM
year-format：默认为yyyy
year-range：时间的选择范围，默认为20
day-header-format：(Default: 'EEE') : Format of day in week header.
day-title-format：(Default: 'MMMM yyyy') : Format of title when selecting day.
month-title-format：(Default: 'yyyy') : Format of title when selecting month.

Popup Settings

通过datepicker-options来设置，格式为json

弹出的具体设置如下：

datepicker-popup：显示日期的格式，默认为yyyy-MM-dd
current-text ：选择当天的按钮的显示文本，默认为Today
toggle-weeks-text：默认为Weeks
clear-text：默认为Clear
close-text：默认为Done
close-on-date-selection：默认为true，选择日期后是否关闭
datepicker-append-to-body：

注：如果需要中文，可以引入i18n/angular-locale_zh-cn.js

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
    <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h4>Inline</h4>
    <div class="well well-small" ng-model="dt" style="display:inline-block;">
        <datepicker min="minDate" show-weeks="showWeeks"></datepicker>
    </div>

    <h4>Popup</h4>
    <div class="form-horizontal">
        <p>
            <input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
            <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
        </p>
        <p><i>Format options:</i> <select ng-model="format" ng-options="f for f in formats"><option></option></select></p>
    </div>

    <hr />
    <button class="btn btn-small btn-inverse" ng-click="today()">Today</button>
    <button class="btn btn-small btn-inverse" ng-click="dt = '2009-08-24'">2009-08-24</button>
    <button class="btn btn-small btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
    <button class="btn btn-small btn-danger" ng-click="clear()">Clear</button>
    <button class="btn btn-small" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
<script>
    var Demo = angular.module('Demo', ['ui.bootstrap']);
    var DatepickerDemoCtrl = function ($scope, $timeout) {
        $scope.today = function() {
            $scope.dt = new Date();
        };
        $scope.today();
        $scope.showWeeks = true;
        $scope.toggleWeeks = function () {
            $scope.showWeeks = ! $scope.showWeeks;
        };
        $scope.clear = function () {
            $scope.dt = null;
        };
        // Disable weekend selection
        $scope.disabled = function(date, mode) {
            return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
        };
        $scope.toggleMin = function() {
            $scope.minDate = ( $scope.minDate ) ? null : new Date();
        };
        $scope.toggleMin();
        $scope.open = function() {
            $timeout(function() {
                $scope.opened = true;
            });
        };
        $scope.dateOptions = {
            'year-format': "'yy'",
            'starting-day': 1
        };
        $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
        $scope.format = $scope.formats[0];
    };
</script>
</body>
</html>

Timepicker

hour-step：时间变化的步长，默认为1
minute-step：分钟变化的步长，默认为1
show-meridian：是否显示am、pm切换，默认为true
meridians ：切换am、pm的文本，默认为['AM','PM']
readonly-input：是否允许用户输入，默认为false
mousewheel：当输入框获得焦点时，是否允许用户用滚滑轮变化数值大小，默认为ture

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
    <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="TimepickerDemoCtrl">
    <div ng-model="mytime" ng-change="changed()" class="well well-small" style="display:inline-block;">
        <timepicker hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
    </div>

    <pre>Time is: {{mytime | date:'shortTime' }}</pre>

    <div>Hours step is: <select ng-model="hstep" ng-options="opt for opt in options.hstep"></select></div>
    <div>Minutes step is: <select ng-model="mstep" ng-options="opt for opt in options.mstep"></select></div>

    <button class="btn" ng-click="toggleMode()">12H / 24H</button>
    <button class="btn" ng-click="update()">Set to 14:00</button>
    <button class="btn btn-danger" ng-click="clear()">Clear</button>
</div>
<script>
    var Demo = angular.module('Demo', ['ui.bootstrap']);
    var TimepickerDemoCtrl = function ($scope) {
        $scope.mytime = new Date();
        $scope.hstep = 1;
        $scope.mstep = 15;
        $scope.options = {
            hstep: [1, 2, 3],
            mstep: [1, 5, 10, 15, 25, 30]
        };
        $scope.ismeridian = true;
        $scope.toggleMode = function() {
            $scope.ismeridian = ! $scope.ismeridian;
        };
        $scope.update = function() {
            var d = new Date();
            d.setHours( 14 );
            d.setMinutes( 0 );
            $scope.mytime = d;
        };
        $scope.changed = function () {
            console.log('Time changed to: ' + $scope.mytime);
        };
        $scope.clear = function() {
            $scope.mytime = null;
        };
    };
</script>
</body>
</html>