This project is read-only.
First add DLL to your projects.

Second Copy Downloaded version of ZebraDatePicker from Official Webiste
http://stefangabos.ro/jquery/zebra-datepicker/#download

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:
https://zebradatepickerdotnet.codeplex.com/releases/view/108354

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 asp.net and set SkinId for your datepicker like other controls for default configurations.

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

Comments

omdireza Apr 14, 2016 at 4: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?