Create a calendar for jquery UI using the aveon mvvm framework

I copied the jquery datepicker structure and copied the class name. So a calendar is born.

<Div MS-controller = "datepicker"> <Div id = "UI-datepicker-Div" class = "UI-datepicker UI-widget-content UI-helper-Clearfix UI-corner-all "style =" display: block "> <Div class =" UI-datepicker-header UI-widget-header UI-helper-Clearfix UI-corner-all "> <a class =" UI-datepicker-Prev UI-corner-all "Title =" Prev "MS-click =" prevmonth "MS-Hover =" UI-state-Hover "ms-hover-1 =" UI-datepicker-Prev-Hover"> <Span Class = "UI-Icon UI-icon-circle-triangle-W"> Prev </span> </a> <a class = "UI-datepicker-Next UI-corner- all "Title =" Next "MS-click =" nextmonth "MS-Hover =" UI-state-hovers "ms-hover-1 =" UI-datepicker-next-Hover "> <SPAN class = "UI-Icon UI-icon-circle-triangle-e"> next </span> </a> <Div class = "UI-datepicker-title"> <select Ms -each-month = "$ months" MS-If = "changemonth" MS-model = "currentmonth"> <option value = "{mont H }}" MS-selected = "currentmonth = Month" >{{ month + 1 }}month </option> </SELECT> <select MS-each-year =" candidateyears "MS-If =" changeyear "MS-model =" currentyear "> <option value =" {year} "MS-selected =" currentyear = year "> {{year }}</option> </select >{{ title }}</div> <Table class = "UI-datepicker-Calendar"> <thead> <tr MS-each-date = "$ weeks"> <th ms-class-ui-datepicker-week-end = "$ first"> <span Title = "Week {date }}" >{{ date }}</span> </Th> </tr> </thead> <tbody MS-each-week =" currentweeks "Ms-click =" selectday "> <tr MS-each-day =" Week "> <td ms-class-ui-datepicker-other-month =" number (Day. split ('-') [1])! = Currentmonth "MS-class-ui-datepicker-week-end =" $ first | $ last "MS-class-ui-state-Disabled =" day. split ('-') [3] = 1 "MS-class-ui-datepicker-unselectable =" day. split ('-') [3] = 1 "> <a class =" UI-state-Default "MS-Title = 'currentmonth' href =" # "MS-If =" showothermonths | Number (Day. split ('-') [1]) = currentmonth "MS-Hover =" UI-state-Hover "MS-class-ui-state-Highlight =" istoday ">{{ day. split ('-') [2] }}</A> </TD> </tbody> </table> <Div class = "UI-datepicker-buttonpane UI-widget-content" MS-if = "showbuttonpanel"> <button type = "button" class = "UI-datepicker-current UI-state-default UI-priority-secondary UI-corner-all" MS-Hover = "UI-state-Hover" MS-click = "backtoday"> today </button> <button type = "button" class = "UI-datepicker-close UI-state-Default UI-priority-Primary UI-corner-all "MS-Hover =" UI-state-Hover "> done </button> </div> <LINK rel = "stylesheet" MS-href = "regular"> <div> <input type = "radio" MS-model = "changemonth"/> select a month </div> <div> <input type = "radio" MS-model = "changeyear"/> select a year </div> <input type = "radio" MS-model = "showbuttonpanel" /> display button panel </div> <input type = "radio" MS-model = "showothermonths"/> display dates of other months </div> <div> <select MS-model = "theme"> <option value = 'start'> Start </option> <option value = 'smoothness '> smoothness </option> <option value = 'flick'> flick </option> <option value = 'sunny '> sunny </option> <option value = 'excite-Bike'> excite bike </option> <option> value = 'black-tie '> black tie </option> <option value = 'trontastic'> trontastic </option> <option value = 'swanky-purse'> swanky purse </option> <option value = 'Le-frog'> Le Frog </option> <option value = 'blitzer '> Blitzer </option> <option value = 'dot-Luv '> dot Luv </option> <option value = 'mint-choc'> mint-choc </option> <option value = 'hot-sneaks '> Hot sneaks </Option> <option value = 'South-Street'> South Street </option> <option value = 'Humanity '> humanity </option> <option value = 'vader'> Vader </option> <option value = 'eggplant'> eggplant </option> <option value = 'cupertino'> Cupertino </option> <option value = 'overcast'> overcast </ option> </SELECT> skin you like </div> <p> the date you selected is {selecteddate | date ('yyyy-mm-dd ')}} </P> </div>

the above structure is divided into two parts: the top calendar, and some form elements below are used to control the calendar configuration.

Aveon. ready (function () {aveon. define ("datepicker", function (VM) {// configure VM. changeyear = false VM. changemonth = false VM. mindate = new date (2013, 3, 25); // VM. maxdate VM. showothermonths = false; VM. showbuttonpanel = false; // VM at the current time. selecteddate = new date; VM. currentdate = new date; VM. currentmonth = VM. currentdate. getmonth (); VM. currentyear = VM. currentdate. getfullyear (); VM. currentweeks = getwe EKS (VM. currentdate); // displays the top year and month VM. Title = {Get: function () {var format = ""; if (! This. changeyear & this. changemonth) {format = "yyyy Year";} else if (this. changeyear &&! This. changemonth) {format = "mmmm";} else if (! This. changeyear &&! This. changemonth) {format = "Mmmm YYYY";} return format & aveon. filters. date (this. currentdate, format) ;}}; // VM is displayed in the week. $ weeks = "May 15, 1234 ". split (""); // month drop-down menu VM. $ months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] // Date of the month function isdisabled (time) {var Disabled = false; If (VM. mindate) {Disabled = time <VM. mindate;} If (Disabled & VM. maxdate) {Disabled = Time> VM. maxdate;} return disabled -0;} function getweeks (cur) {VM. currentdate = cur; var year = cur. getfullyear (); var month = cur. getmonth (); // obtain the number of months today (0 ~ 11) var date = cur. getdate (); // obtain the number (1 ~) of the current day ~ 31) cur. setmonth (month + 1); // change to the next month. // because the date is 1 ~ 31, 0 is returned to the last day of the previous month, so we get the total number of days of this month cur. setdate (0); var num = cur. getdate (); var next = 6-cur. getday (); var dates = aveon. range (1, num + 1); dates = dates. map (function (d) {var time = new date (year, month, d) return [year, month, D, isdisabled (time)]. join ("-") ;}); cur. setmonth (month); cur. setdate (1); // obtain the first day of the month var Prev = cur. getday (); // 0 ~ 6. cur. setdate (date); // Restore for (VAR I = 0; I <Prev; I ++) {// Add the date of the previous month cur = new date (year, month,-1 * I) dates. unshift ([year, cur. getmonth (), cur. getdate (), isdisabled (cur)]. join ("-")} For (VAR I = 0; I <next; I ++) {// Add the date cur = new date (year, month + 1, I + 1) dates. push ([year, cur. getmonth (), cur. getdate (), isdisabled (cur)]. join ("-")} var ret = []; while (dates. length) {// seven groups in each row ret. pu Sh (dates. splice (0, 7);} return ret; // a 3D array} // obtain the function getyears () {var y = Vm for the previous 20 years. currentyear; return aveon. range (Y-10, Y + 10);} VM. candidateyears = getyears (); // Click Event VM. theme = "start"; VM. nextmonth = function (e) {e. preventdefault () var d = VM. currentdate; var M = D. getmonth (); D. setmonth (m + 1); M = D. getmonth (); If (M = 0) {var y = D. getfullyear (); VM. currentyear = y;} VM. Currentmonth = m ;}; // Click Event VM. prevmonth = function (e) {e. preventdefault () var d = VM. currentdate; var M = D. getmonth (); D. setmonth (m-1); M = D. getmonth (); If (M = 11) {var y = D. getfullyear (); VM. currentyear = y;} VM. currentmonth = m ;}; // listen to the VM. $ Watch ("currentmonth", function (VAL) {var d = VM. currentdate; D. setmonth (VAL); VM. currentweeks = getweeks (d); VM. title = Nan ;}); VM. $ Watch ("cur Every year ", function (VAL) {var d = VM. currentdate; D. setfullyear (VAL) VM. currentweeks = getweeks (d); VM. title = Nan ;}); // highlight the selected date VM. selectday = function (e) {var El = e.tar get; E. preventdefault () if (El. tagname = "A" & el. parentnode. tagname = "TD "&&! /Disabled /. test (El. classname) {var d = el. $ scope. day. split ('-') VM. selecteddate = new date (d [0], d [1], d [2]) ;}; // highlight today's date var today = new date; vaR atoday = [today. getfullyear (), today. getmonth (), today. getdate ()]; VM. istoday = function () {var day = This. $ scope. day; return day. slice (0, day. lastindexof ("-") = atoday. join ("-") ;}; VM. backtoday = function () {VM. currentmonth = atoday [1]; VM. currentyear = atoday [0] ;}}); aveon. scan ();});

This JSCodeIt is clearer than the previous one. Instead of using $ fire, we recommend that you do not use it. If there is no strict value change detection, this can easily lead to infinite recursion.
Now aveon has completely reused existing nodes and will not be cleared every time and then added as in the past. Therefore, the performance is better.

Prev

Next

{Month + 1} month {Year} years

{Title }}

{Date }}
{Day. Split ('-') [2]}

Today
Done

Select month Select a year Show button panel Show dates of other months StartSmoothnessFlickSunnyExcite bikeBlack tieTrontasticSwanky purseLe FrogBlitzerDot LuvMint-chocHot sneaksSouth StreetHumanityVaderEggplantCupertinoOvercast

Select the skin you like (Note: These styles are infected by the blog Garden)

The date you selected is {selecteddate | date ('yyyy-mm-dd ')}}

Less than 150 lines of JavaScript code can cover the vast majority of jquery UI datepicker (over 2000 lines) features. If you try a little bit, encapsulate the template as well. Other functions are also followed up, and the maximum number of rows is also 500. The power of mvvm. In addition, writing JavaScript code in this way is very readable, And the idea will not follow the CSS expression like jquery -- "where is this element? Should I add or remove the class name ......"

After mvvm is used, the idea of writing code is like this.

1. Make HTML first;
2. Convert the duplicate part into an each binding. The VM corresponds to an array;
3. Hide the page as needed. You need to switch the class name and control it by a Boolean attribute in the VM;
4. The Event Callback does not perform Dom operations, but performs shift, pop, and Boolean operations on these arrays;
5. Seal these logics into a VM
6. Finally, bind the view