gpt4 book ai didi

javascript - 如何使用 Angular js在文本框上显示日期日历?

转载 作者:行者123 更新时间:2023-11-28 05:38:23 24 4
gpt4 key购买 nike

我正在使用angurla js,bootstrap进行网络开发。我想在文本框上显示日期选择器。

我在这里找到了解决方案https://angular-ui.github.io/ui-date/但看起来需要包含 jquery、jquery ui,这对于仅用于日期选择器的应用程序来说是不必要的开销。

Angular 中是否有可用于日期选择器的内置功能?

下面是我的笨蛋 https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview在出生日期字段中,我想添加日期选择器。

<!DOCTYPE html>
<html lang="en" ng-app="autoQuote">

<head>

<!-- start: Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- end: Meta -->
<link rel="shortcut icon" href="<?php echo base_url(); ?>assets/themes/default/img/favicon.ico">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-resource.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="autoQuoteCtrl.js"></script>
<script src="dtoResource.js"></script>
<script src="questionResource.js"></script>
<script src="controlDirectives.js"></script>
<script src="postDtoFactory.js"></script>
<script src="custom-required.validator.js"></script>
</head>

<body>
<div class="col-md-2"></div>
<div class="container-fluid col-md-8">
<div class="row" ng-if='questions'>
<div class="col-md-12 text-center">
<div class="page-header">
<h1>
User Form</small>
</h1>
</div>
<div ng-controller="autoQuoteCtrl">
<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit()" novalidate>
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="dob">Date of Birth</label>
<div class="col-sm-6">
<input type="text" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.dob.$error.required">This field is required.</span>
</div>

<div class="col-sm-5"></div>
<div class="col-sm-6">
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
<input type="button" class="btn btn-info" name="formclone" value="+ Add More Cars" ng-click="appendClonedDiv()" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</body>

</html>

最佳答案

您可以使用日期 <input type="date" id="dob" class="form-control" name="dob" ng-model="answers.dob" required> 作为输入类型

plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=预览

关于javascript - 如何使用 Angular js在文本框上显示日期日历?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39159761/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com