Forums | CSS file for datetime picker

Navin

CSS file for datetime picker

January 2, 2012 04:45 AM

Hi,

I am using the datetime picker in one of my pages. However, i am not sure how to get the css file that has been used in one of your samples (jquery-ui-1.7.1.custom.css)

Please advice.

Thanks,
Navin

Reply

Navin

CSS file for datetime picker

January 3, 2012 04:42 AM

Hi,

could you please respond to my query?

Thanks,
Navin

Reply

Meena
[Syncfusion]

CSS file for datetime picker

January 3, 2012 04:57 AM

Hi Navin,

Thanks for using Syncfusion products.

Kindly refer the below location to get the “jquery-ui-1.7.1.custom.css” css file.

{$ system drive }\Program Files\Syncfusion\EssentialStudio\9.4.0.62\Web\Tools.Web\Samples\3.5\Content\Themes\uidarkness

Please let us know of you have any other concerns.

Regards,
Meena

Reply

Navin

CSS file for datetime picker

January 3, 2012 08:25 AM

Hi,

Thanks for the reply. However, i still do not see any changes in the calendar.

I included the css file in a Folder called ../CSS and images in another folder ../images/dtPickerImages. Below is the code, exactly as the sample:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<p>This demo illustrates the jQueryUIDatePicker with multimonth display.<asp:ScriptManager
ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</p>
<div>
<syncfusion:jQueryUIDatePicker ID="JQUiDatePicker" runat="server" StepMonths="1"
Inline="false" BorderStyle="Solid"/>
</div>
<br />

</form>
</body>

Reply

Meena
[Syncfusion]

CSS file for datetime picker

January 3, 2012 11:53 PM

Hi Navin,

Sorry for the inconvenience.

The reported issue might occur if the image url in custom.css is not given correctly. Please refer the below css code snippet.

 
[jquery-ui-1.7.1 custom.css]

.ui-icon { width: 16px; height: 16px; background-image: url(Styles/images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(Styles/images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(Styles/images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(Styles/images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(Styles/images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(Styles/images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(Styles/images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(Styles/images/ui-icons_cd0a0a_256x240.png); }

Kindly check the details and let us know if it helps.

We have also created a simple sample with Jquery UI DatePicker for your convenience and it can be downloaded from the below link.

DatePicker-1779406434.zip

Please let us know if you have any concerns.

Regards,
Meena

Reply