angular datepicker完全不符合预期
Angular Datepicker是一个用于选择日期的Angular组件。它提供了一个用户友好的界面，使用户能够轻松地选择日期。
然而，如果Angular Datepicker完全不符合预期，可能是由于以下几个原因：
- 版本兼容性问题：Angular Datepicker可能与你使用的Angular版本不兼容。确保你使用的Angular版本与Datepicker组件兼容，并且已经正确地导入和配置了该组件。
- 配置错误：检查你的Datepicker组件的配置选项是否正确。可能需要设置最小日期、最大日期、日期格式等选项来满足你的需求。
- 样式问题：Angular Datepicker的外观可能与你的预期不符。你可以通过自定义CSS样式来修改Datepicker的外观，以使其符合你的设计要求。
- 缺乏功能：Angular Datepicker可能缺少某些你期望的功能。在这种情况下，你可以考虑使用其他第三方日期选择器组件，如ngx-bootstrap或ng-bootstrap，它们提供了更多的功能和自定义选项。
推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款全托管的云原生应用开发平台，提供了丰富的后端服务和开发工具，可以帮助开发者快速构建和部署云原生应用。腾讯云云开发支持多种开发语言和框架，包括Angular，可以轻松集成和部署Angular应用。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
我是AngularJS的初学者，正在尝试使用日期选择器。我尝试使用基于普通jquery UI的日期选择器。但它并没有像预期的那样工作。那么谁能帮我写一些实现angular js的最简单的代码呢？我已经尝试使用720kb的角度日期选择器，我已经按照说明，什么都没有发生，没有错误，什么都没有！
app.js：
// Included in dependency injection.
let app = angular.module('mainApp', [
'720kb.datepicker', 'ngRoute', 'fetc
浏览 0提问于2017-05-02得票数 0
我正在使用angular- material实现datePicker，但是日历不能正确显示
我尝试降级角度/材质版本，但不起作用
//我的ionc信息如下
ionic (Ionic CLI) : 4.12.0
Ionic Framework : ionic-angular 3.9.6
@ionic/app-scripts : 3.2.3
Cordova:
cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
Cord
浏览 0提问于2019-07-13得票数 0
我已经构建了一个表单，我在某个时候使用了Datepicker：
<div class="col-lg-5">
<div class="form-group">
<label class="control-label" for="datepicker" style="padding-bottom:10px;">Deadline pour l'étudiant</label&
浏览 0提问于2015-05-19得票数 0
在我的angular应用程序中，我向DatePicker控件添加了必需的字段验证： <div class="form-group"
[ngClass]="{
'has-required':['injuryDate'].untouched && ['injuryDate'].invalid,
'has-error':['injuryDate'].touched && ['injuryDate'].invalid}&#
浏览 23提问于2019-04-12得票数 0
2回答
嘿，我想用这个模块进入我的：
我在这里包括css：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fon
浏览 3提问于2017-12-13得票数 0
回答已采纳
1回答
目标：
检索当前日期，然后在“数据日期”(用于开始日期和结束日期)和id的startDate和endDate中超过它。
问题：
守则：
var d = new Date();
var strDate = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
$('.dp4').html(strDate);
$('.dp5').html(strDate);
$('#startDate2').html(strDate);
$('#endDa
浏览 4提问于2015-06-11得票数 0
我使用的是ng2-bootstrap中的datepicker。
我已经在组件中导入了DATEPICKER_DIRECTIVES
import { DATEPICKER_DIRECTIVES } from './../../../node_modules/ng2-bootstrap/components/datepicker';
已将其添加到指令列表
directives: [DATEPICKER_DIRECTIVES],
然后在我的模板中，我像这样使用它：
<datepicker [(ngModel)]="dt" [minDate]="minDa
浏览 0提问于2016-06-13得票数 0
我是angular的新手，在使用datepicker指令时遇到了一些问题。的jsFiddle说明了我无法克服的一些问题。
表单非常简单：
<div ng-app="myApp" ng-controller="Ctrl">
<br>
Date 1
<input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}}
<br>
Da
浏览 1提问于2013-05-17得票数 1
1回答
带有角质数据报警器的怪异行为
、、、、
问题陈述
我已经实现了角材料日期选择器，但它不允许我看到它时，我导航到页面与它在那里。相反，它只是重定向我回到主页，因为一些非常奇怪的原因，即使这与路由无关！
码
每当我试图查看主页时，这就是将我重定向到主页的代码。这是行不通的，尽管它编译：
<mat-form-field class="dobContain">
<input matInput [matDatepicker]="datePicker" class="field" maxlength="30" type="text"
浏览 1提问于2020-03-02得票数 1
回答已采纳
1回答
使用jQuery数据报警器和dateFormat of d M, yyyy
但是当对表单进行验证时--这种格式是不被接受的。
这是我在表格上的内容：
$(".validate").validate();
$('.datepicker').datepicker({autoclose: true, format: "d M, yyyy"});
这是我的
谢谢!
浏览 3提问于2015-03-04得票数 0
回答已采纳
我在我的Angular 5应用中使用了最新的Angular Material 5.0.0-rc0。我正在尝试使用Angular material提供的datepicker选择日期范围，但我找不到任何有关这方面的文档。
我所能做的就是选择一个startDate或者设置minDate和maxDate。下面是实现这一功能的HTML代码
<mat-form-field>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placehold
浏览 7提问于2017-11-08得票数 27
6回答
在AngularJS中添加指令
、、、、
我试图构建一个负责的指令，将更多的指令添加到它所声明的元素中。例如，我想构建一个指令，负责添加datepicker、datepicker-language和ng-required="true"。
如果我尝试添加这些属性，然后使用$compile，我显然会生成一个无限循环，所以我正在检查是否已经添加了所需的属性：
angular.module('app')
.directive('superDirective', function ($compile, $injector) {
return {
restrict: '
浏览 1提问于2013-10-07得票数 199
回答已采纳
2回答
我试图在我的角2应用程序中使用。我遵循了上面的说明，但是日期选择器没有出现.控制台记录以下错误。
url_resolver.js:248 Uncaught TypeError: uri.match is not a function
我的app.module.ts
import { DatePicker } from 'ng2-datepicker/ng2-datepicker';
@NgModule({
declarations: [
AppComponent,
DatePicker
],
app.component.html
浏览 4提问于2016-10-07得票数 0
我就是想不出我忘了联系什么。但最终我有了一个不可能使用的datepicker
"@angular/material"："^9.2.3“
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepi
浏览 14提问于2020-05-14得票数 0
回答已采纳
我在我的Angular 8应用程序中使用了n模板驱动的mat-date选择器。“必需的”验证没有按预期工作。我看到一些反应式表单的解决方案，但找不到模板驱动表单的任何解决方案。下面是我的代码： <form name="actionPoint" role="form" (ngSubmit)="actionPoint.form.valid && confirmModal()"
#actionPoint="ngForm" novalidate autocom
浏览 12提问于2020-11-23得票数 1
我想禁用周末和特定日期在角材料数据报警器组件。
我怎么能这么做？
app.component.html:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker><
浏览 2提问于2018-01-09得票数 14
3回答
我有一个angular material 2日期选择器，它是在bootstrap模式下实现的：
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-bo
浏览 2提问于2017-09-07得票数 7
我从英雄之旅中克隆了快速入门项目，并尝试添加ng-Bootstrap datepicker，但它不起作用。我的项目：
app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from &
浏览 1提问于2017-07-16得票数 1
2回答
我在同一个div中更改了datepicker的html位置，之后在移动版本中无法单击Angular datepicker，因此无法工作。在此之前，它在移动版本中起作用。你知道哪里出了问题吗?或者从哪里开始找呢？
/Added我为此拥有的代码。/
<div class="col-md-4">
<label style="color:white;">Date</label>
<datepicker date-format="d MMMM, yyyy">
<input
浏览 16提问于2018-01-15得票数 0
回答已采纳
我在角度11中使用了一个材料数据选择器(确切的版本见下面)，我在min/max属性上遇到了问题。
my-component.component.html
<form [formGroup]="form">
<mat-form-field>
<mat-label>Date</mat-label>
<input [matDatepicker]="picker"
[max]="maxDate"
[min]="mi
浏览 2提问于2021-02-14得票数 0
回答已采纳
我需要在今天的日期之后5天内为我的一个数据机输入设定最小日期。我已经为jQueryUI设置了AngularJS数据报警器指令，它本身工作得很好。当我试图将任何属性添加到单个数据报警器的输入(如'min‘(Date) )时，它似乎不符合该属性，并显示了所有日期。
对不起，我没有弹琴，也没有活塞。
编辑:更新以显示解决方案
index.html
<input id="requestDate" type="text" ng-model="requestDate" ss-datepicker min-date="5"/>
浏览 2提问于2013-12-09得票数 2
回答已采纳
html： <mat-form-field>
<input matInput [matDatepicker]="picker1" placeholder="From date: mm/dd/yyyy" name="from_date"
[(ngModel)]="callListRequestOb.from_date" maxlength="150">
<
浏览 6提问于2021-02-08得票数 0
回答已采纳
我使用了Kendo角度DatePicker的基本用法示例。
但是，当单击DatePicker时，如果有滚动条，则会将其滚动到一个不同的位置来打开DatePicker。
Html：
<kendo-datepicker ></kendo-datepicker>
package.json看起来像：
"@progress/kendo-angular-dateinputs": "^2.2.0",
"@progress/kendo-angular-intl": "^1.4.0",
"@progress/kend
浏览 1提问于2018-04-16得票数 1
回答已采纳
1回答
我正在尝试在Angular 2中实现一个Datepicker。但是由于这个库没有加载，我得到了模板解析错误'material-datepicker‘不是一个已知的元素：
我的System.config.js如下所示。
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@
浏览 2提问于2016-11-13得票数 0
我遇到的问题是，当在Kendo Grid单元格中实现时，日期选择器仍然使用英文的“今天”和“切换”文本的默认消息，而所有其他文本(月份和天)似乎都被正确翻译，并导入了IntlModule并提供了LOCALE_ID。这是我的html：
<kendo-grid-column field="endDate"
title="{{ 'time.finalDate' | translate: { min: 'no' } }}"
filter="date"
editor=&#
浏览 25提问于2020-04-07得票数 0
bsConfig的ngx-bootstrap withTimepicker: true选项似乎不起作用。我创建了一个新的angular 11项目，然后添加了bootstrap 5和ngx-bootstrap 7.1.0。我直接从文档示例中复制/粘贴了代码。Datepicker工作正常，时间选择器未按预期显示。到底怎么回事？
浏览 26提问于2021-10-19得票数 0
我有一个问题：angular / material / datepicker。
我有一个虚拟项目，它可以正确地处理以下文件：
/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimat
浏览 1提问于2018-08-05得票数 1
2回答
带角鼠标的引导日期选择器问题
、、、、
我正在使用引导日期选择器&角。
我有一个下拉菜单/表格上的鼠标悬停。下拉菜单包含引导日期选择器。问题是当用户悬停在日期选择器日历上时，基础菜单就消失了。
所需的行为是继续显示日历和基础菜单，直到用户将鼠标移出这两个对象为止。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formMenu = false;
$('#dateInput').datepicker({
forma
浏览 2提问于2016-08-02得票数 0
回答已采纳
1回答
我只想选择日期，但它也要求我选择时间。
我用了以下代码，
view.tpl.html
<div class='input-group date' id='datePicker'>
<input type='text' id="date" class="form-control"
ng-model="model.date" date-picker required />
<span class="input-group-add
浏览 3提问于2016-04-16得票数 0
回答已采纳
我有一个Angular.js应用程序，它使用一些日历输入来选择日期范围。日历输入使用jQuery UI数据报警器。我非常清楚在一个有角度的应用程序中使用jQuery模块可能产生的危险，并恳请我们避免在这个线程中开始讨论。
关于角度和jQuery的UI兼容性，我有几个功能和扩展，使数据报警器很好地工作在角形应用程序。
自定义数据报童指令
更新控制器作用域的angular.element(el).triggerHandler('input')方法(否则只有UI更改--即使监视范围，如果从jQuery UI事件触发它也不会被消化)
我遇到的问题是，除了IE 11之外，
浏览 2提问于2016-01-06得票数 1
回答已采纳
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {routing} from './app.routing';
import { InMemo
浏览 3提问于2016-10-28得票数 0
2回答
我在我的应用程序中使用。奇怪的事情正在发生，可能是个虫子。如果datepicker元素中有子元素，则日期选择器将不起作用(未显示)。
在下面的示例中，如果我将span (或任何其他)标记放置在a标记中--在这里我已经放置了数据报警器--它将无法工作，但是如果其中没有子元素，它就会像预期的那样工作。
这是窃听器还是我漏掉了什么？
编辑：
var app = angular.module('app', ['ui.bootstrap']);
app.controller("TestController", function($scope) {
$
浏览 1提问于2014-12-10得票数 2
2回答
当我在我的项目中启动"ng build“时，出现了以下错误：
ERROR in ../../node_modules/@auth0/angular-jwt/index.d.ts(1,47): error TS2307: Cannot find module '@angular/core'. ../../node_modules/@auth0/angular-jwt/src/jwt.interceptor.d.ts(1,70): error TS2307: Cannot find module '@angular/common/http'. ../../n
浏览 2提问于2019-02-28得票数 0
3回答
我有以下用于jQuery日期选择器的代码
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
它以Bootstrap模式启动。除了maxD
浏览 2提问于2016-10-18得票数 2
我正在尝试让jquery在我正在构建的应用程序中工作。我有一个角的cli应用程序。我在npm中添加了，在npm中添加了jquery。
package.json依赖项如下所示：
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": &#
浏览 0提问于2019-01-16得票数 2
1回答
我使用了，但是它的样式不是在网页中呈现。
我尝试将样式添加到styles.less中
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
并将MatNativeDateModule、MatFormFieldModule、MatInputModule导入到app.module.ts中。
import { MatNativeDateModule, MatFormFieldModule, MatInputModule } from "@angular/material";
和
npm i @ang
浏览 20提问于2022-10-13得票数 0
回答已采纳
3回答
我尝试更改我的datepicker的布局。我正在为datepicker使用angular-ui引导
我使用这个标记<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="model" is-open="opened" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close
浏览 0提问于2014-04-10得票数 1
1回答
有人能帮我吗？
之前的代码：
return $(window).scroll(function() {
angular.element(":focus").blur();
return angular.element("div.datepicker.datepicker-dropdown.dropdown-menu").hide();
});
我写的代码：
$(startDateEl).on('click', function(){
$("div.datepicker.datepicker-dropdown.dropdown-
浏览 2提问于2017-11-15得票数 0
这是一个角形2最终版本的应用程序与Visual 2015。gulp用于从节点模块生成库。
我的应用程序在chrome和Edge中运行良好，但在Firefox和IE中不工作
*
火狐错误：
*
Error: (SystemJS) missing = in const declaration
@http://localhost:50135/scripts/app.module.js:13:25
@http://localhost:50135/scripts/app.module.js:1:31
@http://localhost:50135/sc
浏览 7提问于2016-09-29得票数 1
回答已采纳
2回答
我已经做了很长一段时间了，我不知道该怎么做。
我在我的应用程序中使用Jade作为我的模板，并且尝试使用UI引导日期选择器。在UI引导程序0.10.x中，一切都正常工作，但在0.13.3中，我无法使数据报警器上的is-open属性正常工作。以下是玉石模板摘录：
input(type="text", ng-model="item.exp_date", datepicker-popup="{{datepicker.format}}", min-date="{{datepicker.minDate}}", is-open="{{d
浏览 2提问于2015-09-03得票数 1
回答已采纳
当我试图运行我的角应用程序时，我得到了这个错误：
./node_modules/saturn-datepicker/fesm2015/saturn-datepicker.js @ saturn-datepicker.js:1765
__webpack_require__ @ bootstrap:79 ./src/app/app.module.ts @ app.component.ts:8
__webpack_require__ @ bootstrap:79 ./src/main.ts @ environment.ts:16
__webpack_require__ @ bootstr
浏览 1提问于2020-03-01得票数 0
我正在尝试将angular js datepicker注入到我的项目中。我是根据文档完成的。但是在可见的日期选择器中没有任何内容。我已经创建了一个plnkr
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base h
浏览 30提问于2016-09-26得票数 0
3回答
我在运行角度应用程序时出错。
、、、、
我已经在我的角度应用程序中安装了ngx引导程序来使用日期选择器
现在我在运行角应用程序时出错了
我把错误的细节写在下面
多../node_modules/bootstrap/dist/css/bootstrap.min.css ../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css ./src/../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css.src中的错误
未找到模块:错误:无法解决多个'/Users/user/Projects/node_modules
浏览 3提问于2018-09-07得票数 2
回答已采纳
我想用自定义指令在angular中创建一个切换(显示/隐藏)另一个组件的组件。我的指令是appDatepicker，我想把这个指令放到任何输入上，然后在点击输入时自动显示datepicker组件。所以我创建了一个指令，组件和medule，可以像下面这样导出。 datepicker.directive.ts import { Directive, ElementRef, HostListener, Inject } from '@angular/core';
import { DatepickerComponent } from './datepicker.compon
浏览 51提问于2021-06-23得票数 1
我正在尝试用angular 2和javascript创建一个应用程序。我想要有日期输入，我读到并不是所有的浏览器都支持HTML5输入类型" date“。我搜索angular 2的日期选择器，我找到了很多支持打字的日期选择器，比如( )。我的问题是，是否有任何支持javascript的angular 2的datepicker，或者是否有一种方法可以在javascript中导入typescipt日期选择器？
浏览 0提问于2016-05-30得票数 2
回答已采纳
1回答
我正在尝试向页面添加一个角度材质日期选择器。我一直在这样跟踪official doc's example，但我的页面上什么也没有显示。 在app.component.html中有： <section>
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" />
<mat-datepicker
浏览 20提问于2020-07-07得票数 0
在我看来奇怪的是，我在不应该做的事情上遇到了依赖冲突。让我们以angular和angular-datepicker为例。
当我在angular-datepicker上添加一个依赖项时，我得到了另一个angular版本的冲突。
在npm中，解析的依赖项在运行时使用。因此，如果angular-datepicker要在npm中运行，它将在运行时使用自己的angular版本。这是有道理的。
然而，在bower中情况并非如此，因为运行时版本是共享的，并且angular -datepicker的angular版本仅用于开发，而不用于运行时。
我添加的库越多，就越难“满足”所有的库。
在我看来，所有的库都应
浏览 0提问于2015-10-13得票数 0
2回答
我一直在努力学习如何使用角13数据报警器，我不知道什么是不正常的工作。
这是我的主要模块。
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFiel
浏览 7提问于2022-06-29得票数 0
1回答
我是新的天使在这里，我创造了一些样本的日期选择，这是很好的工作。我想为这个示例创建一个指令。我试过它的工作，但在选择日期后，它的显示格式没有定义.对于这个样本，我需要一个指令。有人帮我做这件事..。谢谢
var app = angular.module('myapp', ['ng-bootstrap-datepicker']);
app.controller('AppCtrl', function ($scope) {
$scope.datepickerOptions = {
format: '
浏览 1提问于2015-12-30得票数 4
回答已采纳
我正在尝试在mat-datepicker (angular 5)中预先选择一些日期这里的问题是我不能使用dateClass指令，因为它是angular 7的一个特性 <mat-form-field>
<input matInput [min]="dispoStartDate" [max]="dispoEndDate" [matDatepicker]="picker" >
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datep
浏览 14提问于2019-05-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
