Bootstrap-Persian-DateTimePicker isn't displayed in the right format and can't select fromdate and todate in the datepicker RRS feed

  • Question

  • User-997500692 posted

    Hi. Hi. I'm using Persian DateTime picker using this link  https://www.codeproject.com/Articles/858123/Bootstrap-Persian-DateTimePicker?msg=5740640#xx5740640xx  in my razor view (asp.net core 3.1). I have written some code like the following in my razor view:

    <head> <link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <link href="~/contents/Index.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="~/css/MdBootstrapPersianDateTimePicker/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="~/css/MdBootstrapPersianDateTimePicker/bootstrap-theme.min.css" type="text/css" /> <link rel="stylesheet" href="~/css/MdBootstrapPersianDateTimePicker/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" type="text/css" /> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/jquery/dist/jquery-ui.js"></script> <script type="text/javascript" src="~/js/MdBootstrapPersianDateTimePicker/bootstrap.min.js"></script> </head> <div class=" col-5 text-left px-0 "> <form class="border-0"> <input id="textbox" type="text" value="1399/05/04" /> </form> </div> <script language="JavaScript" type="text/javascript" src="~/js/MdBootstrapPersianDateTimePicker/MdBootstrapPersianDateTimePicker/calendar.js"></script> <script language="JavaScript" type="text/javascript" src="~/js/MdBootstrapPersianDateTimePicker/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script> <script> jQuery(document).ready(function ($) { $('#textbox').MdPersianDateTimePicker({ Placement: 'bottom', // default is 'bottom' Trigger: 'click', // default is 'focus', EnableTimePicker: false, // default is true, TargetSelector: '', // default is empty, GroupId: '', // default is empty, FromDate: true, // default is false, ToDate: true // default is false, // options here }); }); </script>

    first of all my problem is that the datepicker icon is not near the input text and I just have to click on the textbox to see the datepicker. Second, the datepicker is not in the correct format like its inside button is not in its correct place and so on ... . Third I want the user have the ability to specify start date and end date at the same time on the datepicker but I don't know how can I do it. I apprciate if anyone helps me regarding the mentioned issues.

    Monday, August 3, 2020 3:03 PM

All replies