1 .ui-datepicker-trigger{ 2     background-position-x:-32px; 3     background-position-y:-176px; 4     height:30px;width:34px; 5     cursor:pointer;    6 } 7  8  9 .form-control {10   width: 100%;11   height: 34px;12   padding: 6px 12px;13   font-size: 14px;14   line-height: 1.42857143;15   color: #555;16   background-color: #fff;17   background-image: none;18   border: 1px solid #ccc;19   border-radius: 4px;20   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);21           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);22   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;23        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;24           transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;25 }26 27      .k-datepicker {28         width: 100%;29     }30 31     .ui-datepicker .ui-datepicker-title select {32         font-size: 12px;33     }34 35     .ui-datepicker table {36         font-size: 12px;37     }38 39     .form-control {40         display: inline-block;41         width: 100%;42     }43 44     .ui-datepicker-trigger {45         background-position-x: -32px;46         background-position-y: -176px;47         height: 30px;48         width: 34px;49         cursor: pointer;50     }51  52 53     /* css for timepicker */54 .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }55 .ui-timepicker-div dl { text-align: left; }56 .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }57 .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }58 .ui-timepicker-div td { font-size: 90%; }59 .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }60 61 .ui-timepicker-rtl{ direction: rtl; }62 .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }63 .ui-timepicker-rtl dl dt{ float: right; clear: right; }64 .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }

 1 $(‘#EffectiveStartTime‘).datepicker( 2                { 3                    changeMonth: true, 4                    changeYear: true, 5                    showOn: ‘button‘, 6                    dateFormat: DefaultValues.ShortDateFormat, 7                    buttonImage: ‘@Url.Content("~/Content/img/calendar.png")‘, 8                            buttonImageOnly: true, 9                            buttonText: ‘Select date‘,10                            duration: ‘Slow‘,11                            showOtherMonths: true,12                            selectOtherMonths: true13                        })14                 $(‘#EffectiveEndTime‘).datepicker(15                    {16                        changeMonth: true,17                        changeYear: true,18                        showOn: ‘button‘,19                        dateFormat: DefaultValues.ShortDateFormat,                       20                        buttonImage: ‘@Url.Content("~/Content/img/calendar.png")‘,21                        buttonImageOnly: true,22                        buttonText: ‘Select date‘,23                        duration: ‘Slow‘,24                        showOtherMonths: true,25                        selectOtherMonths: true26                    })