Mobile website date and time selector (professional for mobile phones)

This is a date and time picker suitable for mobile device WEB applications. In the desktop version, we generally use the datepicker plug-in of jQuery UI, the Mobile phone version's date picker can select the mobiscroll that works with jQuery Mobile based on project requirements. js plug-in, which provides a friendly date and time selection operation interface, and is easy to configure and use.

 
First, we load the relevant plug-ins and style files. This plug-in is based on jQuery and jQuery. mobile. Therefore, we need to first load these two library files, and then load the mobiscroll. js plug-in and related CSS files.

<Script src = "js/jquery. min. js"> </script>
<Script src = "js/jquery. Mobile-1.3.0.min.js"> </script>
<Script src = "js/mobiscroll. js" type = "text/javascript"> </script>
<Link href = "css/mobiscroll.custom-2.5.0.min.css" rel = "stylesheet" type = "text/css"/>

Next, place the input box in the body. This is a common text input box. When you click the input box to obtain the cursor, the mobiscroll pop-up date picker is triggered.
<Input id = "date" name = "date"/>
JavaScript
Mobiscroll provides many options, including defining the display mode, maximum date, minimum date, date format, and end year of the pop-up panel. You can also localize the plug-in, including setting Chinese buttons and instructions. The call is also very simple. The following is the sample code:
$ (Function (){
Var opt = {
Preset: 'date', // date
Theme: 'sense-UIs ', // skin style
Display: 'modal', // display mode
Mode: 'scroler', // date selection mode
DateFormat: 'YY-mm-DD', // date format
SetText: 'true', // confirmation button name
CancelText: 'Cancel', // cancel button name from me
DateOrder: 'yymmdd', // date arrangement format in the panel
DayText: 'day', monthText: 'month', yearText: 'year', // year, month, and day text in the panel
HourText: 'time', minuteText: "minute", ampmText: "Morning/afternoon ",
EndYear: 2020 // end year
};
$ ("# Date"). mobiscroll (). date (opt );
});
If you only select time, you can write as follows:
$ ("# Time"). mobiscroll (). time (opt );
To display the date and time on the panel, call:
$ ("# Datetime"). mobiscroll (). datetime (opt );

Let's take a look at some examples.

 

 

Custom year/month (remove the "day" scroll wheel layout of year/month/day ):

@{
ViewBag. Title = "taste mobiscroll ";
    } 
@ Section styles {
<Link href = "~ /Content/mobiscroll-2.13.2.full.min.css "rel =" stylesheet "/>
<Style>
</Style>
    } 
<Div class = "container">
<Input id = "date"/>
</Div>
     
@ Section scripts {
<Script src = "~ /Scripts/jquery-1.8.2.min.js "> </script>
<Script src = "~ /Scripts/mobiscroll-2.13.2.full.min.js "> </script>
<Script>
$ (Function (){
$ ("# Date"). mobiscroll (). date ({
Theme: "android-ics light ",
Lang: "zh ",
CancelText: null,
DateFormat: 'YY/mm', // format the returned result in the year/month format.
// Wheels: []. You can set this attribute to display only the year and month. For demonstration, use the onBeforeShow method below. You can also use treelist to implement this attribute.
OnBeforeShow: function (inst) {inst. settings. wheels [0]. length> 2? Inst. settings. wheels [0]. pop (): null ;}, // play the "day" wheel
HeaderText: function (valueText) {// customize the header format of the pop-up box
Array = valueText. split ('/');
Return array [0] + "year" + array [1] + "month ";
            } 
});
})
</Script>
    } 

 

Treelist Example 1:

 

<Style>
. Mbsc-android-holo. dwv {text-align: left; text-indent:. 8em ;}
</Style>
     
<Ul id = "treelist">
<Li> General class </li> <li> VIP class </li> <li> Special class </li> <li> premium class </li> <li> special women's training class </li>
</Ul>
     
<Script>
$ (Function (){
$ ("# Treelist"). mobiscroll (). treelist ({
Theme: "android-ics light ",
Lang: "zh ",
DefaultValue: [Math. floor ($ ('# treelist li'). length/2)],
CancelText: null,
HeaderText: function (valueText) {return "Select class ";}
});
})
</Script>

Treelist Example 2:

 

 

<Style>
. Mbsc-android-holo. dwv {text-align: left; text-indent:. 8em ;}
</Style>
 
<Ul id = "treelist">
<Li>
<Span> Audi </span>
<Ul>
<Li> Audi A3 </li>
<Li> Audi A4L </li>
<Li> Audi A6L </li>
<Li> Audi Q3 </li>
<Li> Audi Q5 </li>
<Li> Audi A4 </li>
<Li> Audi A6 </li>
<Li> Audi A1 </li>
<Li> Audi A3 (imported) </li>
</Ul>
</Li>
<Li>
<Span> BMW </span>
<Ul>
<Li> BMW X1 </li>
<Li> BMW i3 </li>
<Li> BMW 1 Series </li>
<Li> BMW 3 Series </li>
<Li> BMW 5 Series </li>
</Ul>
</Li>
<Li>
<Span> Mercedes-Benz </span>
<Ul>
<Li> Mercedes-Benz A </li>
<Li> Mercedes-Benz Class C </li>
<Li> Mercedes-Benz E-Class </li>
<Li> Mercedes-Benz S-Class </li>
<Li> Mercedes-Benz GLK-level </li>
<Li> Mercedes-Benz class-4 </li>
<Li> Mercedes-Benz CLS </li>
</Ul>
</Li>
</Ul>
 
<Script>
$ (Function (){
Var I = Math. floor ($ ('# treelist> li'). length/2 ),
J = Math. floor ($ ('# treelist> li'). eq (I). find ('Ul li'). length/2 );
$ ("# Treelist"). mobiscroll (). treelist ({
Theme: "android-ics light ",
Lang: "zh ",
DefaultValue: [I, j],
CancelText: null,
Placeholder: 'vehicle model Select ',
HeaderText: function (valueText) {return "Select Model ";},
FormatResult: function (array) {// return custom format results
Return $ ('# treelist> li '). eq (array [0]). children ('span '). text () + ''+ $ ('# treelist> li '). eq (array [0]). find ('Ul li '). eq (array [1]). text (). trim ('');
        } 
});
})
</Script>