DatePicker 备用Css

 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; }

CSS Code

 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: true
13                        })
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: true
26                    })

Javascript Code