简体   繁体   English

Html 中的本机日期选择器

[英]Native Date Picker in Html

I used Datepicker plugin for getting Calendar in HTML.我使用 Datepicker 插件在 HTML 中获取日历。 But my boss ordered me not to t use any jquery plugins for date picker.但是我的老板命令我不要将任何 jquery 插件用于日期选择器。 He is saying that I must use native code only for date picker.他是说我必须只对日期选择器使用本机代码。 It should work without Javascript also.它也应该在没有 Javascript 的情况下工作。

Is it possible to create native calendar in html ?是否可以在 html 中创建本机日历?

I know html5 supports native date picker;我知道 html5 支持原生日期选择器; but that is not supported by all browsers.但这并非所有浏览器都支持。

Can i get native date picker as following style..?我可以按照以下样式获得本机日期选择器吗?

在此处输入图片说明

"Native" and "without JavaScript" is where this idea will not work on older browsers. “本机”和“没有 JavaScript”是这个想法在旧浏览器上不起作用的地方。 You could always create an HTML5 datepicker, and non-supportive browsers will fallback to a plain textbox.您始终可以创建一个 HTML5 日期选择器,不支持的浏览器将退回到纯文本框。 You could instruct the user to enter a date in MM/DD/YYYY format, and have this format applied by the datepicker, or by hand if the datepicker is unavailable.您可以指示用户以 MM/DD/YYYY 格式输入日期,并让日期选择器应用此格式,或者在日期选择器不可用时手动应用。

This page offers some advice on the HTML5 datepicker: http://html5tutorial.info/html5-date.php这个页面提供了一些关于 HTML5 日期选择器的建议: http : //html5tutorial.info/html5-date.php

Edit: Alternatively, you could just create three dropdown menus and have the user select the month, day, and year.编辑:或者,您可以只创建三个下拉菜单并让用户选择月、日和年。 (Of course without JS in this case, you couldn't have the number of days in a month change with the user's choice, but you could always validate their input on the server.) (当然,在这种情况下没有 JS,您无法根据用户的选择更改一个月中的天数,但您始终可以在服务器上验证他们的输入。)

You could instruct the user to enter a date in MM/DD/YYYY format, spryno724您可以指示用户以 MM/DD/YYYY 格式输入日期, spryno724

This, a simple html5 placeholder (you can also style css placeholder ) would suffice.这个,一个简单的html5 placeholder (你也可以设置css placeholder样式)就足够了。

<input type='text' placeholder='dd/mm/yyyy' name='form[datetime]' id='datetime' />

why not make the jquery datepicker a fallback?为什么不让 jquery datepicker 成为后备?

pseudocode:伪代码:

if (! input.supports('date'))
    $(input).datepicker();

this way, you get a datepicker if your browser does not support the native one.这样,如果您的浏览器不支持本机,您将获得一个日期选择器。 That is exactly what jQuery's original 'unobtrusive' idea was.这正是 jQuery 最初的“不引人注目”的想法。

Look at this simple Code.看看这个简单的代码。 You need to add 2 js files and 1 css file from net.. Don't worry,It is simple你需要从网上添加2个js文件和1个css文件..别担心,很简单

Here it is这里是

 <!DOCTYPE html> <html> <head> <title>Date</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> </head> <body> <input type="text" id="dob" name="date" placeholder="MM/DD/YYYY"/> <script> $(document).ready(function(){ var date_input=$('input[name="date"]'); var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'dd/mm/yyyy', container: container, todayHighlight: true, autoclose: true, }) }) </script> </body> </html>

I used Datepicker plugin for getting Calendar in HTML.我使用Datepicker插件获取HTML中的日历。 But my boss ordered me not to t use any jquery plugins for date picker.但是我的老板命令我不要为日期选择器使用任何jquery插件。 He is saying that I must use native code only for date picker.他说我必须仅将本机代码用于日期选择器。 It should work without Javascript also.它也可以在没有Java脚本的情况下工作。

Is it possible to create native calendar in html ?是否可以在html中创建本机日历?

I know html5 supports native date picker;我知道html5支持本机日期选择器; but that is not supported by all browsers.但是并非所有浏览器都支持。

Can i get native date picker as following style..?我可以按照以下样式获取本地日期选择器吗?

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM