logo图片
Bootstrap教程

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>

昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4