如何在 laravel 中使用日期选择器?
How to use date picker in laravel?
我正在使用 laravel 5.8 并且我想包含日期选择器。我尝试了很多方法,但没有为我工作。谁能帮我摆脱这个麻烦。
Registration.blade.php
<div class="col-xl-4 col-lg-4 col-12 form-group dates">
<label>Joining Date *</label>
<input type="text" placeholder="dd/mm/yyyy" class="form-control air-datepicker" name="Joining_Date" autocomplete="off" id="usr1">
</div>
Index.blade.php
<head>
<script type="text/javascript" src="{{url('/css/bootstrap-datepicker.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{url('/css/bootstrap-datepicker.css')}}">
<script>
$(function() {
$( "#usr1" ).datepicker({
format: "mm/dd/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
rtl: true,
orientation: "auto"
});
});
</script>
</head>
尝试下面的代码应该可以工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker({
format: "mm/dd/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
orientation: "auto"
});
});
</script>
</div>
</div>
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
</body>
</html>
我正在使用 laravel 5.8 并且我想包含日期选择器。我尝试了很多方法,但没有为我工作。谁能帮我摆脱这个麻烦。
Registration.blade.php
<div class="col-xl-4 col-lg-4 col-12 form-group dates">
<label>Joining Date *</label>
<input type="text" placeholder="dd/mm/yyyy" class="form-control air-datepicker" name="Joining_Date" autocomplete="off" id="usr1">
</div>
Index.blade.php
<head>
<script type="text/javascript" src="{{url('/css/bootstrap-datepicker.js')}}"></script>
<link rel="stylesheet" type="text/css" href="{{url('/css/bootstrap-datepicker.css')}}">
<script>
$(function() {
$( "#usr1" ).datepicker({
format: "mm/dd/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
rtl: true,
orientation: "auto"
});
});
</script>
</head>
尝试下面的代码应该可以工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker({
format: "mm/dd/yy",
weekStart: 0,
calendarWeeks: true,
autoclose: true,
todayHighlight: true,
orientation: "auto"
});
});
</script>
</div>
</div>
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
</body>
</html>