我对表的日期选择器有疑问吗?

时间:2018-09-07 04:59:22

标签: html angularjs

<td class="col-50 text-right">                   
@Html.ngTextBox(ControlType.Date, true, "txtExpDate", null, new { @ng_model = "PharmacyStockInDetail.ExpDate", @class = "form-control", @data_smart_datepicker = "", @data_date_format = "{{Format.SmartDatePicker}}", @placeholder = "ExpDate" })
</td>

日期选择器未加载,我可以获得帮助吗?

3 个答案:

答案 0 :(得分:1)

您的问题很明确。 试试这个代码。这将达到目的。不过,您将不得不根据需要对其进行编辑。

您可以观看演示here

此外,如果您错过任何库导入操作,都不会获得日期选择器。请检查您是否正确导入了必要的库。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>

<body>
    <p>Set focus on the last column cells to select date!</p>

    <div ng-app="myApp" 
        ng-controller="myController">

        <table>
            <tr>
                <th>ID</th>
                    <th>Name of the Book</th>
                        <th>Issuing Date</th>
            </tr>
            <tr ng-repeat="books in booksArray | orderBy : 'values.id'">

                <td>{{books.values.id}}</td>
                    <td>{{books.values.name}}</td>
                        <td><input type="text" datepicker ng-model="datevalue" /></td>
            </tr>
        </table>
    </div>
</body>

<script>
    var myApp = angular.module('myApp', []);

    myApp.controller('myController', ['$scope', function ($scope) {
        // CREATE THE books OBJECT.
        $scope.books = [
            { 'id': '1', 'name': 'jQuery' },
            { 'id': '2', 'name': 'CSS3' },
            { 'id': '3', 'name': 'Angular 2' }
        ]

        $scope.booksArray = Object.keys($scope.books)
            .map(function (value, index) {
                return { values: $scope.books[value] }
            }
        );
    } ]);

    myApp.directive("datepicker", function () {

        function link(scope, element, attrs) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                dateFormat: "dd/mm/yy"
            });
        }

        return {
            require: 'ngModel',
            link: link
        };
    });
</script>
</html>

答案 1 :(得分:0)

您需要做的就是这个

<div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab"><a href="#winter">Winter</a></li>
                <li class="tab"><a href="#summer">Summer</a></li>
                <li class="tab"><a href="#sports">Sports</a></li>
                <li class="tab"><a href="#cos">Costumized</a></li>
                <li class="tab"><a href="#cla">Classic</a></li>
                <li class="tab"><a href="#tra">Traditional</a></li>
            </ul>
        </div>
        <div class="col s12" id="winter">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="summer">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="sports">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="cos">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="cla">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
        <div class="col s12" id="tra">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Molestiae quo porro, doloribus nulla,
            pariatur beatae consequatur eaque sequi quaerat ipsam,
            enim atque assumenda quis quisquam.
            Pariatur ullam cum sint inventore!
        </div>
    </div>

此信息取自Angular docs

答案 2 :(得分:0)

@ Html.ngTextBox(ControlType.Date,false,“ txtExpDate”,null,新建{@ng_model =“ Detail.ExpDate”,@class =“ form-control”,@data_smart_datepicker =“”,@data_date_format =“ {{Format.SmartDatePicker}}“,@ placeholder =” Date“})

以上代码已成功执行!! 我正在使用动态代码生成器来说明为什么一切都在参数中