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

محمد بوسكوري · 5 فبراير 2016

على بيئة البرمجة 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>

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

E.Nourddine · 5 فبراير 2016

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

كود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- جذابة

تم التعديل في 5 فبراير 2016 بواسطة E.Nourddine

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

السؤال

محمد بوسكوري

رابط هذا التعليق

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

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية