First add DLL to your projects.

Second Copy Downloaded version of ZebraDatePicker from Official Webiste

and copy to your website

if you need modified version of ZebraDatePicker that include calendar other that default javascript calendar like Persian (Fa-IR) you need these script other that official website release:

Now you must register user control to your page:
<%@ Register Assembly="ZebraDatePickerDotNet" TagPrefix="CF" Namespace="ZebraDatePickerDotNet" %>

also you need to include refrence to js and css file of ZebraDatePicker
<script type="text/javascript" src="/zdatepicker/javascript/zebra_datepicker_cal.js"></script>
<link rel="stylesheet" href="/zdatepicker/css/default.css" />

if you use other calendar like sample calendar you need to include it before main date picker js:
<script type="text/javascript" src="/zdatepicker/calendar.js"></script>
<script type="text/javascript" src="/zdatepicker/javascript/zebra_datepicker_cal.js"></script>
<link rel="stylesheet" href="/zdatepicker/css/default.css" />

then just use like other controls in your page:
<CF:ZDatePicker runat="server id="sampleDatePicker" />

using default configuration for date picker:
some times you need to use one configuration for your date picker in your project just create a js file and include it in your project that contain default config like these:
var datepicker_fa_IR = {
    calendar: JalaliDate,
    months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
    days: ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'],
    months_abbr: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
    days_abbr: ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'],
    first_day_of_week: 6,
    weekend_days: [5],
    format: 'Y/m/d',
    lang_clear_date: 'پاک کردن',
    readonly_element: false,
    zero_pad: true
var datepicker_en_US = {
    first_day_of_week: 6,
    weekend_days: [5],
    readonly_element: false,
    zero_pad: true

now you must set default configuration property:
<CF:ZDatePicker DefaultConfiguration="datepicker_fa_IR" runat="server" ID="DERT" />

if you need to override your default config with property of date picker you can set:
<CF:ZDatePicker OverrideDefaultConfig="True" ShowIcon="False" 
                       DefaultConfiguration="datepicker_fa_IR" runat="server" ID="DERT" />

see sample project from source to use:
also you can create Skin in and set SkinId for your datepicker like other controls for default configurations.

Last edited Jun 21, 2013 at 8:46 AM by mahdiit, version 2


omdireza Apr 14, 2016 at 3:54 PM 
i use Zebra Date picker control and follow your instruction, but control properties doesn't work.
for example i set direction for control in page load, but it doesn't work!!!
could you help me?