<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>日期组件</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style=" padding: 50px;">
<!--基本形式-->
<form action="" class="am-form" data-am-validator>
<p>
<input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
</p>
<p><button class="am-btn am-btn-primary">提交</button></p>
</form>
<!--结合组件使用-->
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'dd-mm-yyyy'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
<!--更改颜色-->
<p><input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker="{theme: 'success'}" readonly/></p>
<!--视图模式-->
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div><br>
<!--只能选择年份-->
<div>
<input type="text" class="am-form-field" data-am-datepicker="{format: 'yyyy ', viewMode: 'years', minViewMode: 'years'}" placeholder="日历组件" data-am-datepicker readonly/>
</div><br>
<!--自定义事件-->
<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
<p>开始日期应小于结束日期！</p>
</div>
<div class="am-g">
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始日期</button><span id="my-startDate">2014-12-20</span>
</div>
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束日期</button><span id="my-endDate">2014-12-25</span>
</div>
</div>
<script>
$(function() {
var startDate = new Date(2014, 11, 20);
var endDate = new Date(2014, 11, 25);
var $alert = $('#my-alert');
$('#my-start').datepicker().
on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() > endDate.valueOf()) {
$alert.find('p').text('开始日期应小于结束日期！').end().show();
} else {
$alert.hide();
startDate = new Date(event.date);
$('#my-startDate').text($('#my-start').data('date'));
}
$(this).datepicker('close');
});
$('#my-end').datepicker().
on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() < startDate.valueOf()) {
$alert.find('p').text('结束日期应大于开始日期！').end().show();
} else {
$alert.hide();
endDate = new Date(event.date);
$('#my-endDate').text($('#my-end').data('date'));
}
$(this).datepicker('close');
});
});
</script>
<!--设置禁止选择日期-->
<div class="am-g">
<div class="am-u-sm-6">
设置禁用日期<br/>
<p><input type="text" class="am-form-field" placeholder="今天之前的日期被禁用" id="my-start-2"/></p>
</div>
<div class="am-u-sm-6">
禁用日期<br/>
<p><input type="text" class="am-form-field" id="my-end-2" /></p>
</div>
</div>
<script>
$(function() {
var nowTemp = new Date();
var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
var $myStart2 = $('#my-start-2');
var checkin = $myStart2.datepicker({
onRender: function(date, viewMode) {
// 默认 days 视图，与当前日期比较
var viewDate = nowDay;
switch (viewMode) {
// moths 视图，与当前月份比较
case 1:
viewDate = nowMoth;
break;
// years 视图，与当前年份比较
case 2:
viewDate = nowYear;
break;
}
return date.valueOf() < viewDate ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.close();
$('#my-end-2')[0].focus();
}).data('amui.datepicker');
var checkout = $('#my-end-2').datepicker({
onRender: function(date, viewMode) {
var inTime = checkin.date;
var inDay = inTime.valueOf();
var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
// 默认 days 视图，与当前日期比较
var viewDate = inDay;
switch (viewMode) {
// moths 视图，与当前月份比较
case 1:
viewDate = inMoth;
break;
// years 视图，与当前年份比较
case 2:
viewDate = inYear;
break;
}
return date.valueOf() <= viewDate ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
checkout.close();
}).data('amui.datepicker');
});
</script>
<!--扩展语言-->
<p>
<input type="text" class="am-form-field" placeholder="来一丢丢 French"
data-am-datepicker="{locale: 'fr', autoClose: 0}" readonly/>
</p>
<script>
(function($) {
$.AMUI && $.AMUI.datepicker && ($.AMUI.datepicker.locales.fr = {
days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
daysMin: ["D", "L", "Ma", "Me", "J", "V", "S", "D"],
months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jui", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
weekStart: 1
});
})(window.jQuery);
</script>
</body>
</html>
效果图：
相关推荐
AmazeUI的表单组件支持各种输入类型，包括基本输入框、选择器、日期选择、开关等，同时支持表单验证，确保数据的准确性和完整性。 4. **widget.basic.html** 和 **widget.html**: 这两个文件可能涉及到AmazeUI的...
Amaze UI提供了丰富的组件，如按钮、表格、下拉菜单、日期选择器等，大大简化了开发工作。 6. **HTML后台管理模板**：作为HTML模板，它可以直接用于构建Web应用的后端界面，无需复杂的前端框架配置，降低了开发难度...
AmazeUI是一款基于Bootstrap的轻量级、移动优先的前端框架，它提供了丰富的组件和样式，使得开发者可以快速构建响应式、跨平台的Web应用。在这个"amazeui插件制作全年日历工作考勤表代码"项目中，我们将探讨如何使用...
CSS（Cascading Style Sheets）是网页样式设计的核心，Amaze UI 的 CSS 组件涵盖了布局、表单、按钮、图标、导航等多个方面。例如： 1. **布局组件**：提供栅格系统，使得网页内容能够灵活地适应不同屏幕尺寸，实现...
AmazeUI提供了一些可扩展的模块化组件，如日期选择器、时间轴、提示信息等，这些小部件可以方便地嵌入到页面中，提升交互体验。 `admin-log.html`可能与日志管理有关，展示如何利用AmazeUI展示和处理系统日志，这...
Amaze UI 在一些特定的中国应用场景，如二维码扫描、农历日期等方面有独特优势；而Bootstrap则在全球范围内有着广泛的应用和社区支持。 5. **压缩包中的文件**：“Amaze UI admin.zip”可能是Amaze UI 的后台管理...
AmazeUI提供了丰富的组件和模块，其中包括表单元素，是开发高性能、易用的Web应用的重要工具。 在AmazeUI的表单设计中，它强调了简洁、高效和用户友好的交互体验。表单是Web应用中常见的数据输入和收集工具，Amaze...
AmazeUI 输入框组是基于前端开发框架AmazeUI中的一个重要组件，主要用于构建网页上的表单元素，尤其是涉及用户输入的场景。这个组件提供了一种高效、美观且响应式的解决方案，帮助开发者创建出符合现代Web设计标准的...
6. **JavaScript插件**：除了CSS样式，AmazeUI还提供了许多JavaScript插件，如轮播图、日期选择器、滚动监听等，它们基于jQuery构建，易于理解和使用。 7. **社区支持**：AmazeUI拥有活跃的社区，开发者可以在其中...
4. **Bootstrap vs Amaze UI**：虽然Amaze UI受到了Bootstrap的影响，但它是针对中国用户的使用习惯和环境进行优化的，提供了更多符合中文网站需求的功能，如日期选择器、拼音搜索等。此外，Amaze UI的图标集更注重...
4. **示例文件**：在提供的文件列表中，我们看到有 `index.html`、`table-images-list.html`、`form-news-list.html`、`table-font-list.html`、`form-news.html`、`form-line.html`、`form-amazeui.html`、`chart....
4. **多列类型**：AmazeUI表格支持多种数据类型，如文本、数字、日期等，还可以自定义单元格内容，如添加链接、图片等元素。 5. **可编辑**：表格内的数据可直接编辑，方便用户即时更新信息，提高工作效率。 6. **...
Amaze UI的官方文档通常指向http://amazeui.shopxo.net/getting-started/，这里主要涵盖了基础组件的使用。然而，如果我们要使用datetimepicker，需要访问不同的文档源，即...
6. **易用性与可扩展性**：Amaze UI 模板提供了丰富的预定义样式和组件，开发者可以根据需求进行定制，快速搭建自己的后台界面。同时，模块化的结构使得添加新的功能或修改现有页面变得简单，有利于项目的长期维护和...
AmazeUI提供了各种表单元素，如文本输入框、选择器、日期选择器、多选框、单选框等，并且支持验证功能，确保数据的完整性和准确性。 3. **数据表格页**：数据展示和操作是后台管理的核心部分，AmazeUI的数据表格...
AmazeUI.js是基于AmazeUI项目的一个JavaScript组件库，提供了一系列可复用的组件，如下拉菜单、轮播图、模态对话框等。它旨在提供一套完整的前端解决方案，支持多种设备和浏览器。在日历插件中，AmazeUI.js的模块化...
AmazeUI支持各种输入类型，包括文本、日期、选择器等，还提供了表单验证和提交反馈等功能，确保用户输入的有效性和用户体验。 5. `admin-log.html`：这可能是日志查看或管理的页面，AmazeUI的表格和列表组件在此类...
总结，"15-Amaze UI 后台模板_响应式后台模板.zip"是一个基于Amaze UI框架的后台界面模板，它具备响应式布局、丰富的组件库和模块化开发等特点，适用于快速构建适应各种设备的Web应用后台。使用该模板，开发者可以...
1. **Amaze UI 框架**：Amaze UI 是一个开源的前端组件库，由中国的一支团队开发，旨在简化Web开发过程，提供多端适配和丰富的UI组件。它支持HTML5和CSS3，集成了Bootstrap的部分功能，同时融入了中国本土化的设计...