1. scenario demonstrates
Use boostrap time plug-ins can achieve this effect
2. Specific operation
The first step: introducing corresponding js and css
<link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="bootstrap/bootstrap-datetimepicker.min.css" /> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-datetimepicker.min.js"></script>
Not One Less
Step two: input tag
<-! Id or class will do, and be consistent js -> <the INPUT class = "form_datetime" name = "C201" Readonly>
The third step: Initial Setup
$ (function () {
// Chinese set
$ .fn.datetimepicker.dates [ 'zh-CN'] = {
Days: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Zhou day "],
daysMin: [" day "," one "," two "," three "," four "," five "," six "," date "],
months: [" Jan "," two month "," March "," April "," May "," June "," July "," August "," September ",
" October "," November "," December "],
monthsShort: [ "January", "February", "March", "April", "May", "June", "July", "August",
"September", "ten month "," November "," December "],
today:" today "
suffix: [],
meridiem: [" morning "," afternoon "]
};
// initialization, set specific properties
$ ( ".form_datetime"). datetimepicker ({meridiem: [ "Morning", "Afternoon"] }; // Initialize specific properties $ ( "form_datetime.") datetimepicker ({.meridiem: [ "Morning", "Afternoon"] }; // Initialize specific properties $ ( "form_datetime.") datetimepicker ({.
format: 'yyyy-mm-dd ', // Date Format
startView: (date when selected, pop up page) 'month', // initialize the view
maxView: 'decade', // maximum view: Ten years
minView: 'month', // minimal view: May
autoclose: true, // selection, automatically close
pickerPosition: "bottom-left", // set the date selector positions
language: 'zh-CN', // language
todayBtn: true, // day display button
});
// add a default time
//$('.form_datetime').datetimepicker('setDate ', new new a Date ());
});
Written in the last
Which big brother If it is found there is leakage of the carelessness of the article or need to add more content, welcome message! ! !
related suggestion: