locked
JQuery calendar RRS feed

  • Question

  • User521171331 posted

    Hi,

    I have put all the css and js for jquery date picker. It works partially. It can show the calendar but i think the css is not working.

    secondly, how do i disable all the date which is before the 'date from' so that when i select my 'date to', it will be more make sense?

    I am following example from http://jsfiddle.net/jquerybyexample/dxbtp/494/

    @{
        Layout = null;
    }
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <link href="Content/jquery-ui.min.css" rel="stylesheet" />
        <style>
            body {
        font-size:10pt;
        font-family:Calibri;
        padding: 5px;
    }
        </style>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery-ui.min.js"></script>
        <script src="Scripts/jquery-ui.js"></script>
        <script>
    
        $(document).ready(function () {
            var daysToAdd = 0;
            $("#datefrom").datepicker({
                onSelect: function (selected) {
                    var dtMax = new Date(selected);
                    dtMax.setDate(dtMax.getDate() + daysToAdd);
                    var dd = dtMax.getDate();
                    var mm = dtMax.getMonth() + 1;
                    var y = dtMax.getFullYear();
                    var dtFormatted = mm + '/' + dd + '/' + y;
                    $("#datefrom").datepicker("option", "minDate", dtFormatted);
                }
            });
    
            $("#dateto").datepicker({
                onSelect: function (selected) {
                    var dtMax = new Date(selected);
                    dtMax.setDate(dtMax.getDate() - 4);
                    var dd = dtMax.getDate();
                    var mm = dtMax.getMonth() + 1;
                    var y = dtMax.getFullYear();
                    var dtFormatted = mm + '/' + dd + '/' + y;
                    $("#dateto").datepicker("option", "maxDate", dtFormatted);
                }
            });
            
        });
    
        </script>
    </head>
    <body>
        <div class="demo">
            <p>Date From: <input type="text" id="datefrom"></p>
            <p>Date To: <input type="text" id="dateto"></p>
        </div><!-- End demo -->
    </body>
    </html>
    

    Thursday, May 10, 2018 9:13 AM

All replies

  • User36583972 posted

    Hi ngaisteve1,

    I have put all the css and js for jquery date picker. It works partially. It can show the calendar but i think the css is not working.

    secondly, how do i disable all the date which is before the 'date from' so that when i select my 'date to', it will be more make sense?

    The following sample for your reference. Maybe this is the effect you want to achieve.

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
        <style>
    
            .ui-datepicker {
                display: none;
                width: 220px;
                padding: 28px;
                cursor: default;
                text-transform: uppercase;
                font-family: Tahoma;
                font-size: 12px;
                background: #141517;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
                -moz-box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
                box-shadow: 0px 1px 1px rgba(255,255,255, .1), inset 0px 1px 1px rgb(0,0,0);
            }
    
            .ui-datepicker-header {
                ;
                padding-bottom: 10px;
                border-bottom: 1px solid #d6d6d6;
            }
    
            .ui-datepicker-title {
                text-align: center;
            }
    
            .ui-datepicker-month {
                ;
                padding-right: 15px;
                color: #565656;
            }
    
            .ui-datepicker-year {
                padding-left: 8px;
                color: #a8a8a8;
            }
    
            .ui-datepicker-prev,
            .ui-datepicker-next {
                ;
                top: -2px;
                padding: 5px;
                cursor: pointer;
            }
    
            .ui-datepicker-prev {
                left: 0;
                padding-left: 0;
            }
    
            .ui-datepicker-next {
                right: 0;
                padding-right: 0;
            }
    
                .ui-datepicker-prev span,
                .ui-datepicker-next span {
                    display: block;
                    width: 5px;
                    height: 10px;
                    text-indent: -9999px;
                    background-image: url(../img/4.jpg);
                }
    
            .ui-datepicker-prev span {
                background- 0px;
            }
    
            .ui-datepicker-next span {
                background-position: -5px 0px;
            }
    
            .ui-datepicker-prev-hover span {
                background- -10px;
            }
    
            .ui-datepicker-next-hover span {
                background-position: -5px -10px;
            }
    
            .ui-datepicker-calendar th {
                padding-top: 8px;
                padding-bottom: 6px;
                text-align: center;
                font-weight: normal;
                color: #a8a8a8;
            }
    
            .ui-datepicker-calendar td {
                padding: 0 7px;
                text-align: center;
                line-height: 15px;
            }
    
            .ui-datepicker-calendar .ui-state-default {
                display: block;
                width: 12px;
                outline: none;
                text-decoration: none;
                /*color: #a8a8a8;*/
                border: 1px solid transparent;
            }
    
            .ui-datepicker-calendar .ui-state-active {
                color: #6a9113;
                border: 1px solid #6a9113;
            }
    
            .ui-datepicker-other-month .ui-state-default {
                color: #565656;
            }
    
    
    
    
        </style>
        <script>
    
            $(document).ready(function () {
                var daysToAdd = 2;//Setting interval date
                $("#txtFromDate").datepicker({
                    onSelect: function (selected) {
                        var dtMax = new Date(selected);
                        dtMax.setDate(dtMax.getDate() + daysToAdd);
                        var dd = dtMax.getDate();
                        var mm = dtMax.getMonth() + 1;
                        var y = dtMax.getFullYear();
                        var dtFormatted = mm + '/' + dd + '/' + y;
                        $("#txtToDate").datepicker("option", "minDate", dtFormatted);
                    }
                });
    
                $("#txtToDate").datepicker({
                    onSelect: function (selected) {
                        var dtMax = new Date(selected);
                        dtMax.setDate(dtMax.getDate() - daysToAdd);
                        var dd = dtMax.getDate();
                        var mm = dtMax.getMonth() + 1;
                        var y = dtMax.getFullYear();
                        var dtFormatted = mm + '/' + dd + '/' + y;
                        $("#txtFromDate").datepicker("option", "maxDate", dtFormatted)
                    }
                });
            });
    
        </script>
    </head>
    <body>
        <div  >
            <br />From:
            <input type="text" id="txtFromDate" />To:
            <input type="text" id="txtToDate" />
        </div>
    </body>
    </html>

    jQuery UI 1.9.2

    Best Regards,

    Yong Lu

    Friday, May 11, 2018 7:33 AM
  • User521171331 posted

    Actually, from this example, i don't see any manual css for the calendar but the calender css looks great like below. u know how? http://jsfiddle.net/jquerybyexample/dxbtp/494/

    Saturday, May 12, 2018 1:56 AM
  • User36583972 posted


    Hi ngaisteve1,

    Please try the following code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head >
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Datepicker - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#datepicker").datepicker();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <p>Date: <input type="text" id="datepicker"></p>
            </div>
        </form>
    </body>
    </html>


    For more detailed, please see:Datepicker

    Best Regards,

    Yong Lu

    Monday, May 14, 2018 9:09 AM
  • User521171331 posted

    Thanks. It works if I don't connect to the default MVC template layout. But, just wondering why if I use the default MVC template layout, it is not working.

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Monday, May 14, 2018 10:35 AM
  • User36583972 posted


    Hi ngaisteve1

    Thanks. It works if I don't connect to the default MVC template layout. But, just wondering why if I use the default MVC template layout, it is not working

    please refer the custom style above(my first reply) in MVC template layout.

    Besides, you can visit the JQuery Support Center for getting further help.


    Best Regards,

    Yong Lu

    Tuesday, May 15, 2018 2:00 AM