Datetimepicker does not display default date value
Question
I need to display the default date in all the fields, but when I added the plugins option minDate: new Date() , but the dates in the fields are not displayed, but the value is internally there in the field.
Example:
Code:
$(function(){ $('.date').each(function() { $(this).datetimepicker({ minDate: new Date(), format: 'YYYY-MM-DD', ignoreReadonly: true, useCurrent: false }); }); });
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Example</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> </div> </div> </div> </body> </html>
3 answers
solution1
2 ACCPTED 2017-08-22 16:43:56
Try using the defaultDate property instead.
EDIT: I understand the problem more now, and it turns out some of the properties you were setting were complicating the problem.
It also seems like you're just bypassing the readonly attribute so you could remove that and that would simplify the initialization even further. (And the value="2017-01-01" attributes aren't doing anything except confusing what the inputs actual values are)
$(function(){ $('.date').each(function() { $(this).datetimepicker({ minDate: new Date(), format: 'YYYY-MM-DD', ignoreReadonly: true }); }); });
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Example</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> </div> </div> </div> </body> </html>
solution2
1
$(function(){ $('.date').each(function() { $(this).datetimepicker({ format: 'YYYY-MM-DD', ignoreReadonly: true, useCurrent: false, defaultDate: new Date(), minDate: new Date() }); }); });
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Example</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> </div> </div> </div> </body> </html>
For more detail visit bootstrap-datetimepicker
solution3
1 2017-08-30 15:29:31
It should be added to @Peter's answer that if minDate is set as new Date() after clicking other date and try to select again today's date it won't be possible, you can solve this using:
minDate: moment().startOf('day')
$(function(){ $('.date').each(function() { $(this).datetimepicker({ minDate: moment().startOf('day'), format: 'YYYY-MM-DD', ignoreReadonly: true }); }); });
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Example</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> <div class="form-group"> <input type="text" name="date" class="form-control date" readonly value="2017-01-01" placeholder="Your month"> </div> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap-datetimepicker using maxDate sometimes does not display date
Default setting today date for datetimepicker
Setting the default value of the slider for datetimepicker
DateTimePicker value is not consistent with displayed date
Display Default Date Value HTML Form iOS
How to put a default date in bootstrap datetimepicker
Bootstrap datetimepicker current date and current time by default
Bootstrap 4 datetimepicker - How can I display date format differently between value for sending?
If there is no value display default date - date-picker - ReactJs
AngularJS - my datetimepicker does not display calendar
Related Tags