|
19 | 19 | </head> |
20 | 20 |
|
21 | 21 | <body> |
22 | | - <div class="container"> |
23 | | - <h2>Simple</h2> |
| 22 | + <section> |
24 | 23 | <div class="row"> |
25 | | - <div class="col-sm-6"> |
| 24 | + |
| 25 | + <div class="col-md-4 form-group"> |
| 26 | + <label for="enter_date_1"> تاریخ شروع </label> |
| 27 | + <div class="input-group"> |
| 28 | + <div class="input-group-prepend"> |
| 29 | + <span class="input-group-text cursor-pointer" id="enter_date">انتخاب تاریخ</span> |
| 30 | + </div> |
| 31 | + <input type="text" name="enter_date_1" id="enter_date_1" class="form-control form-group" |
| 32 | + aria-label="enter_date" aria-describedby="enter_date" /> |
| 33 | + <input type="hidden" name="enter_date_2" id="enter_date_2" class="form-control form-group" |
| 34 | + aria-label="enter_date" aria-describedby="enter_date" /> |
| 35 | + </div> |
| 36 | + </div> |
| 37 | + <div class="col-md-4 form-group"> |
| 38 | + <label for="exit_date_1"> تاریخ پایان </label> |
26 | 39 | <div class="input-group"> |
27 | 40 | <div class="input-group-prepend"> |
28 | | - <span class="input-group-text cursor-pointer" id="dt_class">Icon</span> |
| 41 | + <span class="input-group-text cursor-pointer" id="exit_date">انتخاب تاریخ</span> |
29 | 42 | </div> |
30 | | - <input type="text" id="inputDate3" class="form-control"> |
| 43 | + <input type="text" name="exit_date_1" id="exit_date_1" class="form-control form-group" aria-label="exit_date" |
| 44 | + aria-describedby="exit_date" /> |
| 45 | + <input type="hidden" name="exit_date_2" id="exit_date_2" class="form-control form-group" |
| 46 | + aria-label="exit_date" aria-describedby="exit_date" /> |
31 | 47 | </div> |
32 | | - <label id="showDate_class"> </label> |
33 | | - <input type="hidden" id="targetDateSelector_id" value="2009-12-15T00:00:00Z"> |
34 | 48 | </div> |
35 | 49 | </div> |
36 | | - </div> |
| 50 | + </section> |
37 | 51 |
|
38 | | - <script src="../dist/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> |
39 | | - <!-- <script src="../src/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> --> |
| 52 | + <!-- <script src="../dist/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> --> |
| 53 | + <script src="../src/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> |
40 | 54 |
|
41 | 55 | <script type="text/javascript"> |
42 | | - $("#dt_class").MdPersianDateTimePicker({ |
43 | | - targetDateSelector: "#targetDateSelector_id", |
44 | | - targetTextSelector: "#inputDate3", |
45 | | - textFormat: " dddd dd MMMM yyyy ", |
46 | | - calendarViewOnChange: function (param1) { |
47 | | - console.log('calendarViewOnChange', param1); |
48 | | - }, |
49 | | - onDayClick: function (param1) { |
50 | | - console.log('onDayClick', param1); |
51 | | - } |
| 56 | + $('#enter_date').MdPersianDateTimePicker({ |
| 57 | + targetTextSelector: '#enter_date_1', |
| 58 | + targetDateSelector: '#enter_date_2', |
| 59 | + fromDate: true, |
| 60 | + groupId: 'enter_date', |
| 61 | + modalMode: true |
| 62 | + }); |
| 63 | + |
| 64 | + $('#exit_date').MdPersianDateTimePicker({ |
| 65 | + targetTextSelector: '#exit_date_1', |
| 66 | + targetDateSelector: '#exit_date_2', |
| 67 | + toDate: true, |
| 68 | + groupId: 'enter_date', |
| 69 | + modalMode: true |
52 | 70 | }); |
53 | 71 | </script> |
54 | 72 |
|
|
0 commit comments