Question

我想使用Date Range Picker在angularjs中实施angular-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;
};

Answer 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;
        }

angular-ui-datepicker中的日期范围选择器

1 个答案: