0

i make custom mvc control with two kendo datepicker to display (gregi and hijri) date in partial view and if i change date of any one it's change the other to equivalent date

cause to kendo limitation to deal with Hijri calender i make some modification to display correct date i use culture and set max date to hijri to 29/12/1600

every thing is ok if i set value(DateTime.Now) to hijri calender

but i want it display null and user select value but if i remove value and when user open calender the year show is 1600 i want to display 1435 and keep value null

her is my code

Controller
    public class UserControl_GHDate
    {
        public DateTime? GregiDate { get; set; }
        [Column(TypeName = "DateTime2")]
        public DateTime? HijriDate
        {
            get
            {
                if (GregiDate==null)
                {
                    return null;//DateTime.Now; 
                }
                else
                {
                    return GregiDate;
                }


            }
            set {  }
        }

    }

Razor

@model  MVC_ERP.Models.UserControl_GHDate

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.ar-SA.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-US.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/cultures/kendo.culture.ar-SA.min.js")"></script>

   @Html.Kendo().DatePickerFor(model => model.GregiDate).Format("dd/MM/yyyy").Culture("en-US").HtmlAttributes(new { @class = "kendo", style = "width:49%; max-width:280px" }).Events(e => e.Change("GregiChange"))
   @Html.Kendo().DatePickerFor(model => model.HijriDate).Value(DateTime.Now).Footer(false).Max("12/29/1600").Culture("ar-SA").Min(new DateTime(1300, 1, 1)).Format("dd/MM/yyyy").HtmlAttributes(new { @class = "kendo", style = "width:49%; max-width:280px" }).Events(e => e.Change("HijriChange"))

<script>

    kendo.cultures["ar-SA"].calendars.standard.firstDay =5;
    //kendo.cultures["ar-SA"].calendars.standard.months.namesAbbr[0] = "bbb"; //change name of month
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[0] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[1] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[2] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[3] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[4] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[5] = "";
    kendo.cultures["ar-SA"].calendars.standard.days.namesShort[6] = "";





    function GregiChange(e) {
        //alert(this.Name())
        var GregId = this.element.prop("id");
        var arr = GregId.split('_');
        var HijId = arr[0] + '_HijriDate';

        if ($('#' + GregId).data('kendoDatePicker').value() == null)
        {
            $('#' + HijId).data('kendoDatePicker').value(null)
            return
        }
        var d = new Date($('#' + GregId).data('kendoDatePicker').value())

        //d.setMonth(d.getMonth() + 1);

        var j = d.toLocaleDateString("en-US")

        //var z = Globalize.cultures["ar-SA"].calendars.standard.convert.toGregorian("1434", "02", "11");
        var z = Globalize.cultures["ar-SA"].calendars.standard.convert.fromGregorian(d);


        var y = z.toString()
        var arrD = y.split(',');

        var year = arrD[0]
        var month =(arrD[1]==0?1:(eval(arrD[1])+1))
        var day = arrD[2]




        var dat = day + '/' + month + '/' + year


        $('#' + HijId).data('kendoDatePicker').value(dat)


    }

    function HijriChange() {

        var HijId  = this.element.prop("id");
        var arr = HijId.split('_');
        var GregId = arr[0] + '_GregiDate';

        if ($('#' + HijId).data('kendoDatePicker').value() == null) {
            $('#' + GregId).data('kendoDatePicker').value(null)
            return
        }

        var d = new Date($('#' + HijId).data('kendoDatePicker').value())

        var HD = d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear();
        HDMY= d.getDate() + '/' + (d.getMonth()+1)
        if (d.getDate() == 31 || HDMY == '30/12' || HDMY == '30/10' || HDMY == '30/8' || HDMY == '30/6' || HDMY == '30/4' || HDMY == '30/2')
        {
            alert(HD + ' not valid hijri date')
            return;
        }


        var z = Globalize.cultures["ar-SA"].calendars.standard.convert.toGregorian(d.getFullYear(), (d.getMonth() + 1), d.getDate());

        var u = new Date(z)

        var year = u.getFullYear();
        var month = (u.getMonth() == 0 ? 12 : u.getMonth());
        var day = u.getDate()+1;

        var dat = day+ '/' + month+ '/' + year;

        $('#' + GregId).data('kendoDatePicker').value(dat)
    }


    $(".k-datepicker input").val('');
</script>

Thanks

Jayesh Goyani
  • 11,008
  • 11
  • 30
  • 50
Mohamed
  • 13
  • 4

1 Answers1

0

I think kendo date picker has a min value option try specify the min value with a year of 1435

mhars
  • 148
  • 6
  • i'm already set min=1300 and max=1600 then problem that the default view appear 1600 i want it current year (1435=2014) – Mohamed Oct 23 '14 at 13:54
  • Oh sorry I cannot help you with that but I'll try to review telerik api and get back to you – mhars Oct 23 '14 at 14:01