• 0

كيف أدرج حقل تاريخ 'DateTimePicker' داخل حقل نصي باستخدام Jquery؟

على بيئة البرمجة Visual Basic يوجد حقل يسمى بـ DataTimePicker، وأريد إدراج حقل تاريخ يظهر بنفس الطريقة على صفحة ويب مكونة من html و Jquery، وهذه هي محاولتي بالاعتماد على أحد المواقع:

  • كود Html مع سكريبت Javascript: 
<input type="text" name="birthdate" value="10/24/1984" />

<script type="text/javascript">
$(function() {
    $('input[name="birthdate"]').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true
    }, 
    function(start, end, label) {
        var years = moment().diff(start, 'years');
        alert("You are " + years + " years old.");
    });
});
</script>

حاولت أيضا استعمال المثال التالي:

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$(function() {

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    cb(moment().subtract(29, 'days'), moment());

    $('#reportrange').daterangepicker({
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

});
</script>

لكن لم ينجح أي منهما، هل من مثال أو حل لأحد المثالين السابقين؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

حاول تجربة هذا النموذج من الكود.

كودhtml :

<p>
  <label for="dateRange">Choose timeframe</label>
</p>
<div id="dateRange" class="btn default">
  <i class="fa fa-calendar"></i> &nbsp;
  <span> </span>
  <b class="fa fa-angle-down"></b>
</div>

كود Java Script المسؤول عن إظهار calendar:

var startDate = moment().subtract('month', 1).startOf('month'),
    endDate = moment().subtract('month', 1).endOf('month');

$('#dateRange').daterangepicker({
                opens: (App.isRTL() ? 'left' : 'right'),
                startDate: startDate,
                endDate: endDate,
                dateLimit: {
                    years: 1
                },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                    'Last 7 Days': [moment().subtract('days', 6), moment()],
                    'Last 30 Days': [moment().subtract('days', 29), moment()],
                    'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                },
                autoApply: true,
                format: 'MM/DD/YYYY',
                separator: ' to ',
                locale: {
                    applyLabel: 'Apply',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom Range',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            },
            function (start, end) {
             // updating the span with current dates
                $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                // Saving the new dates in your startDate and endDate variables.
                startDate = start;
                endDate = end;
            }
    );

//Set the initial state of the picker label
    $('#dateRange span').html(startDate.format('MMMM D, YYYY') + ' - ' + endDate.format('MMMM D, YYYY'));

ليظهر الحقل بالشكل التالي:

83640.png.89ecd2e5c4c1bc52c99e1bbb4ffcd4

هذا الموقع الذي يقدم  إضافة JavaScript خاصة بشهرية-Calendar-   جذابة

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن