locked
Week in daypicker start on Saturday end of friday RRS feed

  • Question

  • User-1790113996 posted

    Good day to all,

    Could you please help me, how to modify datepicker look a like my screenshot calendar uploaded, thank you.

    <b> Please Select Date of your department budget: </b><div id="datepicker"></div>

    Script

        $(function () {
            $j('#datepicker').datepicker({
                onSelect: function (dateText, inst) {
                    var Year = dateText.substring(6, 10);
                    var Month = dateText.substring(0, 2)
                    $("#YEAR").val(Year);
                    $("#MONTH").val(Month);
                    var newdate = new Date(dateText);
                    var result = getWeekNumber(newdate);
                    $("#WORKWEEK").val(result);
                    var first = newdate.getDate() - newdate.getDay();
                    var last = first + 6;
                    var firstday = new Date(newdate.setDate(first)).Format("yyyy-MM-dd");
                    var lastday = new Date(newdate.setDate(last)).Format("yyyy-MM-dd");
                    debugger;
                    $("#STARTDATE").val(firstday);
                    $("#ENDDATE").val(lastday);
                    div_show();
                    debugger;
                }
            });
        });

    Calendar 1

    https://imgur.com/a/3rtOC

    Calendar 2

    https://imgur.com/a/zUVOM

    thank you again

    Thursday, January 18, 2018 9:24 AM

