Hello! Today, I am going to explain how to Custom DatePicker Style
in ASP.Net. I know there are various third party controls, in which you can get ready-made DTP
Controls easily. But here, we will see how we can develop our own DTP Control using ASP.Net.
This is a simple date picker control that comes as an ASP.NET
custom control. The user can either enter a date into a textbox or click on an icon that opens a pop-up calendar. JavaScript is used to display the pop-up calendar. The control can easily be integrated into your own ASP.NET websites by simply referencing the Assembly and drag’n’drop the control from the toolbox onto your web form.
So, let’s start the coding steps. Right!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.CalenderTheme .ajax__calendar_container { background-color: #ffffff; border: solid 1px #77D5F7; width: 180px; } .CalenderTheme .ajax__calendar_header { background-color: #ffffff; margin-bottom: 4px; } .CalenderTheme .ajax__calendar_body { background-color: #ffffff; border-top: solid 1px #77D5F7; border-bottom: solid 1px #77D5F7; width: 178px; margin: -4px; } .CalenderTheme .ajax__calendar_dayname { text-align: center; font-weight: bold; margin-bottom: 4px; margin-top: 2px; } .CalenderTheme .ajax__calendar_day { text-align: center; } .CalenderTheme .ajax__calendar_hover .ajax__calendar_day, .CalenderTheme .ajax__calendar_hover .ajax__calendar_month, .CalenderTheme .ajax__calendar_hover .ajax__calendar_year, .CalenderTheme .ajax__calendar_active { font-weight: bold; background-color: #DEF1F4; } .CalenderTheme .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years { top: 0px; left: 0px; height: 140px; width: 180px; position: absolute; text-align: center; margin: auto; } .CalenderTheme .ajax__calendar_container TABLE { padding: 0px; margin: 0px; font-size: 11px; width: 160px; } .CalenderTheme .ajax__calendar_today { font-weight: bold; color: green; } .CalenderTheme .ajax__calendar_other, .CalenderTheme .ajax__calendar_hover .ajax__calendar_today, .CalenderTheme .ajax__calendar_hover .ajax__calendar_title { color: #bbbbbb; } .CalenderTheme .ajax__calendar_footer { height: 22px; } .CalenderTheme .ajax__calendar_hover .ajax__calendar_day, .CalenderTheme .ajax__calendar_hover .ajax__calendar_month, .CalenderTheme .ajax__calendar_hover .ajax__calendar_year, .CalenderTheme .ajax__calendar_active { font-weight: bold; background-color: #00FF30; } |
Leave a Comment