Angular Js -moment Picker 时间插件(时间段选择)

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 : 正宗桂林米粉不错。

时间: 2024-10-12 18:28:30

Angular Js -moment Picker 时间插件(时间段选择)的相关文章

js多功能时间插件推荐

多应用的js网页代码时间插件,可以选择多种模式,官网jedate插件演示demo 演示及下载地址:http://www.sucaihuo.com/js/1087.html

Date Range Picker时间插件非常不错,主要体现在选择一个时间区间

地址:http://www.daterangepicker.com/ demo地址:http://tamble.github.io/jquery-ui-daterangepicker/#event api 参数 startDate: (日期对象.实践对象或者字符串)初始开始时间 endDate: (日期对象.实践对象或者字符串) 初始结束时间 minDate: (日期对象.实践对象或者字符串) 可选最早时间 maxDate: (日期对象.实践对象或者字符串) 可选最晚时间 dateLimit:

easyUI自带的时间插件日期选择、月份选择、时间选择的使用

1.日期选择 只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js <input type="text" class="easyui-datebox" id="datetime"> 2.时间选择 默认的时间选择是精确到年月日时分秒的,只要把class设置成easyui-datetimebox就可以实现 <input type="text" id="dat

angular js中ng-model时间格式化

直接上带代码,事实上此时不用ng-model,直接用value即可 <div class="form-group m-b-sm"> <label class="col-sm-3 control-label"><span class="text-danger m-r-xs"></span>修改时间</label> <div class="col-sm-9">

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

当同时使用bootstrap-datepicker.js和jquery.validate.js这两款插件,至少要选择两次时间,才能验证成功的问题

当用 bootstrap-datepicker.js 这个插件选择时间,再用jquery.validate.js进行验证,当时间不为空时则验证通过.可能由于在时间插件弹出来时,input框的值发生改变,这时候就进行了验证,所以每次进行验证的都是bootstrap-datepicker.js选中日期的前一个值,比如:默认日期为空,当第一次选中日期,假设该日期为(2019-2-22),那么本次验证的值则为空,所以验证不通过:当再次选中时间,假设这次选中时间为(2019-2-23),才有前一个值为(2

【Angular JS】网站使用社会化评论插件,以及过程中碰到的坑

目前正在开发自己的网站,技术上使用Angular JS + Express JS + Mongo DB.由于网站会有文章发布,因此需要有评论功能.评论功能也可以自己开发,但由于现在社会化评论插件很多,因此没有必要多花精力,使用专业的就好. 1. 什么是社会化评论插件?都有哪些常用的插件? 社会化评论插件,指的就是无需自己开发评论功能,在自己网页上使用第三方的评论框,发出的评论将被保存在第三方的服务器上.使用时要在插件提供方官网上注册,注册好之后可获取实现功能的JS代码,以及将来可在官网上管理自己

工作笔记---js时间插件的使用

工作中用到日期时间插件,需要精确到秒,总结工作所得,标记... 第一种,jquery-datapicker(默认是年月日),加上扩展jquery-ui-timepicker-addon.js(可以实现时分秒) 需要引入的相关js: 1 <link rel="stylesheet" type="text/css" href="css/jquery.ui.custom.min.css" /> 2 <script type="

lhgcalendar时间插件限制只能选择三个月

/** * lhgcalendar时间插件限制只能选择三个月 * @d 获取到的开始时间 * @m 要限制的时间的长度(月) *将最后获得的结束时间与开始时间存放在input中 */ function addMoth(d,m){ var ds=d.split('-'); var ds1 = ds[1]-1+m; var ds2 = ds[2]; d=new Date( ds[0],ds1,ds[2]); var cond1 = parseInt(ds[0]) % 4 == 0; //条件1:年份