locked
datepicker does not shown correctly! RRS feed

  • Question

  • User991566988 posted

    Hi

    I get this datepicker from this link:

    http://jsfiddle.net/hnu0r78y/5/

    I put it as JS file in my core 2.1 project:

    (function( factory ) {
    	if ( typeof define === "function" && define.amd ) {
    
    		// AMD. Register as an anonymous module.
    		define([ "../jquery.ui.datepicker" ], factory );
    	} else {
    
    		// Browser globals
    		factory( jQuery.datepicker );
    	}
    }(function( datepicker ) {
    	datepicker.regional['ar'] = {
    		closeText: 'إغلاق',
    		prevText: '<السابق',
    		nextText: 'التالي>',
            currentText: 'اليوم',
            monthNames: ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
    		'يوليو', 'أغسطس', 'سبتمبر',	'أكتوبر', 'نوفمبر', 'ديسمبر'],
            monthNamesShort: ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
                'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
    		//monthNames: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
    		//'تموز', 'آب', 'أيلول',	'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
    		//monthNamesShort: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
    		//'تموز', 'آب', 'أيلول',	'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
    		dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
    		dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
    		dayNamesMin: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
    		weekHeader: 'أسبوع',
    		dateFormat: 'yy/mm/dd',
    		firstDay: 6,
      		isRTL: true,
    		showMonthAfterYear: false,
    		yearSuffix: ''};
    	datepicker.setDefaults(datepicker.regional['ar']);
    
    	return datepicker.regional['ar'];
    
    }));
    // initialize datepicker
    $("#datepicker").datepicker({
        isRTL: true,
        changeMonth: true,
        changeYear: true
    });

    and then call it in shared _layout:

        <div class="page-footer">
            <div class="page-footer-inner">
                Copy Right
            </div>
            <div class="page-footer-tools">
                <span class="go-top">
                    <i class="fa fa-angle-up"></i>
                </span>
            </div>
        </div>
    
        <script src="~/Content/MetronicRTL/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
    .... Some scripts calls
    <script src="~/js/datepicker.js"></script>

    then put the id in the view:

    <input asp-for="SomeDate" class="form-control" id="datepicker"/>
    ....Some code
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(document).ready(function () {
    var select_mr = $('#mr option:selected').val();
    $('#hdn_mr').val(select_mr);
    });
    </script>

    But when I put the cursor in SomeDate item the datepicker is show like this:

    as you see the datepicker is not getting the correct shape of it! Why? and How to solve please?

    Friday, June 14, 2019 9:36 AM

Answers

  • User475983607 posted

    The image indicates a CSS issue and the jsfiddle indicates you are using the jQuery date picker.  Either there's conflicting CSS or the CSS is missing entirely. 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    jQuery date picker reference.

    https://jqueryui.com/datepicker/

    jQuery UI downloads.

    https://jqueryui.com/download/all/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 14, 2019 12:34 PM

All replies

  • User475983607 posted

    The image indicates a CSS issue and the jsfiddle indicates you are using the jQuery date picker.  Either there's conflicting CSS or the CSS is missing entirely. 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    jQuery date picker reference.

    https://jqueryui.com/datepicker/

    jQuery UI downloads.

    https://jqueryui.com/download/all/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 14, 2019 12:34 PM
  • User991566988 posted

    The image indicates a CSS issue and the jsfiddle indicates you are using the jQuery date picker.  Either there's conflicting CSS or the CSS is missing entirely. 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    you are right! it is working now correctly.

    Thank you very much

    Friday, June 14, 2019 3:21 PM