All replies

  • User-1838255255 posted

    Hi Cloudfiers,

    According to your code and needs, I tested your code in my side, i think it is not complete so caused error, so i can not reproduce your code! 

    I hope you could post your complete code and give us a detailed description of you posted image(your needs)?  

    This will could better help you solve the problem! 

    Best Regards,
    Eric Du

    Friday, January 19, 2018 5:35 AM
  • User-1790113996 posted

    Hi Cloudfiers,

    According to your code and needs, I tested your code in my side, i think it is not complete so caused error, so i can not reproduce your code! 

    I hope you could post your complete code and give us a detailed description of you posted image(your needs)?  

    This will could better help you solve the problem! 

    Best Regards,
    Eric Du

    Hi Eric,

    as you requested there is my completed code, I hope you helped me thank you.

    about my uploaded picture, I want  my datepicker will be  same in the picture uploaded I hope you understand.

    Controller

     public ActionResult Index()
            {
                ViewBag.month1 = 1;
                ViewBag.month2 = 12;
                ViewBag.year = 2018;
                ViewBag.DepName = "DepName";
                ViewBag.DepID = "1";
    
                BudgetContext db = new BudgetContext();
                var listSelectitem = db.List().Select(x => x.DEPARTMENTID).Distinct();
                List<SelectListItem> ddllist = new List<SelectListItem>();
                foreach (string bvm in listSelectitem)
                {
                    ddllist.Add(new SelectListItem
                    {
    
                        Text = bvm,
                        Value = bvm
                    });
                };
    
                ViewBag.DeptList = ddllist;
                var list = db.List().Where(b => b.DEPARTMENTID.Contains("DepName") && b.MONTH >= 1 && b.MONTH <= 12 && b.YEAR == 2018).ToList();
                return View(list);
            }
    
    
    
            // POST: /Budget/
            [HttpPost]
            public ActionResult Index(string DepName , int day = 1, int month1 = 1, int month2 = 12, int year = 2018)
            {
                //check if the user has an Account
                if (!RoleAuthentication.HasAccount(User.Identity.GetUserName()))
                {
                    return RedirectToAction("Create", "Employee");
                }
                //check if the user is a requestor
               if (!RoleAuthentication.IsAuthenticated(User.Identity.GetUserName(), "6"))
                {
                    return RedirectToAction("Index", "Budget");
                }
             
              
             
               var InvContext = new InventoryContext();
               var TRANSACTIONSISSUED = new List<TRANSACTIONISSUEDITEM>();
               var ListTrans = InvContext.Transactions();
               var Employeedb = new EmployeeContext();
               var Employee = Employeedb.Find(User.Identity.GetUserName());
               var budgetDb = new BudgetContext();
               var DeptBudget = budgetDb.List().ToList();
    
               TRANSACTIONSISSUED = InvContext.IssuedItems();
               ViewBag.Message = "";
               var YearSelected = new List<string>();
               ViewBag.month1 = month1;
               ViewBag.month2 = month2;
               ViewBag.year = year;
               ViewBag.Department = DepName;
    
               BudgetContext db = new BudgetContext();
               var listSelectitem = db.List().Select(x => x.DEPARTMENTID).Distinct();
               List<SelectListItem> ddllist = new List<SelectListItem>();
               foreach (string bvm in listSelectitem)
               {
                   ddllist.Add(new SelectListItem
                   {
    
                       Text = bvm,
                       Value = bvm
                   });
               };
    
               ViewBag.DeptList = ddllist;
               var list = db.List().Where(b => b.DEPARTMENTID.Contains(DepName) && b.MONTH >= month1 && b.MONTH <= month2 && b.YEAR == year  ).ToList();
    
    
               
               DateTime dt = DateTime.Now;
               int weekOfMonth = (dt.Day + ((int)dt.DayOfWeek)) / 7 + 1;
     
    
               var Expences = (from i in TRANSACTIONSISSUED
                               join r in ListTrans
                               on i.REQUESTNO.Trim() equals r.REQUESTNO.Trim()
                               where
                               i.DEPARTMENT.Trim() == DepName.Trim() &&
                               i.DATETIME.Month == month1 && i.DATETIME.Year == year 
                               select new EXpenseTransactionViewModel
                               {
                                   Month = i.DATETIME.Month,
                                   Year = i.DATETIME.Year,
                                   Department = i.DEPARTMENT,
                                   Cost = i.COST,
                                   Qty = i.QTY
                               }).ToList();
    
               foreach (BudgetViewModel item in list)
               {
                   double Expense = Expences.Where(e => e.Month == item.MONTH && e.week == item.WORKWEEK  && e.Year == item.YEAR && e.Department.Trim() == item.DEPARTMENTID.Trim()).Sum(e => e.Cost * e.Qty);
                   item.EXPENCES = Expense;
                   item.BALANCE = item.BUDGET - item.EXPENCES;
               }
    
               return View(list.ToList());        
            }

    View- Create.cshtml

    @model WarehouseRtoRSystem.Models.BudgetViewModel
    
    <style>
        span.login-text {
            font-size: 22px;
            display: table;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <div class="modal" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    @*<button type="button" class="close" data-dismiss="modal">&times;</button>*@
                    <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true" title="Close">&times;</span> <span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Budget</h4>
                </div>
                <div class="modal-body">
                    <b> Please Select Date of your department budget: </b><div id="datepicker"></div>
                    <br />
                    <div id="abc">
                        <div id="popupContact" title="Basic dialog">
                            <form action="#" id="form" method="post" name="form">
                                @Html.AntiForgeryToken()
    
                                <div class="form-horizontal">
                                 
                                    <hr />
                                    @Html.ValidationSummary(true)
                                    <div class="form-group">
                                        <label>
                                        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                            &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                            &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                                            &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
                                        LIST OF YOUR DEPARTMENT</label>
                                        <div class="col-md-10">
                                            <span class="login-text">@Html.DropDownList("DEPARTMENTID", (SelectList)ViewBag.DeptList, new { @id = "RemarksId", @class = "form-control" })</span>
                                         </div>
                                    </div>
    
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.MONTH, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBoxFor(model => model.MONTH, new { @class = "form-control", @readonly = "readonly" })
                                            @Html.ValidationMessageFor(model => model.MONTH)
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.Label("WORKWEEK", new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("WORKWEEK", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        @Html.Label("STARTDATE", new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("STARTDATE", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        @Html.Label("ENDDATE", new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("ENDDATE", null, new { @class = "form-control", @readonly = "readonly" })
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.YEAR, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBoxFor(model => model.YEAR, new { @class = "form-control", @readonly = "readonly" })
                                            @Html.ValidationMessageFor(model => model.YEAR)
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.BUDGET, new { @class = "control-label col-md-2" })
                                        <div class="col-md-10">
                                            @Html.TextBox("ShowBudget", null, new { @class = "form-control" })
                                            @Html.HiddenFor(model => model.BUDGET, new { @class = "form-control" })
                                            @Html.ValidationMessageFor(model => model.BUDGET)
                                        </div>
                                    </div>
    
                                    <div class="form-group">
                                        <div class="col-md-offset-2 col-md-10">
                                            <input type="submit" value="Submit" class="btn btn-primary"  id="submit" />
                                        </div>
                                    </div>
                                    <br />
                                    <br />
                                    
                                </div>
    
                            </form>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
    
    
        $(document).ready(function () {
    
            $("#ShowBudget").change(function () {
                var value = parseFloat($(this).val());
                $("#BUDGET").val(value); //assign the current value to BUDGET field
    
                if (!isNaN(value)) {
                    var result = value.toLocaleString(
                        "en-US", // use a string like 'en-US' to override browser locale
                        { minimumFractionDigits: 2 }
                     );
                    $(this).val(result);
    
    
    
                }
            })
        })
    
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    
        function getWeekNumber(d) {
            d = new Date(+d);
            d.setHours(0, 0, 0, 0);
            d.setDate(d.getDate() + 4 - (d.getDay() || 7));
            var yearStart = new Date(d.getFullYear(), 0, 1);
            var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
            return weekNo;
        }
    
        var $j = jQuery.noConflict();
        $(function () {
            $j('#datepicker').datepicker({
                onSelect: function (dateText, inst) {
                    var Year = dateText.substring(6, 10);
                    var Month = dateText.substring(0, 2)
                    $("#YEAR").val(Year);
                    $("#MONTH").val(Month);
                    var newdate = new Date(dateText);
                    var result = getWeekNumber(newdate);
                    $("#WORKWEEK").val(result);
                    var first = newdate.getDate() - newdate.getDay();
                    var last = first + 6;
                    var firstday = new Date(newdate.setDate(first)).Format("yyyy-MM-dd");
                    var lastday = new Date(newdate.setDate(last)).Format("yyyy-MM-dd");
                    debugger;
                    $("#STARTDATE").val(firstday);
                    $("#ENDDATE").val(lastday);
                    div_show();
                    debugger;
                }
            });
        });
        function div_show() {
    
            document.getElementById('abc').style.display = "block";
        }
        //Function to Hide Popup
        function div_hide() {
            document.getElementById('abc').style.display = "none";
        }
    </script>
    @section Scripts {
    
    
        <script type="text/javascript">
    
    
            $(document).ready(function () {
                $("#RemarksId").change(function () {
                    $("#Remarks").val($(this).val());
                })
            })
        </script>
    
        @Scripts.Render("~/bundles/jqueryval")
    }
    
    
    

    Monday, January 22, 2018 3:24 AM
  • User-1790113996 posted

    Good day to all,

    here with my sample code I would like to revised my code Datepicker above like in the picture uploaded, please refer my code below how could I combine  in my code above, thank you.

    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    
    .myweekend span.ui-state-default { color: red; }
        
    </style>
    
    
    <script>
        $(function() 
        {
        $( "#datepicker" ).datepicker();
        $("#datepicker" ).datepicker( "option", "firstDay", 6 );
    //$('#datepicker').datepicker({firstDay: 6, beforeShowDay: function(date) {
         // var weekend = date.getDay() == 6 || date.getDay() == 7;
         // return [!weekend, weekend ? 'myweekend' : ''];
    //}});    
    });    
        
    </script>
    </head>
    <body>
    <p>Date: <input type="text" id="datepicker" /></p>
    </body>
    </html>
    
    

    https://imgur.com/a/buT2I - I want like this in my code above , thank you.

    I hope you understand my explanation

    regards,

    Cloudfiers

    Thursday, January 25, 2018 9:29 AM