-2

我想通过使用来实现Date Range Picker，但我找不到资源或很好的例子，所以任何人都可以建议我使用日期范围选择器或正常选择从日期到选择到日期的例子对我也有帮助，所以请建议我！我知道我不能在这个网站上问这种类型的问题，但我被卡住了，所以我问angularjsangular-ui-datepicker

我尝试了很多例子，但没有任何工作正常

这是我已经尝试过的代码片段：

Html代码：

<div class="row form-group" style="margin-left: 15px;" ng-if="table.custompicker">
    <div class="crm-form-container">
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
                <input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
                       ng-model="AvailableDate" ng-value="table.price_list.date_update"
                       is-open="table.dt_picker[3]" min-date="dpick.minDate" max-date="'2019-12-22'" 
                       datepicker-options="table.dateOptions3" date-disabled="table.disabled(date, mode)"
                       close-text="Close" placeholder="From Date" name="select_date" ng-change="ChangeExpiryMinDate(AvailableDate)" datepicker-mode="'day'" required=""/>
                <span class="input-group-btn">
                    <button class="btn btn-info" type="button" ng-click="table.open_dt_picker(3)">
                        <em class="fa fa-calendar"></em>
                    </button>
                </span>
            </div>
            <span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>

        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon" uib-tooltip="From Date" uib-tooltip-trigger="focus" uib-tooltip-placement="top"><i class="fa fa-hand-o-right" aria-hidden="true"></i></span>
                <input id="datepicker_update" class="form-control" type="text" uib-datepicker-popup="{{table.format}}"
                       ng-model="ExpireDate" ng-value="table.price_list.date_update"
                       is-open="table.dt_picker[4]" min-date="dpick.minDate" max-date="'2019-12-22'" 
                       datepicker-options="table.dateOptions4" date-disabled="table.disabled(date, mode)"
                       close-text="Close" placeholder="To Date" name="select_date" datepicker-mode="'day'" required=""/>
                <span class="input-group-btn">
                    <button class="btn btn-info" type="button" ng-click="table.open_dt_picker(4)">
                        <em class="fa fa-calendar"></em>
                    </button>
                </span>
            </div>
            <span class="text-danger" ng-show="table.validateInput('select_date', 'required')">{{'revalidationmsg.REQUIREDMSG'|translate}}</span>

        </div>
        <div class="col-sm-4">
            <button class="btn btn-success btn-xs" type="button"  value="SAVE" ng-click="table.generateReport(table.select)" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Generate Report</button>
            <button class="btn btn-default btn-xs" type="button" ng-click="" uib-tooltip="" uib-tooltip-trigger="focus" uib-tooltip-placement="top">Cancel</button>
        </div>
    </div>
</div>

这是JS：

vm.dt_picker = [];
vm.dt = [];
vm.open_dt_picker = function (index) {
    vm.dt_picker[index] = true;
};
$scope.dateOptions3 = {
    formatYear: 'yy',
    startingDay: 1,
    showWeeks: false,
    minMode: 'week',
    //minDate: today,
    //maxDate: new Date(2030, 5, 22)
};
$scope.dateOptions4 = {
    formatYear: 'yy',
    startingDay: 1,
    showWeeks: false,
    minMode: 'week',
    //minDate: today,
    //maxDate: new Date(2030, 5, 22)

};
vm.formats = ['dd-MMMM-yyyy', 'yyyy-MM-dd', 'yyyy', 'shortDate', 'MM-yyyy'];
vm.format = vm.formats[1];
vm.opencustompicker = function () {
    vm.custompicker = true;
};
4

1 回答 1

1

你的 HTML 代码就像

       <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
            <label>Start Date</label>
            <div class="input-group" >
                <input ng-readonly="true" type="text" class="form-control " id="startdate" name="startdate" uib-datepicker-popup="MM/dd/yyyy"
                       ng-model="fromDate" is-open="startDateStatus"
                       show-button-bar="true" data-ng-click="toggleStartDate($event)" 
                       placeholder="Select From Date"                                           
                       datepicker-options="options"
                       close-text="Close" />
                <span class="input-group-addon add-on link_cursor" data-ng-click="toggleStartDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <label>End Date</label>
            <div class="input-group">
                <input ng-readonly="true" type="text" class="form-control " id="enddate" name="enddate" uib-datepicker-popup="MM/dd/yyyy"
                       ng-model="toDate" is-open="endDateStatus"
                       show-button-bar="true" data-ng-click="toggleEndDate($event)"                                                                                                                         
                       placeholder="Select To Date"
                       datepicker-options="options2"                                          
                       close-text="Close" />
                <span class="input-group-addon add-on link_cursor" data-ng-click="toggleEndDate($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                </span>
            </div>
        </div>

和你的 Js 代码一样

        //toggle start date popup
        function toggleStartDate($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.startDateStatus = true;
        }

        //toggle end date popup
        function toggleEndDate($event) {
            $event.preventDefault();
            $event.stopPropagation();
            $scope.endDateStatus = true;
        }
于 2017-11-01T06:32:24.587 回答