I have used Jquery datepicker. But i need to change the date format from dd-mm-yy to yy-mm-dd . (Also date highlight function used)
var dates = ['03-03-2017', '03-10-2017', '03-25-2017']; $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy', //defaultDate: new Date('03/10/2017'), // this line is for testing beforeShowDay: highlightDays }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight']; } } return [true, '']; }
td.highlight>a { background: #E50104!important; color: #fff!important; pointer-events: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #000; }
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <p>Date: <input type="text" id="datepicker"></p>
It is simple. Just change dateFormat: 'dd-mm-yy',
to dateFormat: 'yy-mm-dd'
,
var dates = ['03-03-2017', '03-10-2017', '03-25-2017']; $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', //defaultDate: new Date('03/10/2017'), // this line is for testing beforeShowDay: highlightDays }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight']; } } return [true, '']; }
td.highlight > a { background: #E50104!important; color: #fff!important; pointer-events: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #000; }
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <p>Date: <input type="text" id="datepicker"></p>
The Answer is:
var dates = ["03-03-2017', '03-10-2017', '03-25-2017"]
$('#datepicker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
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.