Click here to Skip to main content
13,350,483 members (72,136 online)
Click here to Skip to main content
Add your own
alternative version

Stats

146.5K views
6.9K downloads
18 bookmarked
Posted 30 Dec 2014

Bootstrap Persian DateTimePicker

, 10 Oct 2015
Rate this:
Please Sign up or sign in to vote.
MdPersianDateTime is a jQuery plugin to create Persian DateTimePicker with bootstrap popover

This Article moved to https://github.com/Mds92/MD.BootstrapPersianDateTimePicker, to download new versions see that.

Introduction

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.

Features

  • Use both javascript code or html tag attributes to run.
  • Changing placement as bootstrap's popover
  • Use target selector to show DateTimePicker on an element and change another element value
  • Ability to switch between DateTimePicker and DatePicker, you can disable TimePicker
  • From date, To date filter.

Using the code

Installing this library by nuget:

Install-Package MD.BootstrapPersianDateTimePicker

At first add the references to your html file:
Order of tags are important

<head>
	<meta charset="utf-8" />	
	<link rel="stylesheet" href="bootstrap.min.css" />
	<link rel="stylesheet" href="bootstrap-theme.min.css" />
	<link rel="stylesheet" href="jquery.Bootstrap-PersianDateTimePicker.css" />

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

	<script src="calendar.js" type="text/javascript"></script>
    <script src="jquery.Bootstrap-PersianDateTimePicker.js" type="text/javascript"></script>
</body>

There are two approaches to use MdPersianDateTime

1. Use JavaScript and jQuery as another jQuery's plugins

You can use the folowing settings for this approach (you can omit them, so the plugin use the default values).

  • Placement string to determine popover placement.It's equals with bootstrap's popover placement. So it can be 'bottom', 'right', 'left', 'top'
  • Trigger string to determine the trigger of bootstrap popover to show DateTimePicker. like 'focus', 'click', 'mouseover', ...
  • EnableTimePicker boolean enables TimePicker on the html element's DateTimePicker. default is true
  • TargetSelector string determines the jQuery selector of the element to write the DateTime string into it.
  • GroupId string determines the group name in FromDate, ToDate filtering. you have to use this attribute if you wanna use the filter
  • ToDate boolean determines the html tags as ToDate filter.
  • FromDate boolean determines the html tags as FromDate filter

Sample :

 

<script type="text/javascript">
    $('#textBoxInputId').MdPersianDateTimePicker({
        Placement: 'bottom', // default is 'bottom'
        Trigger: 'focus', // default is 'focus',
	EnableTimePicker: true, // default is true,
	TargetSelector: '', // default is empty,
	GroupId: '', // default is empty,
	ToDate: false, // default is false,
	FromDate: false, // default is false,
    });
</script>

2. Use html tags attributes.

In this approach you can determine the settings with the following attributes:

data-DateTimePicker="true"
data-Placement="bottom"
data-Trigger="focus"
data-EnableTimePicker="true"
data-TargetSelector="#fromDate1"
data-GroupId="group1"
data-ToDate="true"
data-FromDate="true"

Sample :

<button class="btn btn-default" data-MdDateTimePicker="true" data-TargetSelector="#input1" data-EnableTimePicker="true" data-Placement="left" data-Trigger="click">انتخاب تاریخ</button>

Convert to .NET DateTime

If you gonna to parse the generated DateTime string with this DateTimePicker in .Net and convert it to DateTime you can use the following library easily.

 Persian Calendar(PersianDateTime) in C#

History

  • 30th December 2014: First Post
  • 31th December 2014: Year dropdown and month dropdown added. 
  • 4th January 2015: fix a bug in date range
  • 10th June 2015: fix a bug in displaying days
  • 22th June 2015: fix a bug in displaying days
  • 7th Septambar 2015: fix a bug in changing textbox event
  • 11th October 2015: fix some bug and adding some features and moved the source code to github

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mohammad Dayyan
Iran (Islamic Republic of) Iran (Islamic Republic of)
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 3 Pin
Ehsan yazdani rad25-Dec-17 21:04
memberEhsan yazdani rad25-Dec-17 21:04 
QuestionHow to disable dates after today Pin
Member 1103273318-Aug-17 21:01
memberMember 1103273318-Aug-17 21:01 
Questionدریافت فرمت تاریخ به صورت میلادی Pin
mahdi.gh137316-May-17 7:19
membermahdi.gh137316-May-17 7:19 
Questionنمایش روی فرم Pin
radinabedi24-Jan-17 10:23
memberradinabedi24-Jan-17 10:23 
Questionread from input tag make problem "Input string was not in a correct format." Pin
s_nassirpour7-Aug-16 2:29
members_nassirpour7-Aug-16 2:29 
Questionنمایش تاریخ در دو جا Pin
Member 125142626-Jun-16 23:23
memberMember 125142626-Jun-16 23:23 
AnswerRe: نمایش تاریخ در دو جا Pin
Mohammad Dayyan7-Jun-16 0:27
memberMohammad Dayyan7-Jun-16 0:27 
Questionبعد از سابمیت کردن کامپوننت از کار می افتد Pin
Member 1251426210-May-16 20:58
memberMember 1251426210-May-16 20:58 
Questionاشکال در ذخیره کردن در SQL Pin
Member 1251426210-May-16 2:10
memberMember 1251426210-May-16 2:10 
AnswerRe: اشکال در ذخیره کردن در SQL Pin
Mohammad Dayyan10-May-16 20:41
memberMohammad Dayyan10-May-16 20:41 
GeneralRe: اشکال در ذخیره کردن در SQL Pin
Member 1251426211-May-16 4:26
memberMember 1251426211-May-16 4:26 
GeneralRe: اشکال در ذخیره کردن در SQL Pin
Mohammad Dayyan13-May-16 18:13
memberMohammad Dayyan13-May-16 18:13 
QuestionProblem With Bootstrap Modal Pin
Sina-Soltani665-May-16 2:38
memberSina-Soltani665-May-16 2:38 
AnswerRe: Problem With Bootstrap Modal Pin
Mohammad Dayyan7-May-16 20:15
memberMohammad Dayyan7-May-16 20:15 
QuestionProblem with jquery.Validation Pin
Varan Sinayee16-Apr-16 22:47
memberVaran Sinayee16-Apr-16 22:47 
AnswerRe: Problem with jquery.Validation Pin
Varan Sinayee17-Apr-16 1:54
memberVaran Sinayee17-Apr-16 1:54 
GeneralRe: Problem with jquery.Validation Pin
Mohammad Dayyan17-Apr-16 3:04
memberMohammad Dayyan17-Apr-16 3:04 
AnswerRe: Problem with jquery.Validation Pin
Mohammad Dayyan17-Apr-16 2:48
memberMohammad Dayyan17-Apr-16 2:48 
GeneralRe: Problem with jquery.Validation Pin
Varan Sinayee17-Apr-16 21:43
memberVaran Sinayee17-Apr-16 21:43 
GeneralRe: Problem with jquery.Validation Pin
Member 109422382-Jan-17 8:16
memberMember 109422382-Jan-17 8:16 
Questionزمانی که بر روی کنترل دیگری کلید کرده باشی.؟ Attribut اظافه شد Pin
mohsen_popo18-Mar-16 9:33
membermohsen_popo18-Mar-16 9:33 
AnswerRe: زمانی که بر روی کنترل دیگری کلید کرده باشی.؟ Attribut اظافه شد Pin
Mohammad Dayyan19-Mar-16 23:23
memberMohammad Dayyan19-Mar-16 23:23 
GeneralRe: زمانی که بر روی کنترل دیگری کلید کرده باشی.؟ Attribut اظافه شد Pin
mohsen_popo22-Mar-16 7:12
membermohsen_popo22-Mar-16 7:12 
GeneralRe: زمانی که بر روی کنترل دیگری کلید کرده باشی.؟ Attribut اظافه شد Pin
Mohammad Dayyan22-Mar-16 20:09
memberMohammad Dayyan22-Mar-16 20:09 
Questionگزارش مشکل Pin
ali ghiasi20-Feb-16 19:10
memberali ghiasi20-Feb-16 19:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 11 Oct 2015
Article Copyright 2014 by Mohammad Dayyan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid