2013-02-13 35 views
8

Vì vậy, tôi đang gặp sự cố khi cố buộc kích thước vào ngày nhập. Có ai khác đã có vấn đề này hoặc biết cách để có được xung quanh nó?Chiều rộng đầu vào ngày HTML5

<input style="width:50px;" type="date" value=""> 

Đó là khá đơn giản, chiều rộng chỉ thay đổi textarea, sự kiểm soát thực tế không thay đổi, nó được cố định ở mức khoảng 125 chiều rộng px hoặc lâu hơn.

Tôi cũng đã thử chiều rộng = "" và chiều rộng tối đa trong css, không hoạt động.

+0

Bạn cũng muốn mở rộng dd/mm/yyyy hoặc điều khiển dường như mở rộng cho tôi. Mặc dù vậy tôi có thể hiểu sai. http://jsfiddle.net/supplement/xu9Xm/ – Supplement

+0

Lưu ý ví dụ của tôi sử dụng 50px, không phải 250? Tôi muốn nhỏ hơn giá trị mặc định, không lớn hơn. Cảm ơn. –

+0

Tôi hiểu những gì bạn đang nói bây giờ ... đó là một câu hỏi hay. Tôi sẽ xem nếu tôi có thể đào bất cứ thứ gì cho bạn của tôi. – Supplement

Trả lời

3

Vì hầu hết các trình duyệt đều không tăng tốc với html5. Tôi sẽ chỉ sử dụng bộ chọn ngày với jquery.

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script> 
</head> 
<body> 

<p>Date: <input type="text" id="datepicker" /></p> 


</body> 
</html> 

Tôi đã sử dụng rất nhiều và nó hoạt động tốt. Làm cho ý nghĩa hơn để trình bày lịch trên nhấp chuột cũng như imo.

Đây là liên kết cũng như: http://jqueryui.com/datepicker/

+1

Đây là ứng dụng chỉ dành cho Chrome, vì vậy tôi không lo lắng về IE không bao giờ tuân thủ. Nếu không có giải pháp nào khác cho vấn đề thực tế, tôi sẽ xem lại giải pháp này. 1 cho một thay thế mặc dù. –

+0

Cảm ơn Austin, rất vui vì tôi có thể giúp đỡ và tham gia vào cuộc thảo luận này. =] – Supplement

+2

Đây không phải là câu trả lời cho câu hỏi. – Miles

2

Một yếu tố <input type=date> là vụ phải được thực hiện một cách trình duyệt phụ thuộc vào đó là phù hợp cho môi trường nơi mà các trình duyệt đang chạy. Vì vậy, nó được cho là dưới sự kiểm soát của trình duyệt, không phải của tác giả. Đây là một trong những lý do tại sao nhiều người hoài nghi về ý tưởng này.

Đặt chiều rộng cho điều khiển thực sự là ảnh chụp trong bóng tối. Trên Chrome của tôi (25beta trên Win 7), mã CSS của bạn "hoạt động" theo nghĩa là cắt bớt tiện ích con theo chiều rộng đã cho. Nó vẫn hoạt động, nhưng có vẻ rất lạ: trong widget, chữ "v" và một phần của một số chữ cái khác có thể nhìn thấy được. Chúng thực sự là ký hiệu "vvvv-kk-pp" (ký hiệu bản địa hóa cho "yyyy-mm-dd"), mà tôi có thể thấy trong tiện ích khi không có bất kỳ cài đặt chiều rộng nào.

Kết luận là: bằng cách sử dụng <input type=date>, bạn chấp nhận mọi trình duyệt tiện ích con phụ thuộc vào trình duyệt có thể sử dụng và cố gắng kiểm soát ví dụ: kích thước của nó có thể làm mọi thứ lộn xộn,

+0

tất cả các yếu tố phải tôn trọng CSS được chỉ định cho chúng, phải không ?. và không giống như tôi quan tâm đến giao diện của phần tử giao diện người dùng trong khi chỉnh sửa, nhưng giá trị được hiển thị tĩnh khi không chỉnh sửa. – Michael

4

Với chrome 45, tôi chỉ cần đặt kích thước phông chữ. Nó thay đổi tỉ lệ văn bản và các chốt điều khiển. Không chắc chắn đó là hiệu ứng bạn đang tìm kiếm (?).

<input style="font-size: 3rem" type="date" id="Date"> 
+1

@AustinBest Sau đó, chọn câu trả lời là "giải pháp" sẽ là hành động thích hợp để thực hiện. – kaiser

+4

Cách xa trolling. Việc trả lời câu hỏi của riêng bạn bằng _wontfix_ cũng sẽ là một câu trả lời hợp lệ. – kaiser

+0

Vì đây là phần trên cùng của tìm kiếm google của tôi, và bây giờ là năm 2017, tôi đã có thể ép Chrome xuống đến độ rộng: 10em ;, nhưng nhỏ như tôi có thể nhận được (và đó không phải là nhỏ hơn nhiều mặc định). Tôi thích câu trả lời này tốt hơn những người khác. –

0
<input type="date" name="tanggal" style="width:231px"> 

Hope làm việc này! Nó không thay đổi bất cứ điều gì ngoại trừ chiều rộng.

Các vấn đề liên quan