`
weitao1026
  • 浏览: 1064675 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

angular的时间空件

 
阅读更多
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js

<body ng-app="myApp" style="background:#4A4A4A" class="row">
<div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平台</div>
<section class="row">
<section ng-controller="dateDemo" class="col-md-6" style="float:none; margin:20px auto; background:#fff; padding:20px;">
<pre class="">选定的日期是：<em>{{dt | date:'fullDate'}}</em></pre> //{{}} 双花括号为angular的取值表达式
<h4>在线：</h4>
<section style="display:inline-block; min-height:240px;">
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="wellwell-sm"></datepicker>
</section> // ng-model 绑定dt模块 ， min-date  最少日期  show-weeks= ture 显示周 
<h4>弹出：</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2014-12-30'" datepicker-options="dateOptions" date-disabled = "disabled(date,mode)" ng-required="true" close-text="Close">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="">格式：</label>
<select name="" id="" class="form-control" ng-model="format" ng-options="f for f in formats"><option value=""></option></select>  //ng-options  循环添加option
</div>
</div>
<hr>
<div>
<button type="button" class="btn btn-info btn-sm" ng-click="today()">今天</button>  //一堆点击事件没什么好说的
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2008-08-08'">2008-08-08</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()" >清除</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today">闵日期</button>

</div>
</section>
</section>
</body>

例子参考：http://www.html5jq.com/fe/angular_node/20141127/12.html
分享到：
| 以表格的形式描述下伪分布式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ionic时间选择控件

    本文将深入探讨如何在Ionic项目中实现一个时间选择控件，特别是基于纯Angular编写的轻巧且实用的插件——"Ionic时间选择插件"。 首先，理解Ionic的核心概念是必要的。Ionic是一个使用Web技术（HTML、CSS和...

    时间控件，web前端

    Web前端有许多现成的时间控件库，如jQuery UI的时间选择器、Bootstrap DateTimePicker、Angular Material的MatDatepicker、Element UI的时间选择器等。这些库提供了丰富的API和自定义选项，使得开发者能够快速集成...

    时间控件.rar

    时间控件在IT行业中是网页或应用程序用户界面中不可或缺的一部分，它们允许用户选择或输入特定的时间值。在本文中，我们将深入探讨时间控件的概念、类型、用途以及如何在不同的编程语言和框架中实现它们。 一、时间...

    强大的时间控件（精确到天、小时、分钟都可以）

    在IT领域，时间控件是一种常见的用户界面元素，它允许用户选择或输入特定的时间值。在许多应用程序中，如日程管理、定时任务设定、事件安排等，都需要精确到天、小时甚至分钟的时间控制功能。本篇文章将深入探讨这种...

    最棒的Angular2表格控件

    Angular2表格控件是开发Web应用时不可或缺的一部分，主要用于展示和操作大量数据。在这个领域，Wijmo的Flexgrid被赞誉为最适合Angular2的表格控件。它满足了数据表格的三大基本要求：更小、更快、更熟悉。 首先，...

    一个时间控件的例子和使用方法

    在IT领域，时间控件是一种常见的用户界面元素，它允许用户选择或输入特定的时间值。在单位项目中，时间控件通常被用于提高用户交互的效率和准确性，尤其是在需要精确控制时间安排或时间记录的应用中。本文将深入探讨...

    一款很好用的时间控件

    时间控件在软件开发中扮演着重要的角色，它允许用户以直观的方式选择、输入或显示时间，提升用户体验。本文将详细探讨“一款很好用的时间控件”，并涉及JS（JavaScript）和HTML在实现这一功能中的应用。 首先，时间...

    年月选择的时间控件

    在实际应用中，这类时间控件通常会结合JavaScript或者特定的前端框架（如React、Vue或Angular）来实现。JavaScript负责处理用户交互逻辑，如显示和隐藏弹出窗口，以及验证用户输入。同时，它也可能需要与后端进行...

    js写的下拉列表时间控件。

    在网页开发中，时间控件是一种常见的用户交互元素，它允许用户方便地选择日期和时间。本主题聚焦于使用JavaScript实现的下拉列表时间控件，这种控件通常结合日历视图，提供用户友好的界面。下面我们将深入探讨相关的...

    时间选择控件

    在前端开发中，日期和时间控件常用于表单填写、事件预订、日程安排等场景。它们简化了用户输入日期和时间的过程，避免了手动输入可能产生的错误。这种控件通常会提供日历视图，滑块或者下拉菜单供用户选择年、月、日...

    时间控件

    标题中的“时间控件”通常指的是在Web应用中用于用户输入或显示时间的交互元素。这类控件在各种网页表单、日历应用、在线预订系统等中非常常见。时间控件可以是简单的文本框，配合日期选择器，或者更复杂的组件，...

    js时间控件

    9. **插件与框架集成**：如果项目中已经使用了像jQuery、Vue.js、React或Angular这样的库或框架，可以选择与其兼容的时间控件插件，如jQuery UI的Datepicker、Bootstrap的DateTimePicker等，以简化开发并保持代码...

    网页时间选择控件

    时间控件在多种场景下都有广泛的应用，例如在线预约、事件计划、会议安排等。它们能够与后台数据库进行交互，将用户选择的时间值存储为标准格式，方便后续的数据处理和分析。此外，这些控件还可以与其他前端框架（如...

    HTML或JSP时间控件

    3. **AngularJS ngModel绑定**：在AngularJS中，可以使用ngModel指令与Angular的date过滤器结合，创建一个可交互的时间控件。 四、时间控件的应用场景 时间控件在许多业务场景中都非常有用，如： - 预约系统：用户...

    时间日期输入控件

    时间日期输入控件在软件开发中扮演着至关重要的角色，特别是在构建用户界面时。这些控件允许用户方便地选择和输入日期和时间，是许多应用程序的标准组成部分，如表单、日历应用、预订系统等。在本文中，我们将深入...

    支持手机页面、web页面的时间日期控件

    为了满足全球用户的需要，日期时间控件应支持日期和时间格式的本地化。国际化（i18n）和本地化（l10n）技术可以帮助开发者轻松地调整日期和时间的显示格式，遵循各国的日期顺序和时间表示习惯。 **6. 自定义样式和...

    网页时间控件

    网页时间控件是一种常见的用户界面元素，特别是在网页表单中，允许用户方便地选择和输入日期或时间。这种控件通常被称为日期选择器或日期时间输入框，它为用户提供了一个直观的方式来选择日期，而无需手动输入，提高...

    时间控件时分秒

    4. React、Vue、Angular等前端框架：这些框架提供了时间组件，如React-DateTime、Vuetify的v-time-picker等，方便开发者快速构建具有响应式和动态功能的时间控件。 四、时间控件的交互设计 1. 清晰的反馈：当用户...

    轻实用日期时间控件 Calendar

    在IT行业中，日期时间控件是用户界面设计中不可或缺的一部分，尤其在处理涉及日程安排、事件记录或者数据录入的应用程序中。"轻实用日期时间控件 Calendar" 提供了一个简洁且高效的解决方案，使得用户在网页上进行...

    精心收藏的JS时间控件10款

    时间控件是网页开发中的一个重要组件，它允许用户方便地选择或输入日期和时间，提升用户体验。本资源集合精心挑选了10款高质量的JS时间控件，适合各种项目需求。 1. **jQuery UI Datepicker**：作为jQuery UI库的一...

Magicbox
Global site tag (gtag.js) - Google Analytics