3. Datetime picker

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Datetime picker


  • Dears, does anybody know good datetime picker (free or not) for Onsen Mobile app ?

    2
  • 侍

    @Oleg I have a good sample to you.

    <!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />

    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


    <!-- --------------- App init --------------- -->

    <title>Onsen UI Sliding Menu</title>

    <script>
        var app = angular.module('app', ['onsen', 'ui.bootstrap']);
        app.controller('testController', function($scope){
    	  $scope.today = function() {
		    $scope.dt = new Date();
		  };
		  $scope.today();

		  $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.maxDate = new Date(2020, 5, 22);

		  $scope.open = function($event) {
		    $scope.status.opened = true;
		  };

		  $scope.dateOptions = {
		    formatYear: 'yy',
		    startingDay: 1
		  };

		  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
		  $scope.format = $scope.formats[0];

		  $scope.status = {
		    opened: false
		  };

		  var tomorrow = new Date();
		  tomorrow.setDate(tomorrow.getDate() + 1);
		  var afterTomorrow = new Date();
		  afterTomorrow.setDate(tomorrow.getDate() + 2);
		  $scope.events =
		    [
		      {
		        date: tomorrow,
		        status: 'full'
		      },
		      {
		        date: afterTomorrow,
		        status: 'partially'
		      }
		    ];

		  $scope.getDayClass = function(date, mode) {
		    if (mode === 'day') {
		      var dayToCheck = new Date(date).setHours(0,0,0,0);

		      for (var i=0;i<$scope.events.length;i++){
		        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

		        if (dayToCheck === currentDay) {
		          return $scope.events[i].status;
		        }
		      }
		    }

		    return '';
		  };
        });
    </script>

    <style>
        .page--menu-page__background {
            background-color: #333;
        }

        .page--menu-page__content {
            color: white;
        }

        .menu-close,
        .menu-close > .toolbar-button {
            color: #999;
        }

        .menu-list,
        .menu-item:first-child,
        .menu-item:last-child,
        .menu-item {
            background-color: transparent;
            background-image: none !important;
            border-color: transparent;
            color: #fff;
        }

        .menu-item {
            padding: 0 0 0 20px;
            line-height: 52px;
            height: 52px;
            text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
        }

            .menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }

        .menu-notification {
            display: inline-block;
            margin-top: 12px;
            font-size: 14px;
            height: 16px;
            line-height: 16px;
            min-width: 16px;
            font-weight: 600;
        }

        .bottom-menu-list,
        .bottom-menu-item:first-child,
        .bottom-menu-item:last-child,
        .bottom-menu-item {
            border-color: #393939;
            background-color: transparent;
            background-image: none !important;
            color: #ccc;
        }

            .bottom-menu-item:active {
                background-color: rgba(255, 255, 255, 0.1);
            }
        .nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
    </style>

</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                      var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
    </ons-sliding-menu>

    <ons-template id="menu.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent"></ons-toolbar>

            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New Post
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    <ons-icon icon="fa-bookmark"></ons-icon>
                    Bookmark
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-twitter"></ons-icon>
                    Official Twitter
                </ons-list-item>
            </ons-list>

            <br>

            <ons-list class="bottom-menu-list">
                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Settings
                    <div class="notification menu-notification">3</div>
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    Help
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Send feedback
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page1.html">
        <ons-page ng-controller="testController">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 1</div>
            </ons-toolbar>

            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

				    <h4>Inline</h4>
				    <div style="display:inline-block; min-height:290px;">
				      <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
				    </div>

				    <h4>Popup</h4>
				    <div class="row">
				        <div class="col-md-6">
				            <p class="input-group">
				              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
				              <span class="input-group-btn">
				                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
				              </span>
				            </p>
				        </div>

				        <div class="col-md-6">
				            <p class="input-group">
				              <input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
				              <span class="input-group-btn">
				                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
				              </span>
				            </p>
				        </div>
				    </div>
				    <div class="row">
				        <div class="col-md-6">
				            <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
				        </div>
				    </div>

				    <hr />
				    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
				    <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
				    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
				    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
                </ons-col>
            </ons-row>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 2</div>
            </ons-toolbar>


            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
                        Toggle Menu
                    </ons-button>
                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>
</body>
</html>
    1
angular 18 date 1 control 1 picker 1