Angular Js -moment Picker 时间插件(时间段选择)
一、moment Picker
插件的下载、引用及配置就不在多说了,直接暴力上代码
二、Html
<span>{{ctrl.newchoose}}</span> <span id='#showEndTimeError' placeholder="请选择日期" moment-picker="ctrl.chooseFormatted" format="YYYY-MM-DD HH:mm" start-view="day" min-date='ctrl.minDateMoment' today='true' autoclose='false' set-on-select ='false' is-open='ctrl["isopen"]' ng-model-options="{ updateOn: 'blur' }" change="ctrl.endTimechange(newValue, oldValue)" ng-model="ctrl.momentEndDate">点击选择</span>
三、Controller
angular .module('Demo', ['moment-picker']) .config(['momentPickerProvider', function (momentPickerProvider) { momentPickerProvider.options({ locale:"zh-cn", minutesStep: 30, }); }]) .controller('DemoController', ['$scope', function () { var ctrl = this; ctrl.isopen = false; ctrl.endTimechange =function(newValue, oldValue){ if(oldValue._i){ if( newValue._i<oldValue._i){ ctrl.startValue = newValue._i.split(" "); ctrl.endValue = oldValue._i.split(" "); if(ctrl.startValue[0] != ctrl.endValue[0] ){ alert('不能跨天选择') }else{ ctrl.newchoose = newValue._i +'-'+ctrl.endValue[1]; } }else { ctrl.startValue = oldValue._i.split(" "); ctrl.endValue = newValue._i.split(" "); if(ctrl.startValue[0] != ctrl.endValue[0] ){ alert('不能跨天选择') }else{ ctrl.newchoose = oldValue._i +'-'+ctrl.endValue[1]; } } console.log(ctrl.newchoose); ctrl.isopen = false; ctrl.chooseFormatted = '' } } //最小值 ctrl.minDateMoment = moment(); console.log(moment()); }]);
就是这么简单粗暴。——Ps : 正宗桂林米粉不错。