发表于: 2017-06-11 21:10:02

1 626


今天完成的事情:

ng-options的用法。

 

bootstrap datetimepicker日历插件用法。

 

 

 

明天计划的事情:

 

找下bug理理思路

 

遇到的问题:

暂无

 

 

收获:

 

 

一、用法

 

ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上。

 

数组:

 

label for value in array

 

select as label for value in array

 

label group by group for value in array

 

select as label group by group for value in array

 

select as label group by group for value in array track by trackexpr

 

对象:

 

label for ( key , value ) in object

 

select as label for ( key , value ) in object

 

label group by group for ( key , value ) in object

 

select as label group by group for ( key , value ) in object

 

说明:

array / object: 数据源的类型,有数组和对象两种

value:迭代过程中,引用数组的项或者对象的属性值

key:迭代过程中,引用对象的属性名

label:选项显示的标签,用户可看到的

select:结果绑定到ngModel中,如果没有指定,则默认绑定value

groupgroup by的条件,表示按某条件进行分组

trackexpr:用于唯一确定数组中的迭代项的表达式

 

这里就用了数组的select

 


 

 

关于bootstrap datetimepicker日期插件使用

首先当然去官网下载咯,记得bootstrap datetimepickercssjs文件都要,还有BootstrapjQuery

 

使用场景

 

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。

 

使用方法

 

两个时间输入域如图:

 

html代码

 

  

<input size="16" type="text" id="datetimeStart" readonly>

--

<input size="16" type="text" id="datetimeEnd" readonly>

 

 js代码如下

  

<script type="text/javascript">

  $("#datetimeStart").datetimepicker({

    format: 'yyyy-mm-dd',

    minView:'month',

    language: 'zh-CN',

    autoclose:true,

    startDate:new Date()

  }).on("click",function(){

    $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())

  });

  $("#datetimeEnd").datetimepicker({

    format: 'yyyy-mm-dd',

    minView:'month',

    language: 'zh-CN',

    autoclose:true,

    startDate:new Date()

  }).on("click",function(){

    $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))

  });

</script>

 

 关于bootstrap插件datepicker,只选择年月;

 

<input type="text"class="form-control form_datetime_2"readonly id="month_time"value=""/>

$(".form_datetime_2").datetimepicker({

  language: 'zh-CN',

  format: 'yyyy-mm',

  autoclose: true,

  todayBtn: true,

  startView: 'year',

  minView:'year',

  maxView:'decade'

});

 

然后就是ng-model中绑定并显示的日期,因为这日期用的不是年月日。所以显示的话就转化下

 

 

先用parseInt() 函数可解析一个字符串,并返回一个整数。以 10 为基础来解析。

 

Date()中的toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。

.replace是用来去掉年月日之后的时分秒

 

 

 

 



返回列表 返回列表
评论

    分享到