angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期

发布时间：2020-12-17 10:37:16 所属栏目：安全来源：网络整理

导读：Document $scope.dt1; $scope.dt2; $scope.datepickerOptions1/spanspan style="background-color: #f5f5f5; color: #000000"gt;=/spanspan style="background-color: #f5f5f5; color: #000000"gt;{ maxDate:$scope.dt2,showWeeks:/spanspan style="backgrou

Document

        $scope.dt1;
        $scope.dt2;
        $scope.datepickerOptions1</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;{
            maxDate:$scope.dt2,showWeeks:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;false</span><span style="background-color: #f5f5f5; color: #000000"&gt;,startingDay:</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;
        };
        $scope.datepickerOptions2</span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt;{
            minDate:$scope.dt1,startingDay:</span><span style="background-color: #f5f5f5; color: #000000"&gt;1</span><span style="background-color: #f5f5f5; color: #000000"&gt;
        };
        </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;打开popup</span>

$scope.pop1={
opened:false
};
$scope.pop2={
opened:false
};
$scope.openpop1=function(){
$scope.pop1.opened=!$scope.pop1.opened;
};
$scope.openpop2=function(){
$scope.pop2.opened=!$scope.pop2.opened;
};

        </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;监听dt1 和dt2 如果dt1 变化就设置 datepickeroptions.mindate就变化</span>

$scope.$watch('dt1',function(newValue,oldValue){
$scope.datepickerOptions2.minDate=newValue;
});
$scope.$watch('dt2',oldValue){
$scope.datepickerOptions1.maxDate=newValue;
});
/手动输入限制使用表单验证
datepicker输入限制使用maxDate minDate
startPopup 最小时间没有限制最大时间 endTime
endPopup 最小时间 startTime 最大时间 today
*/
})
</script>
</head>
<body ng-controller="myCtrl">
<div class="row">
<div class="col-xs-2">上架时间:</div>
<div class="col-xs-4">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="dt1" is-open="pop1.opened"
ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" datepicker-options="datepickerOptions1" ng-click="openpop1()"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="openpop1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-xs-2">下架时间:</div>
<div class="col-xs-4">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="dt2" is-open="pop2.opened"
ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" datepicker-options="datepickerOptions2" ng-click="openpop2()"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="openpop2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</body>
</html>

Document

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="lib/angular1.6.1.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="lib/ui-bootstrap-tpls-2.3.2.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;src</span><span style="color: #0000ff"&gt;="lib/angular-locale_zh-cn.js"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span><span style="background-color: #f5f5f5; color: #800000"&gt;
    .container</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        margin-top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    .uib-datepicker-popup.dropdown-menu .uib-daypicker</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        outline</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-md-4">上架日期：
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="startTime" is-open="open1" datepicker-options="{maxDate:(endTime),showWeeks:false}" ng-required="true" clear-text="清空" current-text="今天" close-text="取消" alt-input-formats="altInputFormats" ng-click="open1=!open1"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1=!open1"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>

          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="col-md-4"</span><span style="color: #0000ff"&gt;></span><span style="color: #000000"&gt;下架日期：
            </span><span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="input-group"</span><span style="color: #0000ff"&gt;></span>
              <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;input </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="form-control"</span><span style="color: #ff0000"&gt; uib-datepicker-popup</span><span style="color: #0000ff"&gt;="yyyy-MM-dd"</span><span style="color: #ff0000"&gt; ng-model</span><span style="color: #0000ff"&gt;="endTime"</span><span style="color: #ff0000"&gt; is-open</span><span style="color: #0000ff"&gt;="open2"</span><span style="color: #ff0000"&gt; datepicker-options</span><span style="color: #0000ff"&gt;="{minDate:(startTime),showWeeks:false}"</span><span style="color: #ff0000"&gt; ng-required</span><span style="color: #0000ff"&gt;="true"</span><span style="color: #ff0000"&gt; clear-text</span><span style="color: #0000ff"&gt;="清空"</span><span style="color: #ff0000"&gt; current-text</span><span style="color: #0000ff"&gt;="今天"</span><span style="color: #ff0000"&gt; close-text</span><span style="color: #0000ff"&gt;="取消"</span><span style="color: #ff0000"&gt;  ng-click</span><span style="color: #0000ff"&gt;="open2=!open2"</span><span style="color: #0000ff"&gt;/></span>
              <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;span </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="input-group-btn"</span><span style="color: #0000ff"&gt;></span>
                <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;button </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="btn btn-default"</span><span style="color: #ff0000"&gt; ng-click</span><span style="color: #0000ff"&gt;="open2=!open2"</span><span style="color: #0000ff"&gt;><</span><span style="color: #800000"&gt;i </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="glyphicon glyphicon-calendar"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;i</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>
              <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;span</span><span style="color: #0000ff"&gt;></span>
            <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
          <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;script </span><span style="color: #ff0000"&gt;type</span><span style="color: #0000ff"&gt;="text/javascript"</span><span style="color: #0000ff"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt;
    angular.module(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;myApp</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; ($scope) {

    })
</span><span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;script</span><span style="color: #0000ff"&gt;></span>

</body>
</html>

，将选择的时间转换为字符串2017-08-08的格式，所以，那个时区就没具体的去研究处理了好了，上面的可以在任意页面使用了，而且不用在JS里做任何处理哦。。。后面发现有BUG会持续更新的。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!