Remove From My Forums

initialize MdPersianDateTimePicker using class name

Question
0

Sign in to vote
User-1548796982 posted

Hello.

I use MdPersianDateTimePicker for the .NET MCV .
I have a 100 field in the program as a date fields. Is there a way that does not require any of the fields to write the following command?

@Html.TextBoxFor(model => model.StartDateTime, new { @class = "form-control text-center datetimepicker", lang = "en" })

$('#StartDateTime').MdPersianDateTimePicker({ targetTextSelector: '#StartDateTime', dateFormat: 'yyyy-MM-dd', isGregorian: false, enableTimePicker: true });

I want to use $('.datetimepicker').MdPersianDateTimePicker but I do not know how to get the name of the text box for targetTextSelector
Tuesday, July 23, 2019 8:29 AM

Answers

User665608656 posted

Hi tadbirgaran,

i use bootstrap4 and jquery 3.3.1

If you use bootstrap4 to achieve your needs, you should get all input tags first which class is 'datepicker'.

Then loop each input tag to bind MdPersianDateTimePicker, in each loop, you should get current input id and assign this value to targetTextSelector.

For more details, you could refer to the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <link href="../dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
    <script src="../dist/jquery.md.bootstrap.datetimepicker.js"></script> 
    <script type="text/javascript">
$(function(){
    $(".datepicker").each(function(){
       var kk ='#'+ $(this)[0].id;
       $(this).MdPersianDateTimePicker({
            targetTextSelector: kk,
            dateFormat: 'yyyy-MM-dd',
            isGregorian: false,
            enableTimePicker: true,
        });

});

});
 
    </script>
</head>
<body>
    <div class="container">
        <h2>Simple</h2>
        &nbsp;&nbsp; date1:
        <input type="text" id="date1" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date2:
        <input type="text" id="date2" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date3:
        <input type="text" id="date3" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date4:
        <input type="text" id="date4" class="datepicker" style="width: 200px;" />
    </div>


</body>

</html>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, July 26, 2019 8:16 AM

All replies

0

Sign in to vote

User-1038772411 posted

Hello, tadbirgaran

<input type="text" data-provider="datepicker" class="datepicker" />

The issue was of CSS selector i.e. you were searching for an element with datepicker class but their was no such element.

Referece Link :

https://stackoverflow.com/questions/44410724/cant-init-bootstrap-datepicker

Thanks

Tuesday, July 23, 2019 12:32 PM
0

Sign in to vote

User-1548796982 posted

AddWeb Solution

Hello, tadbirgaran

<input type="text" data-provider="datepicker" class="datepicker" />

The issue was of CSS selector i.e. you were searching for an element with datepicker class but their was no such element.

Referece Link :

https://stackoverflow.com/questions/44410724/cant-init-bootstrap-datepicker

Thanks

I saw your link but unfortunately I could not run it on MVC.
Please put a full code sample on MVC

Tuesday, July 23, 2019 1:23 PM

User665608656 posted

Hi tadbirgaran,

Based on your another post :https://forums.asp.net/t/2157927.aspx, you can modify it on the basis of the last reply.

You can use this code in your mvc as follow,I hope it will help you :


<!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>
     <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
         $(function () {
            $('.datepicker').MdPersianDateTimePicker({
                dateFormat: 'yyyy-MM-dd',
                isGregorian: false,
                enableTimePicker: true
            });
        });
    </script>
</head>
<body>

    <div>
      &nbsp;&nbsp; date:
        <input type="text" data-provider="datepicker" class="datepicker" style="width:200px;"/>
    </div>
</body>
</html>

The result of this woke demo:

Best Regards,

YongQing.

Wednesday, July 24, 2019 2:05 AM

User-1548796982 posted

Hi tadbirgaran,

Based on your another post :https://forums.asp.net/t/2157927.aspx, you can modify it on the basis of the last reply.

You can use this code in your mvc as follow,I hope it will help you :

<!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>
     <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
         $(function () {
            $('.datepicker').MdPersianDateTimePicker({
                dateFormat: 'yyyy-MM-dd',
                isGregorian: false,
                enableTimePicker: true
            });
        });
    </script>
</head>
<body>

    <div>
      &nbsp;&nbsp; date:
        <input type="text" data-provider="datepicker" class="datepicker" style="width:200px;"/>
    </div>
</body>
</html>

The result of this woke demo:

Best Regards,

YongQing.

thanks.

In the case of multi date fields, $ ('. Datepicker'). MdPersianDateTimePicker How do I write?

How do you specify which textbox to display on the selected date(targetTextSelector)?

Wednesday, July 24, 2019 2:57 AM

User665608656 posted

Hi tadbirgaran,

If you want to show multi date fields, you don't need to change anything in jquery, you just need to add some other input field with class= 'datepicker'.

Because when you refer to these files and use classname as selector, it will automatically distinguish which input box you click on and puts the corresponding date in it.

Here is this example:

@{
    Layout = null;
}

<!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>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
        $(function () {
            $('.datepicker').MdPersianDateTimePicker({
                dateFormat: 'yyyy-MM-dd',
                isGregorian: false,
                enableTimePicker: true
            });
        });
    </script>
</head>
<body>

    <div>
        &nbsp;&nbsp; date1:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date2:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date3:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date4:
        <input type="text" class="datepicker" style="width:200px;" />
    </div>
</body>
</html>

The result of this work demo:

Best Regards,

YongQing.

Wednesday, July 24, 2019 5:28 AM

User-1548796982 posted

Hi tadbirgaran,

If you want to show multi date fields, you don't need to change anything in jquery, you just need to add some other input field with class= 'datepicker'.

Because when you refer to these files and use classname as selector, it will automatically distinguish which input box you click on and puts the corresponding date in it.

Here is this example:

@{
    Layout = null;
}

<!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>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
    <script>
        $(function () {
            $('.datepicker').MdPersianDateTimePicker({
                dateFormat: 'yyyy-MM-dd',
                isGregorian: false,
                enableTimePicker: true
            });
        });
    </script>
</head>
<body>

    <div>
        &nbsp;&nbsp; date1:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date2:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date3:
        <input type="text" class="datepicker" style="width:200px;" /><br /><br />
        &nbsp;&nbsp; date4:
        <input type="text" class="datepicker" style="width:200px;" />
    </div>
</body>
</html>

The result of this work demo:

Best Regards,

YongQing.

not working.

i use bootstrap4 and jquery 3.3.1

Thursday, July 25, 2019 3:28 PM

User665608656 posted

Hi tadbirgaran,

i use bootstrap4 and jquery 3.3.1

If you use bootstrap4 to achieve your needs, you should get all input tags first which class is 'datepicker'.

Then loop each input tag to bind MdPersianDateTimePicker, in each loop, you should get current input id and assign this value to targetTextSelector.

For more details, you could refer to the following code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <link href="../dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
    <script src="../dist/jquery.md.bootstrap.datetimepicker.js"></script> 
    <script type="text/javascript">
$(function(){
    $(".datepicker").each(function(){
       var kk ='#'+ $(this)[0].id;
       $(this).MdPersianDateTimePicker({
            targetTextSelector: kk,
            dateFormat: 'yyyy-MM-dd',
            isGregorian: false,
            enableTimePicker: true,
        });

});

});
 
    </script>
</head>
<body>
    <div class="container">
        <h2>Simple</h2>
        &nbsp;&nbsp; date1:
        <input type="text" id="date1" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date2:
        <input type="text" id="date2" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date3:
        <input type="text" id="date3" class="datepicker" style="width: 200px;" /><br />
        <br />
        &nbsp;&nbsp; date4:
        <input type="text" id="date4" class="datepicker" style="width: 200px;" />
    </div>


</body>

</html>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, July 26, 2019 8:16 AM

Answered by:

initialize MdPersianDateTimePicker using class name

Question

Answers

All replies

AddWeb Solution