{"size": 4532, "ext": "js", "max_stars_repo_path": "litmus/features/wheel/index.js", "max_stars_repo_name": "endritarrahmani-prosperoware/cxjs", "max_stars_repo_stars_event_min_datetime": "2017-04-10T13:19:40.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-17T03:12:25.000Z", "max_issues_repo_path": "litmus/features/wheel/index.js", "max_issues_repo_name": "endritarrahmani-prosperoware/cxjs", "max_issues_repo_issues_event_min_datetime": "2017-04-12T13:02:47.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T12:08:50.000Z", "max_forks_repo_path": "litmus/features/wheel/index.js", "max_forks_repo_name": "endritarrahmani-prosperoware/cxjs", "max_forks_repo_forks_event_min_datetime": "2017-04-27T14:11:32.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-02T06:04:51.000Z"}
{"max_stars_count": 382, "max_issues_count": 557, "max_forks_count": 76, "avg_line_length": 33.0802919708, "max_line_length": 133, "alphanum_fraction": 0.314651368}
import {FlexCol, FlexRow, HtmlElement, Icon, Calendar, Wheel, DateTimePicker, DateTimeField, DateField, TimeField} from "cx/widgets";

export default (
   <cx>
      <div style="padding: 10px;" ws>
         <Calendar value:bind="date" />
         <DateTimePicker value:bind="date" />
         <DateTimePicker value:bind="date" />
         <DateTimeField value:bind="date" />
         <DateField value:bind="date" partial />
         <DateTimeField value:bind="date" partial segment="date"/>
         <TimeField value:bind="date" partial />
      </div>
      <div style="padding: 10px;" ws>
         <div style="background: white; padding: 10px; display: inline-block" ws>
            <Wheel 
               value:bind="month"
               size={5}
               options={[
                  {id: 1, text: "Jan"},
                  {id: 2, text: "Feb"},
                  {id: 3, text: "Mar"},
                  {id: 4, text: "Apr"},
                  {id: 5, text: "May"},
                  {id: 6, text: "Jun"},
                  {id: 7, text: "Jul"},
                  {id: 8, text: "Aug"},
                  {id: 9, text: "Sep"},
                  {id: 10, text: "Oct"},
                  {id: 11, text: "Nov"},
                  {id: 12, text: "Dec"},
               ]}/>

            &nbsp; &nbsp;

            <Wheel 
               options={[
                  {id: 1, text: "01"},
                  {id: 2, text: "02"},
                  {id: 3, text: "03"},
                  {id: 4, text: "04"},
                  {id: 5, text: "05"},
                  {id: 6, text: "06"},
                  {id: 7, text: "07"},
                  {id: 8, text: "08"},
                  {id: 9, text: "09"},
                  {id: 10, text: "10"},
                  {id: 11, text: "11"},
                  {id: 12, text: "12"},
               ]}/>

            &nbsp; &nbsp;

            <Wheel
               options={[
                  {id: 1, text: "2000"},
                  {id: 2, text: "2001"},
                  {id: 3, text: "2002"},
                  {id: 4, text: "2003"},
                  {id: 5, text: "2004"},
                  {id: 6, text: "2005"},
                  {id: 7, text: "2006"},
                  {id: 8, text: "2007"},
                  {id: 9, text: "2008"},
                  {id: 10, text: "2009"},
                  {id: 11, text: "2010"},
                  {id: 12, text: "2011"},
               ]}/>

         </div>
         <div style="background: #eee; padding: 10px; display: inline-block" ws>

            <Wheel 
               options={[
                  {id: 2, text: "01"},
                  {id: 3, text: "02"},
                  {id: 4, text: "03"},
                  {id: 5, text: "04"},
                  {id: 6, text: "05"},
                  {id: 7, text: "06"},
                  {id: 8, text: "07"},
                  {id: 9, text: "08"},
                  {id: 10, text: "09"},
                  {id: 11, text: "10"},
                  {id: 12, text: "11"},
                  {id: 13, text: "12"},
               ]}/>

            &nbsp; : &nbsp;

            <Wheel 
               options={[
                  {id: 2, text: "00"},
                  {id: 3, text: "05"},
                  {id: 4, text: "10"},
                  {id: 5, text: "15"},
                  {id: 6, text: "20"},
                  {id: 7, text: "25"},
                  {id: 8, text: "30"},
                  {id: 9, text: "35"},
                  {id: 10, text: "40"},
                  {id: 11, text: "45"},
                  {id: 12, text: "50"},
                  {id: 12, text: "55"},
               ]}/>

            &nbsp; &nbsp;

            <Wheel 
               options={[
                  {id: 2, text: "AM"},
                  {id: 3, text: "PM"}
               ]}/>
         </div>

         <div style="background: white; padding: 10px; display: inline-block" ws>
            <Wheel 
               value:bind="month"
               options={[
                  {id: 1, text: "Jan"},
                  {id: 2, text: "Feb"},
                  {id: 3, text: "Mar"},
                  {id: 4, text: "Apr"},
                  {id: 5, text: "May"},
                  {id: 6, text: "Jun"},
                  {id: 7, text: "Jul"},
                  {id: 8, text: "Aug"},
                  {id: 9, text: "Sep"},
                  {id: 10, text: "Oct"},
                  {id: 11, text: "Nov"},
                  {id: 12, text: "Dec"},
               ]}/>
         </div>
      </div>
   </cx>
);
