তারিখ চয়নকারী ক্রোম 20 এ অবতরণ করেছে, এটি অক্ষম করার কোনও বৈশিষ্ট্য আছে কি? আমার পুরো সিস্টেমটি jQuery UI ডেটপিকার ব্যবহার করে এবং এটি ক্রসব্রোজার, সুতরাং, আমি ক্রোম নেটিভ ডেটপিকারকে অক্ষম করতে চাই। কোন ট্যাগ বৈশিষ্ট্য আছে?
উত্তর:
তীরটি আড়াল করতে:
input::-webkit-calendar-picker-indicator{
display: none;
}
এবং প্রম্পটটি গোপন করতে:
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
আপনি যদি অপব্যবহার করেন তবে <input type="date" />আপনি সম্ভবত এটি ব্যবহার করতে পারেন:
$('input[type="date"]').attr('type','text');
পাঠ্য ইনপুটগুলিতে পরিণত করার জন্য তারা লোড করার পরে। আপনাকে প্রথমে আপনার কাস্টম ডেটপিকারটি সংযুক্ত করতে হবে:
$('input[type="date"]').datepicker().attr('type','text');
অথবা আপনি তাদের একটি শ্রেণি দিতে পারেন:
$('input[type="date"]').addClass('date').attr('type','text');
আপনি ব্যবহার করতে পারেন:
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
মডার্নিজর ( http://modernizr.com/ ) এর সাহায্যে এটি সেই কার্যকারিতাটি পরীক্ষা করতে পারে। তারপরে আপনি এটিটি যে বুলেয়েন তা ফিরিয়ে আনতে পারেন:
// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) {
$("#opp-date").datepicker();
}
এটি আমার পক্ষে কাজ করেছে
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
উপরের কোডটি ইনপুট উপাদানটির মান নির্ধারণ করে না বা এটি কোনও পরিবর্তিত ইভেন্টের সূচনা করে না। নীচের কোডটি ক্রোম এবং ফায়ারফক্সে কাজ করে (অন্যান্য ব্রাউজারে পরীক্ষিত নয়):
$('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');
}
});
প্যাড হ'ল জিরোসের সাথে স্ট্রিং প্যাডের জন্য একটি সাধারণ কাস্টম স্ট্রিং পদ্ধতি (প্রয়োজনীয়)
আমি রবার্টকের সাথে একমত, সর্বোত্তম উপায় হ'ল টাইপ = ডেট না ব্যবহার করা তবে আমার জ্যাকুয়ারি মোবাইল ডেটপিকার প্লাগইন এটি ব্যবহার করে। সুতরাং আমাকে কিছু পরিবর্তন করতে হবে:
আমি jquery.ui.datepicker.mobile.js ব্যবহার করছি এবং এই পরিবর্তনগুলি করেছি:
থেকে (লাইন 51)
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
প্রতি
$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){
এবং ফর্মের ব্যবহারে পাঠ্য টাইপ করুন এবং ভের প্লাগ যুক্ত করুন:
<input type="text" plug="date" name="date" id="date" value="">
data-*উপায়টি বৈশিষ্ট্যগুলি ব্যবহার করা । এই ক্ষেত্রে, data-plugপরিবর্তে আপনার বৈশিষ্ট্যটি কল করুন plug, তারপরে এইচটিএমএল 6/7/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);
এটি আমার পক্ষে কাজ করেছে:
// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');
// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');
যদিও মান তারিখ ক্ষেত্র এখনও ছিল এবং সঠিক, এটা প্রদর্শন করেন নি। এজন্য আমি আমার ভিউ মডেল থেকে তারিখের মানগুলি পুনরায় সেট করি।
এটি আমার পক্ষে কাজ করে:
;
(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
আমি জানি এটি এখন একটি পুরানো প্রশ্ন, তবে আমি এই বিষয়ে তথ্যের সন্ধানে এখানে অবতরণ করেছি যাতে অন্য কেউ যাতে পারেন।
ব্রাউজারটি 'ডেট' এর মতো এইচটিএমএল 5 ইনপুট প্রকারকে সমর্থন করে কিনা তা সনাক্ত করতে আপনি মডার্নজার ব্যবহার করতে পারেন । যদি এটি হয় তবে এই নিয়ন্ত্রণগুলি ডেটপিকারগুলির মতো জিনিসগুলি প্রদর্শনের জন্য দেশীয় আচরণ ব্যবহার করবে। যদি এটি না হয় তবে আপনি নিজের ডেটপিকারটি প্রদর্শনের জন্য কোন স্ক্রিপ্টটি ব্যবহার করতে হবে তা নির্দিষ্ট করতে পারেন। আমার জন্য ভাল কাজ করে!
আমি আমার পৃষ্ঠায় jquery-ui এবং আধুনিকীকরণ যুক্ত করেছি, তারপরে এই কোডটি যুক্ত করেছি:
<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 প্রদর্শিত হয়।
Laravel5 জন্য যেহেতু এক ব্যবহার করে
{!! ফর্ম :: ইনপুট ('তারিখ', 'তারিখ_ স্টার্ট', নাল, ['শ্রেণি' => 'ফর্ম-নিয়ন্ত্রণ', 'আইডি' => 'তারিখ_মাস্ত্র', 'নাম' => 'তারিখ_আরচনা']) !!}
=> ক্রোম তার তারিখ-পিকারকে বাধ্য করবে। => আপনি সিএসএস দিয়ে সরিয়ে নিলে আপনি স্বাভাবিক বিন্যাসের ত্রুটি পাবেন! (নির্দিষ্ট মান প্রয়োজনীয় ফর্ম্যাটের সাথে সামঞ্জস্য করে না, "yyyy-MM-dd"))
সমাধান:
; ('ইনপুট [টাইপ = "তারিখ"]')। অ্যাটর ('প্রকার', 'পাঠ্য');
$("#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');