Bootstrap 特定日期格式
Bootstrap 特定日期格式
一个HTML CSS框架可以称为Bootstrap。使用此功能，用户可以做出更负责任的设计。有时我们的项目需要选择日期选择。默认情况下，日期的内部值保留为今天。当日历通过datepicker打开时，而不是像今天那样打开日历时，它将打开到defaultViewDate。 Bootstrap datepicker以Twitter Bootstrap样式提供了一个灵活的datepicker小部件。
如果我们想启用输入字段来输入日期，datepicker将非常有用。使用此功能，我们可以轻松选择日期，并且它对用户友好。我们可以从"日期选择器"对话框中选择日期，而不是在输入字段中手动输入日期。 bootstrap的datepicker插件使用jQuery，这有助于以输入元素的形式添加Datepciker。 Bootstrap datepicker提供了一种即时解决方案，可以在网站的表单字段中添加datepicker弹出窗口以选择日期。
在我们的程序中，如果我们要求日期选择器使用其日期格式，例如dd/mm/yyyy，yyyy-mm-dd，dd/mm/yyyy，dd-mm-yyyy等，这对我们来说非常容易这。为了设置日期格式，我们只需要添加一个参数的格式，然后我们将添加所需的格式，如以下示例所示:
示例1:
在此示例中，我们将使用dd-mm-yyyy格式。
<html lang="en">
<head>
<title>Bootstrap Datepicker with required format of date Example 1</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<input class="date form-control" style="width: 250px;" type="text">
<script type="text/javascript">
$('.date').datepicker({
format: 'dd-mm-yyyy'
});
</script>
</body>
</html>
示例2:
在此示例中，我们将使用dd/mm/yyyy格式。
<html lang="en">
<head>
<title> Bootstrap Datepicker with required format of date Example 2 </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>
</head>
<body>
<input class="date form-control" style="width: 250px;" type="text">
<script type="text/javascript">
$('.date').datepicker({
format: 'dd/mm/yyyy'
});
</script>
</body>
</html>
示例3:
在此示例中，我们将使用mm-dd-yyyy格式。
<html lang="en">
<head>
<title> Bootstrap Datepicker with required format of date Example 3 </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>
</head>
<body>
<input class="date form-control" style="width: 250px;" type="text">
<script type="text/javascript">
$('.date').datepicker({
format: 'mm-dd-yyyy'
});
</script>
</body>
</html>
