akveo / blur-admin

AngularJS Bootstrap Admin Panel Framework
http://akveo.github.io/blur-admin/
Other
11.37k stars 3.1k forks source link

Is there any code samples for datepicker #216

Open wdajun opened 7 years ago

wdajun commented 7 years ago

When I get access to http://akveo.com/blur-admin-mint/#/form/inputs, I've found there is 1 datepicker demo that using Angular UI (uib-datepicker-popup) directive. But after I install it on my local with git clone, I cannot found such code under src/app/pages/form/inputs, is there anybody help? Thanks~

wdajun commented 7 years ago

I've write some code inside 1 row, but it seems the css style is not correct on panel, the popup datepicker is too wide...and each buttons for days also too wide...

                    <div class="col-md-2" style="padding-top:8px;text-align:right;">Date From:</div>
                    <div class="col-md-5">
                        <div class="row">
                            <div class="col-md-5">
                                <p class="input-group">
                                    <input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" ng-click="open1()"
                                           is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                                  <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="open1()" style="min-width: 20px;">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                  </span>
                                </p>
                            </div>
                            <div class="col-md-1" style="padding-top:8px;text-align:right;">Date To:</div>
                            <div class="col-md-5">
                                <p class="input-group">
                                    <input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" ng-click="open2()"
                                           is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
                                  <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="open2()" style="min-width: 20px;">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                  </span>
                                </p>
                            </div>
                            <div class="col-md-1">&nbsp;</div>
                        </div>
                    </div>
                    <div class="col-md-5">&nbsp;</div>
sayoojvv commented 7 years ago
                       <div class="form-group col-sm-6 col-md-6 col-lg-6">
                        <label for="dob">Date Of Birth *</label>
                        <div class="datepickercustom" style="height:20px">
                            <p class="input-group">
                                <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-readonly='true' datepicker-options="dateOptions" ng-model="dob" is-open="popupdob.opened" close-text="Close"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-default" ng-click="opendob()"><i style="color:#209e91" class="glyphicon glyphicon-calendar"></i></button>
                                    </span> </p>
                        </div>
                    </div>

js:

$scope.formats = ['dd/MM/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; $scope.format = $scope.formats[0]; $scope.popupdoj = { opened: false }; $scope.opendoj = function () { $scope.popupdoj.opened = true; }; $scope.popupdob = { opened: false }; $scope.opendob = function () { $scope.popupdob.opened = true; };

daniel94104 commented 7 years ago

They are inside the form folder.