angular--bootstrap实例日期控件【datepicker】

head部分:

<!--Bootstrap-->
<link rel="stylesheet" href="/supProdom/script/bootstrap/dist/css/bootstrap.min.css" />
<script src="/supProdom/script/bootstrap/dist/js/bootstrap.min.js "></script>
<!--plugin : bootstrap timepicker-->
<link rel="stylesheet" href="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
<script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="/supProdom/script/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>

<script src="/supProdom/script/js/Addsup.js"></script>
<script src="/supProdom/script/js/js/controller.js"></script>
<script src="/supProdom/script/js/js/CincoJiang.js"></script>

html部分

body ng-app="myApp" ng-controller="addCtrl">
<form id="[email protected]">
<table class="table table-hover" >

<tr>
<td width="10%" align="right" class="control-label">成立日期:</td>
<td>
<div class="form-group">
<div ng-model=‘timepickerTest‘ ng-time class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" ng-model="input" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input" value="" /><br/>
</div>
</td>

</tr>

</table>

js代码:

  Addsup.js:

var supModule = angular.module(‘myApp‘, [ ‘app.controllers‘,
‘app.directives‘]);
supModule.controller(‘addCtrl‘, [‘$scope‘, function ($scope) {

}]);

controller.js

angular.module(‘app.controllers‘, [])

.controller(‘appCtrl‘,[‘$scope‘,function ($scope) {
$scope.test = ‘test‘;
console.log($scope.test);
}]);

CincoJiang.js:

‘use strict‘;

angular.module(‘app.directives‘, [])
.directive(‘ngTime‘, function() {
return {
restrict : ‘A‘,
require : ‘?ngModel‘,
link : function($scope, $element, $attrs, $ngModel) {
if (!$ngModel) {
return;
}
$(‘.form_date‘).datetimepicker({
language: "zh-CN",
format:"yyyy-mm-dd",
todayBtn:true,
clearBtn:false,// 自定义属性,true 显示 清空按钮 false 隐藏 默认:true
startView:2,
minView:2,
weekStart: 1,
todayHighlight: 1,
autoclose: 1,
forceParse: 0
});
},
};
});

时间: 2024-12-14 17:05:38

angular--bootstrap实例日期控件【datepicker】的相关文章

bootstrap关于日期控件被模态框遮盖的BUG修复

bootstrap关于日期控件被模态框遮盖的BUG修复 在使用bootstrap-datepicker.js插件的时候,由于是在模态框中填写日期值,而模态框的值把日期控件遮盖在下面了,导致无法填写日期值.如下图所示: 其本质原因是:当我们点击日期控件填写日期时,bootstrap-datepicker.js帮我们动态生成了class为datepicker dropdown-menu的div,其中包括日期控件中的由年月日等构成的div,而dropdown-menu样式是在bootstrap.css

玩转Kendo UI:日期控件DatePicker(一)

---恢复内容开始--- 前言 因为工作原因,近来接触Kendo UI比较多,这期间利用它实现了一些功能,也遇到了一些坑,国内对于这个产品的介绍也不多,所以打算写一些文章,介绍一下Kendo UI,顺便记录下自己实现某些方案时遇到的问题及解决方案. Kendo UI 简介 Kendo UI是Progress软件公司旗下的一款UI工具包产品,具有灵活性强.控件丰富.功能强大等特点.目前工具包有支持jQuery.Angular.React.Vue等版本.由博主工作上只接触了jQuery版本,所以写文

日期控件datepicker的使用

引入JS: <script type="text/javascript" src="static/my/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="static/my/js/bootstrap-datepicker-cn.js"></script> 加载页面时初始化日期

bootstrap 模态框日期控件datepicker被遮住问题的解决

找到日期输入框,并将  .class 属性的 z-index 改大 在JSP页添加样式: 这样就OK了:

【MVC5】日期选择控件DatePicker

项目中使用了Bootstrap,日期控件就选择了依赖于bootstrap的DatePicker. 在App_Start\BundleConfig.cs中引用css和js文件: bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/bootstrap-

WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控件Calendar自定义样式: 日期控件DatePicker自定义样式,及Label标签.水印.清除日期功能扩展: 二.Calendar自定义样式 先看看效果: 从上面图可以看出,日历的显示其实有三种状态,如下面的分解图: "日"部分的显示: "月"部分的显示: &qu

jquery日期控件使用,起止时间

1.下载jQuery核心文件,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js. 2.在HTML中引用

Jquery 日期控件

JQuery(2)  版权声明:本文为博主原创文章,未经博主允许不得转载. JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre