asp.net mvc | انتخابگر تاریخ و زمان فارسی با استفاده از Bootstrap Persian DateTimePicker

در پروژه ی asp.net mvc ، می خوایم از "انتخابگر تاریخ و زمان فارسی" استفاده کنیم.

سلام

الف - افزودن Bootstrap Persian DateTimePicker در پروژه asp.net mvc :

به مسیر Tools > NuGet Package Manager > Package Manager Console رفته و دستور زیر را وارد می کنیم :

Install-Package MD.BootstrapPersianDateTimePicker

ب - قسمت کدهای HTML :

به attributeهای در نظر گرفته شده در بین تگهای اچ تی ام ال توجه فرمایید

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>انتخابگر تاریخ-زمان فارسی</title>
    <!--CSS-->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <link href="~/Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.min.css" rel="stylesheet" />
    <!--/CSS-->
</head>
<body class="yekan">

    <div class="container" style="max-width: 500px;">
        <br /><br />
        <div class="form-group">
            <label class="sr-only yekan" for="exampleInput1">تاریخ و زمان</label>
            <div class="input-group">
                <div data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:9,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" style="cursor: pointer;" class="input-group-addon" data-mddatetimepicker="true" data-targetselector="#exampleInput1" data-trigger="click" data-enabletimepicker="true">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
                <input class="form-control" id="exampleInput1" placeholder="تاریخ به همراه زمان" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="sr-only" for="exampleInput3">تاریخ</label>
            <div class="input-group">
                <div data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:10,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-enabletimepicker="false" data-mdpersiandatetimepicker="" style="cursor: pointer;" class="input-group-addon" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#exampleInput3">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
                <input data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:11,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-enabletimepicker="false" data-trigger="focus" data-mdpersiandatetimepicker="" class="form-control" id="exampleInput3" placeholder="تاریخ" data-mddatetimepicker="true" data-placement="right" type="text">
            </div>
        </div>

        <div class="form-group">
            <input data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1392,&quot;Month&quot;:1,&quot;Day&quot;:1,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-enabletimepicker="false" data-trigger="focus" data-mdpersiandatetimepicker="" class="form-control" data-mddatetimepicker="true" value="۱۳۹۲/۰۱/۰۱" data-placement="right" type="text">
        </div>

        <div class="form-group">
            <button data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:23,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" class="btn btn-default" data-mddatetimepicker="true" data-targetselector="#input1" data-enabletimepicker="true" data-placement="left" data-trigger="click">انتخاب تاریخ</button>
        </div>

        <div class="form-group">
            <input class="form-control" id="input1" value="" type="text">
        </div>

        <div style="margin: 20px; clear: both;"></div>

        <div class="form-group">
            <div class="input-group">
                <div data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:10,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" style="cursor: pointer;" class="input-group-addon" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#fromDate1" data-groupid="group1" data-fromdate="true" data-enabletimepicker="false" data-placement="left">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
                <input data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:9,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" class="form-control" id="fromDate1" placeholder="از تاریخ" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#fromDate1" data-groupid="group1" data-fromdate="true" data-enabletimepicker="false" data-placement="right" type="text">
            </div>

            <div class="input-group">
                <div data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:10,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" style="cursor: pointer;" class="input-group-addon" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#toDate1" data-groupid="group1" data-todate="true" data-enabletimepicker="true" data-placement="left">
                    <span class="glyphicon glyphicon-calendar"></span>
                </div>
                <input data-mdpersiandatetimepickershowing="false" title="" data-original-title="" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1393,&quot;Month&quot;:10,&quot;Day&quot;:23,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepicker="" class="form-control" id="toDate1" placeholder="تا تاریخ" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#toDate1" data-groupid="group1" data-todate="true" data-enabletimepicker="true" data-placement="right" type="text">
            </div>
        </div>

    </div>

    <!--جاوااسکریپت-->
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/calendar.js"></script>
    <script src="~/Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.min.js"></script>
    <!--/جاوااسکریپت-->
</body>
</html>

فایل ضمیمه فایل HTMLیی است که کدهای جاوااسکریپت و سی اس اس به آن افزوده شده است

مرتبط : انتخابگر تاریخ و زمان فارسی با استفاده از Persian JQuery DatePicker

منبع مقاله

آموزش بوت استرپ