Google Chrome में मूल दिनांक को अक्षम करें

Question

दिनांक पिकर Chrome 20 पर उतरा, क्या इसे निष्क्रिय करने की कोई विशेषता है? मेरा पूरा सिस्टम jQuery UI डेटपिकर का उपयोग करता है और यह क्रॉसब्रोसर है, इसलिए, मैं क्रोम देशी डेटापिक को अक्षम करना चाहता हूं। क्या कोई टैग विशेषता है?

Comments

मैं नए Chrome HTML5 दिनांक इनपुट

— वेस्ले मर्च

Answer 1

तीर को छिपाने के लिए:

input::-webkit-calendar-picker-indicator{
    display: none;
}

और शीघ्र छिपाने के लिए:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

Comments

:: - वेबकिट-इनपुट-प्लेसहोल्डर "mm / dd / yyyy" टेक्स्ट को नहीं छिपाएगा क्योंकि यह प्लेसहोल्डर नहीं है, यह मूल रूप से नियंत्रित है।

— जस्टिन बुल

इसके अलावा, आप एक चयनकर्ता को याद कर रहे हैं। संदर्भ के लिए: stackoverflow.com/a/11418704/229787

— जस्टिन बुल

जहां तक ​​मैं बता सकता हूं कि यह एंड्रॉइड क्रोम पर काम नहीं करता है - fiddle.jshell.net/RgY3t/138

— Seb Charrot

Answer 2

यदि आपने दुरुपयोग किया है <input type="date" />तो आप शायद इसका उपयोग कर सकते हैं:

$('input[type="date"]').attr('type','text');

पाठ इनपुट में बदलने के लिए उन्हें लोड करने के बाद। आपको पहले अपना कस्टम डेटापिक संलग्न करना होगा:

$('input[type="date"]').datepicker().attr('type','text');

या आप उन्हें एक क्लास दे सकते हैं:

$('input[type="date"]').addClass('date').attr('type','text');

Comments

आसानी से मेरा पसंदीदा समाधान। यह सरल है और ब्राउज़र विशिष्ट CSS चयनकर्ताओं को लागू नहीं करता है। जावास्क्रिप्ट को कस्टम डेट पिकर के लिए अनुमति देने पर, परिणामी IMO को देशी नियंत्रण को रोकना चाहिए। हालाँकि, यदि जावास्क्रिप्ट अक्षम है, तो देशी नियंत्रण अभी भी काम करते हैं। ईमानदारी से, यह स्वीकृत उत्तर होना चाहिए।

— जस्टिन बुल

@ travesty3 IE के उन संस्करणों को एचटीएमएल 5 तारीखों का समर्थन करता है, या बस पाठ में वापस आता है? अगर नहीं, तो कोई बात नहीं।

— rjmunro

मुझे समझ में नहीं आ रहा है कि किसी दिनांक फ़ील्ड के लिए <input type = "date"> का उपयोग क्यों गलत है? (इस उत्तर का पहला वाक्य)

— स्टीव

यह जन्मतिथि जैसे क्षेत्र के लिए कैलेंडर दिनांक पिकर नहीं चाहते हैं, लेकिन अभी भी देशी ब्राउज़र द्वारा मान्य क्षेत्र को मान्य करना चाहते हैं।

— डंकनमो

@Duncanmoo जन्म की तारीखों के बारे में क्या खास है? बस आज के लिए अधिकतम सेट करें (यदि आप चाहते हैं कि बच्चों को उनके जन्म के दिन प्रवेश दिया जाए), या एन साल पहले जहां एन आपकी साइट के उपयोगकर्ताओं के लिए न्यूनतम आयु है। विशेष रूप से मोबाइल पर, मैं कुछ कस्टम JS चीज़ की तुलना में अपनी जन्मतिथि दर्ज करने के लिए ब्राउज़र की मूल तिथि पिकर का उपयोग करूंगा। इसके अलावा कितने कस्टम जेएस दिनांक पिकर कार्यान्वयन मौजूद हैं जो सत्यापन का समर्थन नहीं करते हैं?

— rjmunro

Answer 3

आप उपयोग कर सकते हैं:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();

Comments

यदि आप jQuery का उपयोग करते हैं = = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();

— yorch

यह उत्तर देशी स्टाइल को दूर नहीं करता है। stackoverflow.com/a/11418704/229787

— जस्टिन बुल

@JustinBull सच है, लेकिन सवाल स्टाइल हटाने के बारे में नहीं था, लेकिन इसके बजाय jQuery दिनांक पिकर का उपयोग करने की अनुमति देता है जो इस उत्तर को प्राप्त करता है। किसी भी विचार कैसे स्टाइल को भी हटाया जा सकता है?

— जिम्बो

Answer 4

Modernizr ( http://modernizr.com/ ) के साथ, यह उस कार्यक्षमता के लिए जाँच कर सकता है। फिर आप इसे उस बूलियन पर बाँध सकते हैं जो यह लौटाता है:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}

Comments

जब एक देशी डेटापार्क उपलब्ध नहीं होता है तो यह jQuery डेटपिकर पर वापस आने के लिए बहुत उपयोगी है। हालाँकि, यह प्रश्न Chrome के दिनांक पिकर से छुटकारा पाने के बारे में प्रतीत होता है, इसलिए मैंने आपका उत्तर नीचे दिया है।

— सैम

Answer 5

इसने मेरे लिए काम किया

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Answer 6

ऊपर दिए गए कोड में इनपुट तत्व का मूल्य निर्धारित नहीं किया गया है और न ही यह एक परिवर्तन घटना को आग लगाता है। नीचे दिया गया कोड Chrome और Firefox में काम करता है (अन्य ब्राउज़रों में परीक्षण नहीं किया गया है):

$('input[type="date"]').click(function(e){
     e.preventDefault();
}).datepicker({
    onSelect: function(dateText){
        var d = new Date(dateText),
        dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2);
        $(this).val(dv).trigger('change');
    }
});

