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>

Bootstrap 模式

Bootstrap 示例