locked
MD.BootstrapPersianDateTimePicker not working RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1548796982 posted

    hi.

    i use from Bootstrap v4.2.1 and jquery-3.3.1

    now i want to use from MD.BootstrapPersianDateTimePicker according to below link:

    https://github.com/Mds92/MD.BootstrapPersianDateTimePicker

    <head>

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />

<link href="/Content/MdBootstrapPersianDateTimePicker/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />

<script src="/Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
   
</head>
<body>

<div class="row">
    <div class="col-md-1">
        @Html.LabelFor(model => model.Event_StartDateTime, new { @class = "control-label" })
    </div>

    <div class="col-md-3">
        @Html.TextBoxFor(model => model.Event_StartDateTime, new { @class = "form-control text-center datetimepicker", lang = "en"  })
    </div>

    <div class="col-md-2">
        @Html.ValidationMessageFor(model => model.Event_StartDateTime)
    </div>
</div>
</body>
</html>


  
    <script src="/Scripts/umd/popper.min.js" type="text/javascript"></script>

    <script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>

    <script src="/Scripts/MdBootstrapPersianDateTimePicker/jquery.md.bootstrap.datetimepicker.js"></script>


<script>
$('#Event_StartDateTime').MdPersianDateTimePicker({
    targetTextSelector: '#Event_StartDateTime',
    selectedDate: new Date('2018/9/30'),
    isGregorian: false
});
    </script>

    when page load, i get his error:

    $(...).MdPersianDateTimePicker is not a function

    on 

    $('#Event_StartDateTime').MdPersianDateTimePicker({
    targetTextSelector: '#Event_StartDateTime',
    selectedDate: new Date('2018/9/30'),
    isGregorian: false
});

    why?

    Friday, July 19, 2019 9:26 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1038772411 posted

    Hello, tadbirgaran

    If you are looking for a jquery plugin Persian DateTimePicker with bootstrap, MdPersianDateTime is that it.
    This plugin use bootstrap popover to show Persian DateTimePicker. so it has flexibility of bootstrap's popover.

    Please use below link for sample code you will get exectly as you want.

    https://www.codeproject.com/Articles/858123/Bootstrap-Persian-DateTimePicker

    Thanks.

    Friday, July 19, 2019 10:03 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1548796982 posted

    In this link, a version related to bootstrap<4 and jquery<3 is provided.

    Friday, July 19, 2019 1:12 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi tadbirgaran,

     

    tadbirgaran

    $(...).MdPersianDateTimePicker is not a function

    This error message indicates that there is some problems with your reference file.

    According to this link  https://www.codeproject.com/Articles/858123/Bootstrap-Persian-DateTimePicker which provided by @AddWeb,you can download two files in this artical.

    You can found there is a PersianDateTimePickerDemo.html file in bootstrap_persian_datetimepicker_1.3 folder, you can run this page and refer to how these files are referenced in it.

    You can refer like this as follow:

    <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />

    <link href="~/Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" rel="stylesheet" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/bootstrap.min.js" type="text/javascript"></script>

</head>
<body>
   ....
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
        $('#Event_StartDateTime').MdPersianDateTimePicker({
            targetTextSelector: '#Event_StartDateTime',
            selectedDate: new Date('2018/9/30'),
            isGregorian: false
        });
    </script>
</body>
</html>

    Best Regards,

    YongQing.

    Monday, July 22, 2019 3:01 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1548796982 posted

    Hi tadbirgaran,

     

    tadbirgaran

    $(...).MdPersianDateTimePicker is not a function

    This error message indicates that there is some problems with your reference file.

    According to this link  https://www.codeproject.com/Articles/858123/Bootstrap-Persian-DateTimePicker which provided by @AddWeb,you can download two files in this artical.

    You can found there is a PersianDateTimePickerDemo.html file in bootstrap_persian_datetimepicker_1.3 folder, you can run this page and refer to how these files are referenced in it.

    You can refer like this as follow:

    <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" />

    <link href="~/Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" rel="stylesheet" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/bootstrap.min.js" type="text/javascript"></script>

</head>
<body>
   ....
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
        $('#Event_StartDateTime').MdPersianDateTimePicker({
            targetTextSelector: '#Event_StartDateTime',
            selectedDate: new Date('2018/9/30'),
            isGregorian: false
        });
    </script>
</body>
</html>

    Best Regards,

    YongQing.

    i use bootstrap 4 and jquery 3.3.1

    Unfortunately, it was not resolved.
    You must solve this problem with css selector

    Wednesday, July 24, 2019 7:07 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi tadbirgaran,

    tadbirgaran

    i use bootstrap 4 and jquery 3.3.1

    For this issue , I have answered in https://forums.asp.net/post/6272109.aspx which is  your another post , I suggest you close this post and discuss it in another post.

    Best Regards,

    YongQing.

    Wednesday, July 24, 2019 9:21 AM