पैड ज़ीरोस (आवश्यक) के साथ तार को पैड करने के लिए एक सरल कस्टम स्ट्रिंग विधि है

Answer 7

मैं रॉबर्टक के साथ सहमत हूं, सबसे अच्छा तरीका प्रकार = दिनांक का उपयोग नहीं करना है लेकिन मेरा JQuery मोबाइल Datepicker प्लगइन इसका उपयोग करता है। इसलिए मुझे कुछ बदलाव करने होंगे:

मैं jquery.ui.datepicker.mobile.js का उपयोग कर रहा हूं और यह परिवर्तन किए हैं:

से (लाइन 51)

$( "input[type='date'], input:jqmData(type='date')" ).each(function(){

सेवा

$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){

और फॉर्म के उपयोग में, टेक्स्ट टाइप करें और var प्लग जोड़ें:

<input type="text" plug="date" name="date" id="date" value="">

Comments

यदि आप स्थानीय स्क्रिप्ट डेटा के लिए कस्टम विशेषताएँ जोड़ना चाहते हैं, तो मान्य तरीका data-*विशेषताओं का उपयोग करना है । इस स्थिति में, data-plugइसके बजाय अपनी विशेषता को कॉल करें plug, यह तब HTML6 / 7/8 / आदि में जोड़े गए किसी भी नए विशेषता के साथ कभी भी टकराव की गारंटी नहीं है।

— रॉबर्ट

Answer 8

मैं निम्नलिखित (कॉफ़ीस्क्रिप्ट) का उपयोग करता हूं:

$ ->
  # disable chrome's html5 datepicker
  for datefield in $('input[data-datepicker=true]')
    $(datefield).attr('type', 'text')
  # enable custom datepicker
  $('input[data-datepicker=true]').datepicker()

जो सादे जावास्क्रिप्ट में परिवर्तित हो जाता है:

(function() {
  $(function() {
    var datefield, _i, _len, _ref;
    _ref = $('input[data-datepicker=true]');
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      datefield = _ref[_i];
      $(datefield).attr('type', 'text');
    }
    return $('input[data-datepicker=true]').datepicker();
  }); 
}).call(this);

Answer 9

यह मेरे लिए काम किया:

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

भले ही दिनांक फ़ील्ड का मान अभी भी था और सही है, यह प्रदर्शित नहीं हुआ। इसलिए मैं अपने दृश्य मॉडल से दिनांक मान रीसेट करता हूं।

Answer 10

यह मेरे लिए काम करता है:

;
(function ($) {
    $(document).ready(function (event) {
        $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
            var $this = $(this);
            $this.prop('type', 'text').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd',
                showWeek: true,
                firstDay: 1
            });

            setTimeout(function() {
                $this.datepicker('show');
            }, 1);
        });
    });
})(jQuery, jQuery.ui);

यह सभी देखें:

मैं नए Chrome HTML5 डेट इनपुट को कैसे निष्क्रिय कर सकता हूं?

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

Answer 11

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं अभी इस बारे में जानकारी पाने के लिए यहां उतरा हूं, इसलिए कोई और भी हो सकता है।

आप यह पता लगाने के लिए माडर्निज़्र का उपयोग कर सकते हैं कि क्या ब्राउज़र एचटीएमएल 5 इनपुट प्रकारों का समर्थन करता है, जैसे 'तारीख'। यदि ऐसा होता है, तो उन नियंत्रणों का उपयोग देशी व्यवहार का उपयोग करके तारीखों जैसी चीजों को प्रदर्शित करने के लिए किया जाएगा। यदि ऐसा नहीं होता है, तो आप निर्दिष्ट कर सकते हैं कि अपनी स्वयं की तारीख को प्रदर्शित करने के लिए किस स्क्रिप्ट का उपयोग किया जाना चाहिए। मेरे लिए अच्छा काम करता है!

मैंने अपने पेज में jquery-ui और Modernizr को जोड़ा, फिर इस कोड को जोड़ा:

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls);
    initDateControls();

    function initDateControls() {
        //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)'
        Modernizr.load({
            test: Modernizr.inputtypes.datetime,
            nope: "scripts/jquery-ui.min.js",
            callback: function () {
                $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" });
            }
        });
    }

</script>

इसका अर्थ है कि क्रोम में देशी डेटापार्क प्रदर्शित किया गया है, और jquery-ui एक IE में प्रदर्शित किया गया है।

Answer 12

Laravel5 के लिए चूंकि एक उपयोग करता है

{!! फॉर्म :: इनपुट ('तारीख', 'तारीख_स्टार्ट', अशक्त, ['वर्ग' => 'फॉर्म-नियंत्रण', 'आईडी' => 'तारीख_स्टार्ट', 'नाम' => 'तारीख_स्टार्ट'])} !!

=> Chrome अपनी तारीख को लागू करेगा। => यदि आप इसे सीएसएस के साथ ले जाते हैं तो आपको सामान्य स्वरूपण त्रुटियां मिलेंगी !! (निर्दिष्ट मान आवश्यक प्रारूप के अनुरूप नहीं है, "yyyy-MM-dd"।)

समाधान:

$ ( 'इनपुट [प्रकार = "तारीख"]') attr ( 'प्रकार', 'पाठ')।

$("#date_start").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$("#date_stop").datepicker({
    autoclose: true,
    todayHighlight: true,
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    viewMode: 'months'
});
$( "#date_start" ).datepicker().datepicker("setDate", "1d");
$( "#date_stop" ).datepicker().datepicker("setDate", '2d');