This plugin can be useful to show and manage business working days & hours.
var businessHoursManager = $("#businessHoursContainer").businessHours();
$("#btnSerialize").click(function() {
// use: businessHoursManager.serialize() to get serialized business hours in JSON
$("textarea#businessHoursOutput").val(JSON.stringify(businessHoursManager.serialize()));
});
$("#businessHoursWidget").businessHours({
operationTime: /* array of JSON objects */
});
$("#businessHoursContainer2").businessHours({
inputDisabled: true,
checkedColorClass: 'workingBusinssDay',
uncheckedColorClass: 'dayOff',
dayTmpl: '' +
'' +
''
});
Ok, let's try to do more attractive widget by using font-awesome icons, bootstrap stylesheets and jquery timepicker plugin.
// don't forget to include required libs & styles
// http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
// http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
// http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css
// libs/jquery-timepicker/jquery.timepicker.min.js
// libs/jquery-timepicker/jquery.timepicker.css
$("#businessHoursContainer3").businessHours({
postInit:function(){
$('.operationTimeFrom, .operationTimeTill').timepicker({
'timeFormat': 'H:i',
'step': 15
});
},
dayTmpl:'' +
'' +
'' +
'' +
'' +
'' +
''
});