日期控件的使用

一种：是jQuery插件，引入相应的库文件，当然还有jquery.js 

　　　　<script type="text/javascript" src="/js/jquery.js" ></script>

　　　　<script type="text/javascript" src="/js/jquery.datetimepicker.full.js" ></script>

　　　　<link rel="stylesheet" href="/css/jquery.datetimepicker.css" />

　　　　然后在input框中，定义 txtEndDate的id名字，然后调用即可

　　　　$(function () {

         $('#txtEndDate').datetimepicker({
             //yearOffset:222,
　　　　lang:'ch',
　　　　timepicker:false,
　　　　format:'Y-m-d',
　　　　formatDate:'Y-m-d',

　　　　});

 

若要汉化日期

 

en: { // English
months: [
"一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
],
dayOfWeekShort: [
"周日", "周一", "周二", "周三", "周四", "周五", "周六"
],
dayOfWeek: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
}, 即可 
或者可以 $.datetimepicker.setLocale('ch');//设置中文，如果插件不起效
<script>
   $('#datetimepicker').datetimepicker({lang:'ch'});
</script>
//也可以设置中文

 

详情见    http://www.jq22.com/jquery-info332

这是第一种日期控件，但是有一种弊端，就是使用angular时候，除非将type=date才能将ng-model的值绑定，但是会出现自带的日期控件，很丑，type=text绑定不了ng-model上的值，接下来介绍为angular量身定做的控件 ui-bootstrap中的日期控件

 

第二种：是ui-bootstrap中的日期控件 具体属性参照官网   http://angular-ui.github.io/bootstrap/

直接上代码，就是这么简单粗暴

起始日期:

<input type="text" class="form-control input-sm "  uib-datepicker-popup="yyyy-MM-dd" id="exampleInputAmount"
       is-open="vm.startTime.open" ng-required="true" close-text="关闭" current-text="今天" clear-text="清除"
       ng-model="vm.startTime.time" ng-focus="vm.startTime.openData()"
       placeholder=" 2016-04-06"  datepicker-options="vm.startTime.options"/>

结束日期:

<input type="text" class="form-control input-sm" uib-datepicker-popup="yyyy-MM-dd"
       is-open="vm.endTime.open" ng-required="true" close-text="关闭" current-text="今天"
       clear-text="清除" id="exampleInputAt"
       ng-model="vm.endTime.time" ng-focus="vm.endTime.openData()"
       placeholder="2016-04-06" datepicker-options="vm.endTime.options"/>

初始时候定义

vm.startTime = {
    open: false,
    time: date,
    openData: openStartTime,
    options: {}
};
vm.endTime = {
    open: false,
    time: date,
    openData: openEndTime,
    options: {}
};

然后定义

function openStartTime() {
    vm.startTime.options = {
        maxDate: vm.endTime.time
    };
    vm.startTime.open = true;
}

function openEndTime() {
    vm.endTime.options = {
        minDate: vm.startTime.time
    };
    vm.endTime.open = true;
}

这里要注意几点：1.命名时候尽量不要对象里面套对象，虽然控制台没有报错，但是识别不了，还是不会达到你想要的结果，例如 vm.model.startTime.time
　　　　　　　　2.close-text="关闭" current-text="今天" clear-text="清除" 就可以将页面上的三个按钮汉化，如果想要汉化日期  引入中文国际化文件 angular-locale_zh-cn.js 
　　　　　　　　　下载地址  https://github.com/angular/angular.js/tree/master/src/ngLocale

 

 

 

 

转载于:https://www.cnblogs.com/alhh/p/6543119.html